CSS overriding, className vs StyledComponent about styled-components

[geelen]

Both of them simply inject CSS into the head, so if you have conflicting rules you have the same CSS cascade rules that always apply — for the same specificity, the rules that are defined latest will win.

I haven't looked into webpack's style-loader (which I'm assuming you're using) as to where it injects the styles, but it wouldn't surprise me if will always inject CSS ahead of Styled Components (since one is build time and one is run time). If that's the case, there's not much you can do beyond escalating specificity. Or, you know, try to avoid clashes where possible!

But if you want to bump specificity the easiest way is to do this:

// styles.css
.styledUpYo.styledUpYo {
  background-color: red;
}

Or, if for some reason the order switches and you need to boost specificity in SC, you can do this:

// StyledUpYo.js
const StyledUpYo = styled.div`
  && {
    background-color: green;
  }
`;

Hope that helps explain it. Maybe you could try out the specificity increase and just confirm it works for your problem, and we could document that?

[samit4me]

Oh man, great response, thank you for taking the time to explain, it makes a lot of sense now.

• Yes, I am using the style-loader.
• You are 100% right, bumping the specificity fixes the issue in both examples (both directions).

As for documenting this, do you think it should live under the Tip and Tricks section? That is kind of where I would expect an edge case like this to belong.

[geelen]

Happy to help!

I think it could be its own doc. "Using Styled Components with Existing CSS". There may well be a few more edge cases we come across. If you're happy to have a go at writing that that would be great!

[pst37]

I'm working on a component library that includes a styled component , like this:

const MyDiv =styled.div`
  background-color:green;
`;

I want the flexibility for users of my component library to easily override the styles through css and css, particularly the background-color, when they use my components in their projects.

import MyDiv from 'my-package';

....
<MyDiv className='background-color-red'>Text</MyDiv>
....

As classes with styled component will higher specificity (since styles with styled component will be appended in head) there will no way to override those style at consumer end.

I'm using esbuild for my component library.

What's the best way to ensure that my component styles can be customized by users without being overridden when they use my component library in their projects? Any advice or best practices would be greatly appreciated.

[samit4me]

Just discovered that Overriding a non Styled Component (your own or 3rd party react component) only works if the react component adds the className prop. This seems to be a caveat more than anything but I am guessing this should be listed in the main README, what do you think?

[mxstbr]

Yeah true, that's just inherent to how styled-components and react works. We should definitely note that!