How does styled-components impost order on the resulting CSS?

[fostimus]

I have a project, deployed on Netlify and using Gatsby to build the production files.

We have a bug occasionally where the order of styles to an extended component gets mixed up. The base styles ultimately get applied over the extended styles, which is not at all what we want. An example:

const BaseComponent = styled.div`
    display: block;
`

const ExtendedComponent = styled(BaseComponent)`
    display: flex;
`

When using ExtendedComponent above both display properties get injected. But the one that is used on the site is display: block. Any thoughts on this?

I'm trying to understand how styled-components imposes this order, so I can find where things are going wrong.

[conor-v]

Hey @fostimus maybe this can help.
link --> https://www.designcise.com/web/tutorial/how-to-extend-styles-of-react-component-using-styled-components

[fostimus]

If anyone is coming to this thread and using Netlify, we were able to avoid the issue but reverting to styled-components 5.0.1.

I'd still like to understand how the overriding process works, but I suppose reading the code for styled-components is my best bet 😬

[agriffis]

@fostimus In the example you provided, the end result should always be display: flex

There's nothing crazy about the overriding process. It's simply: wrappers override wrapped.

The only time this isn't true is when the wrapped component uses a higher specificity.

I made a codesandbox to demonstrate: https://codesandbox.io/s/styled-components--overrides-demo-zw8i21?file=/src/App.tsx