css - 调整 react-toastify Toast 背景颜色的最简单方法

Question

我这样试过，但它什么也没做:

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'
          })          
  }
}

我看到一个白色的 toast ，上面写着我的文字。

Answer 1

最简单的解决方案

调整 Toastify 的 BG 或实际上任何样式的最简单解决方案是使用 ToastContainer props toastStyle: 它接受 JSX 属性。导入必要的包后，在添加 ToastContainer 组件时，只需传入 toastStyle 属性即可。

<ToastContainer toastStyle={{ backgroundColor: "crimson" }} />