基于状态而不是道具的样式

Question

我想基于它的状态（而不是道具）来设置组件的样式，这会随着点击而改变。

然而，我没有看到任何方法这样做，如果没有将状态拉到包装器并将状态传递给道具。这似乎是不必要的。有没有办法使用样式组件访问状态？

我想做这样的事情：

const styledDiv = styled.div`
  background-color: ${(state) => state.x};
`

Answer 1

库的开发人员推荐的解决方案是提升状态。我必须同意。

Answer 2

最好的做法是将您的状态作为道具传递给styled-component。像这样...

JS

return (
  <div>
    <StyledDiv customPropName={this.state.x}>example text</StyledDiv>
  </div>
);

样式组件

const StyledDiv = styled.div`
  background-color: ${(props) => props.x};
`