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

Question

Trying to change background color of Toast container, the code below suppose to make this. I dont know what I am missing but it doesnt work...

this is what I tried:

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

react component:

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 effect the component but cant change the color, the element looks like below in browser :

What do I need to do make it work?

You forgot the space here between the ampersand and the class &.Toastify__toast--error — Martin
– Martin, Commented Apr 21, 2021 at 13:56

Martin · Accepted Answer · 2021-04-21 14:28:31Z

5

You use cssLoader with css modules, right? maybe you must mark .Toastify__toast--error as global. Scoping classnames in cssLoader

.toastError {
  margin-top: 15rem;

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

answered Apr 21, 2021 at 14:28

Martin

6,2682 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related