search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.73k stars 700 forks source link

Toastify__toast-container does not get styled #614

Closed pastinepolenta closed 2 years ago

pastinepolenta commented 3 years ago

Do you want to request a feature or report a bug? Bug

What is the current behavior? When styling using styled-component the container Toastify__toast-container does not get styled. The other parts get styled properly.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below: https://codesandbox.io/s/react-toastify-container-styled-p94mv?file=/src/App.js:252-277

What is the expected behavior? The container should be styled according to the rule (in the sandbox example 800px)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? Tried with react 16.13 and styled-components 5.x.x

fkhadra commented 2 years ago

Hey a bit late for the answer. This is a specificity issue. https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity. You can fix your issue as follow.

  &&&.Toastify__toast-container {
    width: 800px;
  }

I'll update the documentation to make it clear