我如何获取样式化的组件,以根据渲染该组件的React组件的状态来呈现不同的CSS规则?
以下内容无效:
class Container extends React.Component<ContainerProps, ContainerState> {
constructor(props: ContainerProps) {
super(props);
this.state = {
highlight: true,
dark: false
};
}
OuterWrapper = styled.div`
display: inline-block;
padding: 20px;
${this.state.dark && `
background-color: 'gray';
`};
`;
return (
<this.OuterWrapper>
...
</this.OuterWrapper>
);
}
TypeError:无法读取未定义的属性“ dark” 在新的容器上
答案 0 :(得分:1)
实现这一目标的最佳方法是将一个prop传递给您从styled-comopnent
获得的元素。
// outside of the component
interface OuterWrapperProps {
dark: boolean;
}
const OuterWrapper = styled.div<OuterWrapperProps>`
display: inline-block;
padding: 20px;
${props => props.dark && css`
background-color: 'gray';
`};
`;
当您渲染该元素时:
...
<OuterWrapper dark={this.state.dark}> ... </OuterWrapper>
...
您仍然可以通过state
来控制主题!
这样做有助于提高代码的可读性,并遵循文档的建议。