我尝试了这样的方法,但没有任何作用:
const myToast = () => (
<div style={{backgroundColor: myColors.green}}>
...some text content...
</div>
)
然后在App.js中
class App extends Component {
showMyToast = () => {
toast(<MyToast />, {
closeOnClick: false,
toastId: 'my_toast',
autoClose: true,
closeButton: false,
position: toast.POSITION.BOTTOM_CENTER,
className: 'toast'
})
}
}
我看到一个白色的吐司,上面写着我的文字。
最简单的解决方案
调整 Toastify 的 BG 或实际上任何样式的最简单的解决方案是使用 ToastContainer 属性 toastStyle: 它接受 JSX 属性。 导入必要的包后,在添加 ToastContainer 组件时,只需传入 toastStyle 属性即可。
<ToastContainer toastStyle={{ backgroundColor: "crimson" }} />
根据@Laurens的回答,我发现代码沙箱中的模式非常有用。这是我为获得如下所示的通知所做的事情
首先,我将 Toast 容器安装在应用程序的根目录下,位于我的
App
组件内
import React from 'react';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import store from './redux/store';
import Routes from './Routes';
const App = () => {
return (
<Provider store={store}>
<ToastContainer
autoClose={2000}
position="top-center"
className="toast-container"
toastClassName="dark-toast"
/>
<Routes />
</Provider>
);
};
然后,对于每个通知样式,我定义了一系列CSS样式。组件看起来像这样
// customToast.js
import { toast } from 'react-toastify';
import { css } from 'glamor';
const customToast = {
success(msg, options = {}) {
return toast.success(msg, {
...options,
className: 'toast-success-container toast-success-container-after',
progressClassName: css({
background: '#34A853',
}),
});
},
error(msg, options = {}) {
return toast.error(msg, {
...options,
className: 'toast-error-container toast-error-container-after',
progressClassName: css({
background: '#EE0022',
}),
});
},
info(msg, options = {}) {
return toast.info(msg, {
...options,
className: 'toast-info-container toast-info-container-after',
progressClassName: css({
background: '#07F',
}),
});
},
};
export default customToast;
要使用这些,只需执行
import customToast from 'customToast.js'
即可。现在您可以使用 customToast.success
、customToast.error
等
成功通知的样式如下所示
.toast-success-container {
color: #000 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
border: 1px solid #34A853 !important;
box-shadow: 0px 1px 5px rgba(248, 175, 175, 0.1) !important;
}
.toast-success-container-after {
overflow: hidden;
position: relative;
}
.toast-success-container-after::after{
top: 0;
left: 0;
content: '';
width: 7px;
height: 100%;
position: absolute;
display: inline-block;
background-color: #34A853;
}
您还会注意到,我必须在我的 CSS 中粘贴一系列
!important
最简单的解决方案是设置
theme
属性,如文档中所述。
你可以:
全局设置主题
//Set the theme globally
<ToastContainer theme="colored" />
或定义每个toast
// define per toast
toast.info("Display a blue notification of type info", { theme: "colored" });
这会根据 toast 类型更改背景颜色(
error
、warning
、info
等)。
希望这对将来的任何人都有帮助。
怎么样(9.1.1版本):
toast.info(msg, {
position: 'top-right',
autoClose: 15000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: 0,
progressStyle: { background: '#E8DFD0' },
theme: 'colored',
style: { background: '#766852' },
});
};
如果颜色是硬编码值,您可以简单地在 CSS 中覆盖它。但是,如果颜色需要可变,例如,您也可以使用Helmet。作为可以通过用户偏好或其他方式更改的应用程序主题颜色。看看你的例子,你会包括
<Helmet
style={[
{
cssText: `
.Toastify__toast--success {
background: ${customColor} !important;
}
`,
},
]}
/>
customColor
变量将从您的商店中提取出来,并可以动态更新,为您提供自定义的吐司背景颜色。
我认为这是最简单的解决方案。
1.使用以下链接安装glamorous https://glamorous.rocks/basics/#installation
2.之后像这样将css导入到你的js文件中..
import { css } from 'glamor';
3.之后给弹出的吐司赋予你自己的风格,就像这样..
toast.configure({
autoClose:10000,
draggable: true,
hideProgressBar: true,
position: toast.POSITION.TOP_CENTER,
toastClassName: css({
fontSize: '18px !important',
backgroundColor: '#da1c36 !important',
padding: '15px !important'
}),
});
toast.info("Display a blue notification of type info", { className: 'bg-warning' });
添加到Dwaipayan的答案,
您可以使用
ToastContainer
标签在 toastStyle
中使用 CSS 样式。
对我有用的是使用 backgroundColor
以及 color
属性的 CSS 变量。
<ToastContainer toastStyle={{backgroundColor: 'var(--background)', color: 'var(--foreground)'}}/>
可以根据用户的设备主题在全局 CSS 文件中更改变量:
:root {
--background: #ffffff;
--foreground: #000000;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #000000;
--foreground: #ffffff;
}
}
**如果你想更改而不使用CSS。 notify = () => this.toastId = toast.error('error') { error: "error", info: "info", success: "success", warning: "warning", } 像上面这样使用 否则.