Hi guys!!
First of all thank you very much for styled-components. We're massively using it in our company and we're superhappy with it! Great job!!
Lately we were forced to start using a global namespace for our css and we noticed that styled-components does not really play well with it.
Here you can find a bin with a practical example: https://www.webpackbin.com/bins/-KfvQIyzL57v9tfNRauJ .
Actual behaviour:
The background is green.
Expected behaviour:
The background is papayawhip.
So far we're handling it by adding to each styled component a class self in order to style them in this way:
&.self {
background: papayawhip;
}
But of course we're not satisfied with this solution.
We thought it would be useful to pass to the ThemeProvider a global namespace to use for increasing the styled-components selectors specificity.
Do you have any other suggestion/solution for such a case?
Hi guys!!
First of all thank you very much for
styled-components. We're massively using it in our company and we're superhappy with it! Great job!!Lately we were forced to start using a global namespace for our css and we noticed that
styled-componentsdoes not really play well with it.Here you can find a bin with a practical example: https://www.webpackbin.com/bins/-KfvQIyzL57v9tfNRauJ .
Actual behaviour:
The background is
green.Expected behaviour:
The background is
papayawhip.So far we're handling it by adding to each styled component a class
selfin order to style them in this way:But of course we're not satisfied with this solution.
We thought it would be useful to pass to the
ThemeProvidera global namespace to use for increasing thestyled-componentsselectors specificity.Do you have any other suggestion/solution for such a case?