I have my app in CodeSandbox using styled-component. Please refer the below url https://lrn6vmq297.sse.codesandbox.io/
Everytime I made some changes, the console is saying.
Warning: Prop `className` did not match.
It looks like you've wrapped styled() around your React component (Component), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.
and UI does not render as expected. Anyone has idea why I am having this issue ? Please have a look the url above.
Thanks
Basically, you need to pass
this.props.className
orprops.className
or a deconstructedclassName
that was generated bystyled-components
and manually apply it to the component you want to style. Otherwise, you're not applying theclassName
to anything and therefore won't see any style changes.Working example:
components/LinkComponent.js (this
functional component
accepts theclassName
generated bystyled()
andprops
that were passed in to the styled component created below -- you'll need to manually apply them to theLink
component)components/StyledLink.js (import the
functional component
above and pass it tostyled()
-- you can also create a styled themed to updatestyled()
elements)components/Header.js (import the styled component
StyledLink
created above and utilize it -- any additional props passed to this component will automatically be passed to thefunction
, however, you'll need to, in this case, deconstruct theprop
to utilize it)