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

时间:2019-10-17 13:39:56

标签: reactjs typescript styled-components react-tsx

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

当前,我正在cls成员中注入样式(在此示例中,例如wide-inputnarrow-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,但明天也可以设置自定义边框颜色)

1 个答案:

答案 0 :(得分:0)

使用样式化的组件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