Mantine 通知文字颜色

huangapple go评论106阅读模式
英文:

Mantine Notification Text Color

问题

我正在帮助我的朋友开发一个应用程序的前端,该应用程序是使用TypescriptReactMantine开发的。我们有以下通知代码和图片:

代码:

  1. notifications.show({
  2. id: 'login-success',
  3. title: 'Login successful!',
  4. message: 'You have successfully logged in!',
  5. autoClose: 5000,
  6. withCloseButton: true,
  7. style: { backgroundColor: 'green' },
  8. });

结果:

Mantine 通知文字颜色

我希望通知中的标题文本是白色的。

我尝试了以下方法,但都没有成功:

  • style属性更改为具有color: 'white'属性,
  • 在我们正在使用的CSS中添加.mantine-notification-message { color: white !important; }
  • 将整个应用程序包装在ThemeProvider中,像这样:
  1. const theme = {
  2. colorScheme: 'dark',
  3. colors: {
  4. white: '#ffffff',
  5. },
  6. };
  7. return (
  8. <ThemeProvider theme={theme}>
  9. ... 组件 ...
  10. </ThemeProvider>
  11. );

如何使标题文本变为白色?

英文:

I am helping my friends develop the frontend of an application, developed in Typescript, React and Mantine. We have the following notification code and image:

Code:

  1. notifications.show({
  2. id: &#39;login-success&#39;,
  3. title: &#39;Login successful!&#39;,
  4. message: &#39;You have successfully logged in!&#39;,
  5. autoClose: 5000,
  6. withCloseButton: true,
  7. style: { backgroundColor: &#39;green&#39; },
  8. });

Result:

Mantine 通知文字颜色

I want the title and text in the notification to be white.

I tried the following, but none of them worked;

  • Changing the style attribute to have the color: &#39;white&#39; property,

  • Adding .mantine-notification-message {
    color: white !important;
    }
    to the CSS that we are using and

  • Wrapping the entire app using ThemeProvider like so:

    1. const theme = {
    2. colorScheme: &#39;dark&#39;,
    3. colors: {
    4. white: &#39;#ffffff&#39;,
    5. },
    6. };
    7. return (
    8. &lt;ThemeProvider theme={theme}&gt;
    9. ... components ...
    10. &lt;/ThemeProvider&gt;
    11. );

How can I make the title and the text white?

答案1

得分: 1

从文档中:(https://mantine.dev/others/notifications/#customize-notification-styles),您可以使用

styles: (theme) => ({
title: { color: theme.white },
description: { color: theme.white },
})

英文:

From the documentation: (https://mantine.dev/others/notifications/#customize-notification-styles), you can use

  1. styles: (theme) =&gt; ({
  2. title: { color: theme.white },
  3. description: { color: theme.white },
  4. })

huangapple
  • 本文由 发表于 2023年6月4日 23:35:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76401160.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定