CSS overriding, className vs StyledComponent

Passing a className prop to a StyledComponent works fine, but if a specific CSS property (e.g. background-color) is passed in via a className prop and also defined in the StyledComponent, the StyledComponent will win.

In the example below <div> will have a green background. Should the CSS properties sent via the className prop override any matching CSS properties in the StyledComponent? Either way, it would be great to have this documented, happy to submit a PR.

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

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

import StyledUpYo from './StyledUpYo';
import styles from './styles.css';

const Contrived = (props) => (
  <StyledUpYo className={styles.styledUpYo}>
    {props.children}
  </StyledUpYo>
);

[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?

[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!