0

我正在使用各种控件填充网格（在此示例中：上下计数器和文本框）。

目前，我在cls成员中注入样式（在这个例子中可以是例如wide-input和narrow-input）：

render(): ReactNode {
    const input: CellItem[] = [
        { isUpdown: false, cls: 'wide-input' },
        { isUpdown: true, cls: 'narrow-input' },
    ];

    return (
        <GridContainer>
            input.map(content, index): ReactNode => {
                return (
                    content.isUpdown ?
                        <StyledUpdownCell className={content.cls} /> :
                        <StyledTextBoxCell className={content.cls} /> :
                )               
            }
        </GridContainer>
    );
}

我的问题是使用styled-components的正确方法是什么？

有没有办法注入任意样式（content.cls在这个例子中，但明天它也可以设置自定义边框颜色）

4

1 回答 1

0

使用样式组件，您可以访问传递给自定义样式组件的道具。

因此，您可以创建不同的“主题”道具，然后将它们传递给您的道具，StyledUpdownCell然后访问组件样式中的道具。例如

const StyledUpdownCell = styled.div`
   border-color: ${props => props.warningTheme ? 'red' : 'black'};
`

正在使用：

<StyledUpdownCell warningTheme />

您也可以直接传递道具，但使用默认值，例如

const StyledUpdownCell = styled.div`
   border-color: ${props => props.borderColor || 'black'};
`

正在使用：

<StyledUpdownCell borderColor="violet" />

这完全取决于您以及您希望如何设计组件的 API。

旁注：我发现这个小库有助于创建具有许多不同道具的组件：https ://github.com/yldio/styled-is

于 2019-10-17T13:48:41.423 回答