styled-components is saying wrapped styled() around your React component (Component)

Question

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

Answer 1

Basically, you need to pass this.props.className or props.className or a deconstructed className that was generated by styled-components and manually apply it to the component you want to style. Otherwise, you're not applying the className to anything and therefore won't see any style changes.

Working example:

components/LinkComponent.js (this functional component accepts the className generated by styled() and props that were passed in to the styled component created below -- you'll need to manually apply them to the Link component)

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

const LinkComponent = ({ className, children, link }) => (
  <Link className={className} to={link}>
    {children}
  </Link>
);

LinkComponent.propTypes = {
  className: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
  children: PropTypes.string.isRequired
};

export default LinkComponent;

components/StyledLink.js (import the functional component above and pass it to styled() -- you can also create a styled themed to update styled() elements)

import styled from "styled-components";
import LinkComponent from "./LinkComponent";

const StyledLink = styled(LinkComponent)`
  color: ${props => (!props.primary && !props.danger ? "#03a9f3" : "#ffffff")};
  background-color: ${props => {
    if (props.primary) return "#03a9f3";
    if (props.danger) return "#f56342";
    return "transparent";
  }};
  font-weight: bold;
  margin-right: 20px;
  padding: 8px 16px;
  transition: all 0.2s ease-in-out;
  border-radius: 4px;
  border: 2px solid
    ${props => {
      if (props.primary) return "#03a9f3";
      if (props.danger) return "#f56342";
      return "#03a9f3";
    }};

  &:hover {
    color: ${props => (!props.primary && !props.danger ? "#0f7ae5" : "#ffffff")};
    background-color: ${props => {
      if (props.primary) return "#0f7ae5";
      if (props.danger) return "#be391c";
      return "transparent";
    }};
    text-decoration: none;
    border: 2px solid ${props => (props.danger ? "#be391c" : "#0f7ae5")}};
  }
`;

export default StyledLink;

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 the function, however, you'll need to, in this case, deconstruct the prop to utilize it)

import React from "react";
import StyledLink from "./StyledLink";

export default () => (
  <nav className="container">
    <StyledLink primary link="/">Home</StyledLink>
    <StyledLink danger link="/about">About</StyledLink>
    <StyledLink link="/portfolio">Portfolio</StyledLink>
  </nav>
);

Answer 2

Link doesn't really work (or I don't understand what exactly you wanted to show), but from the error message it looks like you should pass className like this styled(<Component className={your source for classnames} />)

Answer 3

I had similar situation where I would need to use a component created by styled-component, and pass css property to that component. Hope this helps!

Main component (define CSS property here)

import Wrapper from 'components/Wrapper'

const CustomWrapper = styled(Wrapper)`
  &:hover {
    background-color: blue;  // defining css property I want to pass down
  }
`;
...

render() {
  return (
    ... <CustomWrapper />  // using my CustomWrapper component made from 'styled-component'
  )
}
`;

Wrapper.js - functional component (use defined CSS here)

const Wrapper = props => {
  const { className } = props;  // see how className is destructed and used below

  return (
    <div className={className}>  // 'className' is used here
      {YOUR_CONTENT}
    </div>  
  )
}

Answer 4

For shared components it's better to use forwardRef, or you can just pass props:

import React from 'react'
import styled from 'styled-components'

function MainComponent() {
  return (
    <LoadingStyled />
  )
})

const LoadingStyled = styled(LoadingComponent)`
  margin-top: 40px;
`

---

import React, { forwardRef } from 'react'

export const LoadingComponent = forwardRef((props, ref) => {
  return (
    <div {...props}>
      I got all props and styles, yeeeee!
    </div>
  )
})

---

Alternative without forwardRef.

import React from 'react'

export const LoadingComponent = (props) => {
  return (
    <div {...props}>
      I got all props and styles, yeeeee!
    </div>
  )
}