CODEWITHSUNDEEP
styled-componentsserver-side-rendering
Simone Groß
Simone Groß

Reputation: 101

Styled Components: Override Styles not working correctly with Server Side Rendering

It seems like overriding styles does not work consistently. I have this two styled components: 

const StreamContentContainer = styled.div`
  display: flex;
  vertical-align: middle;
  flex-direction: column;
  flex: 0 100%;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
  flex-flow: column wrap;
`;

// new Component based on StreamContentContainer 
with additional styles and override stlye

const FullStreamContentContainer = styled(StreamContentContainer)`
  height: 56.11vw;
  overflow: hidden;
  padding: 0;
`;

Know if I use my FullStreamContentContainer there should be no padding. On CSR that works fine, the element shows up in the markup correctly. But if the element is requested initial with SSR the padding of the StreamContentContainer overrides the FullStreamContentContainer again. It does not matter if the node is generated on SSR or CSR, it shows up the same way in the markup: <div class="sc-4y67w2-1 fodYop sc-4y67w2-0 WzHos">...</div>. But if I inspect the element with the DevTools, I can see that on SSR first the class WzHos shows up and then the class fodYop:

Styles on SSR

Compared to the rules rendered on CSR the rules occur the other way round - like expected: Styles on CSR

Does anybody know what causes this weird behavior and how to avoid it?

Upvotes: 2

Views: 2828

Answers (1)

Simone Gro&#223;
Simone Gro&#223;

Reputation: 101

Problem resolved: Increased the specificity of FullStreamContentContainer styles by using 

const FullStreamContentContainer = styled(StreamContentContainer)`
  &&& {
  height: 56.11vw;
  overflow: hidden;
  padding: 0;
  }
`;

Relating to the SC docs, the repeated class bumps the specificity high enough to override the source order.

Upvotes: 3

Related Questions