stylis-class-specificity-plugin
Adds specificity to simple class selectors (ie transforms .my-class into .my-class.my-class)
npm install stylis-class-specificity-plugin
Use case
This plugin can be used with styled-components v5+, in cases where you need to increase class specificity of all elements inside a container using StyleSheetManager
One of the solutions to third-party styles specificity issue
It is an alternative way of increasing specificity to
&&&
Example
...import plugin from 'stylis-class-specificity-plugin'; const StyledDiv = styleddiv` background: #fff;` // repeat class name of styled-components 2 times, ie: .nvF53f => .nvF53f.nvF53f const increaseSpecificityPlugin = ; { <StyleSheetManager => <StyledDiv>...</StyledDiv> </StyleSheetManager>}