基本上，您需要通过
this.props.className或生成
props.className的解构
className，
styled-components然后将其手动应用于要设置样式的组件。否则，您不会将
className应用于任何内容，因此不会看到任何样式更改。
工作示例：
components / linkComponent.js （
functionalcomponent接受由
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;components / Styledlink.js （导入
functionalcomponent以上内容并将其传递给
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;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>);
