styled(Component) 不将样式值传递给自定义组件

Question

我有一个 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 设置样式），它确实会按预期工作。谁能告诉我，我做错了什么？

Answer 1

好吧，我刚刚再次阅读文档并发现，您必须将类名向下传递给子组件的父组件。所以我将 Knob 的 render() 更改为：

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

styled(Component) not passing style values down to custom components