样式（Component）不将样式值传递给自定义组件

Question

Ich有一个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;
`;
...

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

Answer 1

好吧，我只是再次阅读文档并想出，您必须将类名传递给子组件的父组件。所以我将Knob的render（）更改为：

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