reactjs - 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>
);