styled-components 是说在你的 React 组件（组件）周围包裹了 styled()答案

【问题标题】：styled-components is saying wrapped styled() around your React component (Component)styled-components 是说在你的 React 组件（组件）周围包裹了 styled()
【发布时间】：2019-04-19 07:43:11
【问题描述】：

我在 CodeSandbox 中使用 styled-component 我的应用程序。请参考以下网址 https://lrn6vmq297.sse.codesandbox.io/

每次我进行一些更改时，控制台都会显示。

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.

并且 UI 未按预期呈现。任何人都知道我为什么会遇到这个问题？请看上面的网址。

谢谢

【问题讨论】：

codeandbox 无法显示必要的代码，请更新。

标签： reactjs styled-components codesandbox

【解决方案1】：

链接实际上不起作用（或者我不明白您到底想显示什么），但是从错误消息看来，您应该像这样传递 className styled(<Component className={your source for classnames} />)

【讨论】：

【解决方案2】：

基本上，您需要传递this.props.className 或props.className 或由styled-components 生成的解构className 并手动将其应用到您要设置样式的组件上。否则，您不会将 className 应用于任何内容，因此不会看到任何样式更改。

工作示例：

components/LinkComponent.js（这个functional component 接受由styled() 和props 生成的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;

components/StyledLink.js（导入上面的functional component并将其传递给styled()——你也可以创建一个styled themed来更新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;

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

【讨论】：

【解决方案3】：

对于共享组件最好使用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>
  )
})

没有 forwardRef 的替代方案。

import React from 'react'

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

【讨论】：

【解决方案4】：

我有类似的情况，我需要使用由 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>  
  )
}

【讨论】：