title: How to override child css class in parent react component using sass
body: <p>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...</p>
  <p>this is what I tried:</p>
  <pre><code>.toastError {
    margin-top: 15rem;// this works
    &amp;.Toastify__toast--error {
      background: #bd362f !important;// this is is not...
    }
  }
  </code></pre>
  <p>react component:</p>
  <pre><code>import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  ..
  return (
  &lt;ToastContainer position=&quot;top-center&quot;
            className={styles.toastError}
            autoClose={4000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
          /&gt;
  </code></pre>
  <p>margin-top effect the component but cant change the color, the element looks like below in browser :
  <a href="https://i.stack.imgur.com/VgzB1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VgzB1.png" alt="enter image description here" /></a></p>
  <p>What do I need to do make it work?</p>