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

yfwxisqw 于 2023-04-20 发布在 React

关注(0)|答案(1)|浏览(136)

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

但不幸的是，网格值没有被传递到旋钮组件。如果我把网格值放在旋钮组件的最上面的容器上（它也是由样式化组件样式化的），它会按预期工作。有人能告诉我，我在这里做错了什么吗？

1条答案

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

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