Vfrdtyky

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 or props.className or a destructured className that was generated by styled-component and apply it to the component's returned JSX. Otherwise, you're not applying the className to anything and therefore don't see any styles.

Working example: https://codesandbox.io/s/lr6knqmq27

components/LinkComponent.js

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>

);



export default LinkComponent;



LinkComponent.propTypes = {

  className: PropTypes.string.isRequired,

  link: PropTypes.string.isRequired,

  children: PropTypes.string.isRequired

};

components/StyledLink.js (can use styled-theming instead of if statements)

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 ? "be391c" : "#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 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>

);

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} />)