如何修改Mantine通知组件的标题与文本颜色为白色？

可行方案 #

方案1：调用通知时通过styles属性覆盖内部元素样式

Mantine的notifications.show支持styles属性，可精准设置通知内部标题、消息文本的样式：

notifications.show({
  id: 'login-success',
  title: 'Login successful!',
  message: 'You have successfully logged in!',
  autoClose: 5000,
  withCloseButton: true,
  style: { backgroundColor: 'green' },
  styles: {
    title: { color: 'white' },
    message: { color: 'white' },
    closeButton: { color: 'white' } // 可选：同步修改关闭按钮颜色
  }
});

方案2：全局主题配置统一修改通知样式

若需所有通知默认使用白色文本，在ThemeProvider中配置Notification组件的全局样式：

import { createTheme, ThemeProvider } from '@mantine/core';

const theme = createTheme({
  colorScheme: 'dark', // 保留你原有的配色方案
  components: {
    Notification: {
      styles: () => ({
        title: { color: 'white' },
        message: { color: 'white' },
        closeButton: { color: 'white' }
      })
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 应用组件 */}
    </ThemeProvider>
  );
}

方案3：使用自定义通知组件

对通知样式有更高定制需求时，可创建自定义组件传入：

import { Notification } from '@mantine/core';

const CustomLoginSuccessNotification = () => (
  <Notification
    autoClose={5000}
    withCloseButton
    style={{ backgroundColor: 'green' }}
  >
    <Notification.Title style={{ color: 'white' }}>Login successful!</Notification.Title>
    <Notification.Message style={{ color: 'white' }}>You have successfully logged in!</Notification.Message>
  </Notification>
);

// 调用自定义通知
notifications.show({
  id: 'login-success',
  component: CustomLoginSuccessNotification
});

原方法无效原因说明 #

1. 直接在style中设置color: 'white'仅作用于通知根容器，内部标题、文本元素有独立样式优先级，无法继承该颜色。
2. CSS类名.mantine-notification-message可能因Mantine版本不同存在动态类名差异，导致样式未生效。
3. 原有主题配置仅修改了配色方案和基础颜色值，未针对Notification组件的内部元素做样式覆盖。

内容的提问来源于stack exchange，提问作者Yağız Can Aslan