Javascript 已设置样式的组件未将样式应用于自定义功能组件

使用

已设置样式的组件

设置自定义功能组件的样式时，不会应用这些样式。下面是一个示例，其中样式未应用于

StyledDiv

：

const Div = () => (<div>test</div>)
const StyledDiv = styled(Div)`
  color: red;
`;

constdiv=（）=>（测试）
const StyledDiv=已设置样式（Div）`
颜色：红色；
`;

确保正确应用样式的最佳方法是什么？

来自：

样式化方法在您自己或任何其他应用程序上都能完美地工作 第三方组件，只要它们传递类名 道具到其渲染子组件，该子组件也应通过道具，以及 等等。最后，必须将类名沿行传递给 要使样式生效的实际DOM节点

例如，您的组件将成为：

const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
`;

constdiv=（{className}）=>（测试）
const StyledDiv=已设置样式（Div）`
颜色：绿色；
`;

修改示例：

const styled=styled.default
常量Div=（{className}）=>（测试）
const StyledDiv=已设置样式（Div）`
颜色：绿色；
字体大小：较大；
`;
常量应用=（）=>{
返回（测试）
}
ReactDOM.render（，document.querySelector（'.app'））

使用

样式化（组件）

创建一个类，该类作为名为

className

的道具传递给包装的组件

然后可以将其应用于根元素：

const Div = ({ className }) => (
  <div className={className}>test</div>
)

const StyledDiv = styled(Div)`
  color: red;
`;

constdiv=（{className}）=>(
测试
)
const StyledDiv=已设置样式（Div）`
颜色：红色；
`;

如果您无法更改原始组件（它是导入或生成的），让我们假设该组件是一个

，您可以用

等包装它并嵌套css规则，如下所示：

const ComponentICantTouchWrapper = ({className}) => (
    <div className={className}><ComponentICantTouch /></div>
);
const StyledComponentICantTouch = styled(ComponentICantTouchWrapper)`
    > span {
        color: red;
    }
`;

const ComponentICantTouchWrapper=（{className}）=>(
);
const styledComponentTouch=styled（ComponentTouchWrapper）`
>跨度{
颜色：红色；
}
`;

在这里添加我的代码笔，因为我试图在找到答案之前理解问题。现在它工作了！谢谢