英文:
Mantine Notification Text Color
问题
我正在帮助我的朋友开发一个应用程序的前端,该应用程序是使用Typescript
,React
和Mantine
开发的。我们有以下通知代码和图片:
代码:
notifications.show({
id: 'login-success',
title: 'Login successful!',
message: 'You have successfully logged in!',
autoClose: 5000,
withCloseButton: true,
style: { backgroundColor: 'green' },
});
结果:
我希望通知中的标题和文本是白色的。
我尝试了以下方法,但都没有成功:
- 将
style
属性更改为具有color: 'white'
属性, - 在我们正在使用的CSS中添加
.mantine-notification-message { color: white !important; }
, - 将整个应用程序包装在
ThemeProvider
中,像这样:
const theme = {
colorScheme: 'dark',
colors: {
white: '#ffffff',
},
};
return (
<ThemeProvider theme={theme}>
... 组件 ...
</ThemeProvider>
);
如何使标题和文本变为白色?
英文:
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:
notifications.show({
id: 'login-success',
title: 'Login successful!',
message: 'You have successfully logged in!',
autoClose: 5000,
withCloseButton: true,
style: { backgroundColor: 'green' },
});
Result:
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 thecolor: 'white'
property, -
Adding
.mantine-notification-message {
to the CSS that we are using and
color: white !important;
} -
Wrapping the entire app using
ThemeProvider
like so:const theme = {
colorScheme: 'dark',
colors: {
white: '#ffffff',
},
};
return (
<ThemeProvider theme={theme}>
... components ...
</ThemeProvider>
);
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
styles: (theme) => ({
title: { color: theme.white },
description: { color: theme.white },
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论