具有访问React组件状态的样式化组件？

实现此目标的最佳方法是将prop传递给您从中获得的元素

styled-comopnent

// outside of the componentinterface 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

这样做有助于提高代码的可读性，并遵循文档的建议。