如何使用 sass 覆盖父 React 组件中的子 css class

Question

尝试更改 Toast 容器的背景颜色，下面的代码假设可以做到这一点。我不知道我错过了什么，但它不起作用...

这是我试过的：

.toastError {
  margin-top: 15rem;// this works
  &.Toastify__toast--error {
    background: #bd362f !important;// this is is not...
  }
}

反应组件：

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
..
return (
<ToastContainer position="top-center"
          className={styles.toastError}
          autoClose={4000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />

margin-top 影响组件但不能改变颜色，元素在浏览器中如下所示：

我需要做什么才能让它发挥作用？

Answer 1

您将 cssLoader 与 css 模块一起使用，对吗？也许您必须将 .Toastify__toast--error 标记为全局。 Scoping classnames in cssLoader

.toastError {
  margin-top: 15rem;

  :global(.Toastify__toast--error) {
    background: #bd362f !important;
  }
}

如何使用 sass 覆盖父 React 组件中的子 css class

How to override child css class in parent react component using sass

sass

reactjs

react-css-modules