Compatibility with styled-components

[graysonhicks]

I'm working on a project and enjoy both evergreen and styled-components, so I'm trying to use both. One issue I am having is that some styles don't seem possible to override using the styled() function.

For example, this:

const LightHeading = styled(Heading)`
  font-weight: 800;
  color: ${colors.white['500']};
`

const SearchButton = styled(Button)`
  margin-top: 10px;
`

Would render the base color and font-weight of Heading from evergreen. I can see the styled-component styles overridden in DevTools. From what I can gather, any styles that evergreen accepts as props, can not be overridden by styled-components.

Actual:

Expected:

I know styled-components has this technique (https://www.styled-components.com/docs/basics#styling-any-components) for passing the className to your component, but not sure how to do that with evergreen.

Two other notes:

• I am using Gatsby (have tried turning the evergreen Gatsby SSR snippet on and off, no change)
• It works as expected locally (expected screenshot is from local), but not when deployed to Netlify (actual screenshot).

Here is the repo: https://github.com/graysonhicks/parkary-gatsby
Here is the live Netlify: https://wizardly-elion-f89c8d.netlify.com/

Anyone using styled-components with evergreen? If so, how? Should I not be mixing the two? Any help is greatly appreciated!

[jeroenransijn]

Hey @graysonhicks thanks for trying out Evergreen! I would advice against mixing styled-components and Evergreen components in most cases. There are some cases in which it could work, but it would require a solid understanding of the component internals of Evergreen.

I have been having some issues with SSR in Gatsby v2 (next) as well — our docs run on that, and I couldn't get SSR to work. I will take another look this week or next week to get it to work!

[graysonhicks]

Thanks! Okay, yea I am using Gatsby v2 as well on this, but wasn't sure if that or styled-components was the issue.

Good to know re: styled-components.