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

Question

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

但是，如果不将状态向上拉到包装器并将状态向下传递给道具，我看不出有什么方法可以做到这一点。这似乎是不必要的。有没有办法使用样式组件访问状态？

我想做这样的事情：

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

Answer 1

库的开发者推荐的解决方案是把state拉上来。我必须同意。

Answer 2

最好的办法是将您的状态作为道具传递到样式化组件中。像这样...

JS

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

样式组件

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

Styling based on state instead of props