styled(Component) 没有将样式值传递给自定义组件答案

【问题标题】：styled(Component) not passing style values down to custom componentsstyled(Component) 没有将样式值传递给自定义组件
【发布时间】：2017-12-24 13:08:59
【问题描述】：

我有一个 React 组件 Knob 并希望将不同的样式传递给它，以将其多次放置在 css 网格中。父组件有Display: grid，子组件的样式如下：

const Treble = styled(Knob)`
    grid-column: 2;
    grid-row: 1;
`;

const Mid = styled(Knob)`
    grid-column: 2;
    grid-row: 2;
`;
...

但不幸的是，网格值没有传递给旋钮组件。如果我将网格值放在旋钮组件的最顶部容器上（也由 styled-components 设置样式），它会按预期工作。谁能告诉我，我在这里做错了什么？

【问题讨论】：

在<Knob /> 中添加{...this.props} 有帮助吗？喜欢这个<Knob {...this.props} />。
不，我刚刚又读了一遍文档，你必须传递类名。我第一次没看错 ;) 不过谢谢！

标签： reactjs styled-components

【解决方案1】：

好的，我刚刚再次阅读文档并发现，您必须将类名传递给子组件的父组件。于是我把Knob的render()改成了：

const {className} = this.props;
<Container className={className}>
   ...
</Container>

【讨论】：