Question

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

当前，我正在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>
    );
}

我的问题是使用样式化组件的正确方法是什么？

是否可以插入任意样式（在此示例中为content.cls，但明天也可以设置自定义边框颜色）

Answer 1

使用样式化的组件you can have access to props传递给您的自定义样式化的组件。

因此，您可以创建不同的“主题”道具，然后传递给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

随意注入带有样式化组件的样式

1 个答案: