我正在用各种控件填充网格(在此示例中:上下计数器和文本框)。
当前,我正在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
,但明天也可以设置自定义边框颜色)
答案 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