Question

我有以下代码

    <span className="item-toggle" onClick={toggleChecked}>
      <Checkbox toggle checked={checked} data-togglecolor={toggleColor}/>
    </span>

呈现为

<span class="item-toggle">
  <div class="ui checked fitted toggle checkbox" data-togglecolor="#9cd3dd">
    <input class="hidden" readonly="" tabindex="0" type="checkbox" value="" checked="">
    <label></label>
  </div>
</span>

复选框组件是Semantic UI React的一部分。我想使用 data-togglecolor 的值来设置输入的样式：

.ui.toggle.checkbox input:checked ~ label:before {
    background-color: XXX;
}

我当然可以像下面在CSS中那样对其进行硬编码

.ui.toggle.checkbox[data-togglecolor="#9cd3dd"] input:checked ~ label:before {
    background-color: #9cd3dd;
}

但是我想知道如何动态地做到这一点。

谢谢！

Answer 1

除非使用了样式组件或相关组件，否则您将无法访问CSS文件中的道具，您可以做的就是在复选框中添加样式属性

<div class="ui checked fitted toggle checkbox" style={{backgroundColor: this.props.yourcolorprophere}}></div>

Answer 2

您使用样式化组件吗？如果是这样，您可以覆盖Checkbox组件以将背景色传递给其子级，如下所示：

const Checkbox = styled(ImportedCheckbox)`
 input {
  background-color: ${p => p['data-togglecolor']};
 }
`

React：根据父母的支持设置孩子的风格

2 个答案: