代码之家 › 专栏 › 技术社区 › Thomas

基于状态而非道具的造型

styled-components

Thomas · 技术社区 · 8 年前

我想根据组件的状态(而不是道具)设置组件的样式,该状态会随着单击而改变。

然而,如果不将状态向上拉到包装器中,并将状态向下传递给道具,我看不到任何方法可以做到这一点。这似乎是不必要的。样式化组件有一种访问方式吗?

我想这样做:

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

2 回复 | 直到 8 年前

Thomas 8 年前

该库开发人员推荐的解决方案是将状态向上拉。我不得不同意。

Chance Smith 8 年前

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

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

样式化组件

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

推荐文章

Omphile James · 如何将此CSS代码转换为样式化组件?

4 年前

Taylor Austin · 样式化JSX变量不工作

8 年前

visarts · 无法单元测试覆盖材质ui的样式化组件

8 年前

Roy Prins · 彩色标签的样式化组件

8 年前

Strahinja Ajvaz · 对象解构引发错误

8 年前

Jayce444 · React JSS hover函数值

8 年前

James · 使用已设置样式的组件设置材质UI抽屉组件的样式

8 年前

tony_k · 在样式化组件中共享样式的惯用方法?

8 年前

Elcoosp · 生成样式化组件关键帧的函数是否昂贵?

8 年前

JoeTidee · 如何为React动态创建DOM目标。使用样式化组件创建门户?

8 年前