Styled-components говорит обернутый styled () вокруг вашего компонента React (Component)

Ссылка на самом деле не работает (или я не понимаю, что именно вы хотели показать), но из сообщения об ошибке похоже, что вы должны передать className следующим образом styled(<Component className = {your source for classnames} />)

По сути, вам нужно передать this.props.className или props.className или деконструированный className, который был сгенерирован styled-components, и вручную применить его к компоненту, который вы хотите стилизовать. В противном случае вы не примените className ни к чему и не увидите никаких изменений стиля.

Рабочий пример:

компоненты / LinkComponent.js (этот functional component принимает className, сгенерированные styled() и props, которые были переданы стилизованному компоненту, созданному ниже - вам необходимо вручную применить их к компоненту Link)

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;

компоненты / StyledLink.js (импортируйте приведенный выше functional component и передайте его в styled() - вы также можете создать стилизованный тематический для обновления элементов styled())

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;

компоненты / Header.js (импортируйте стилизованный компонент StyledLink, созданный выше, и используйте его - любые дополнительные реквизиты, переданные этому компоненту, будут автоматически переданы в function, однако в этом случае вам необходимо деконструировать prop, чтобы использовать его)

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

Для общих компонентов лучше использовать forwardRef, или вы можете просто передать 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>
  )
})

Альтернатива без пересылки Ссылка.

import React from 'react'

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

У меня была аналогичная ситуация, когда мне нужно было бы использовать компонент, созданный styled-component, и передать свойство css этому компоненту. Надеюсь это поможет!

Главный компонент (определите здесь свойство CSS)

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 - функциональный компонент (используйте здесь определенный CSS)

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