我有以下代码
<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;
}
但是我想知道如何动态地做到这一点。
谢谢!
答案 0 :(得分:0)
除非使用了样式组件或相关组件,否则您将无法访问CSS文件中的道具,您可以做的就是在复选框中添加样式属性
<div class="ui checked fitted toggle checkbox" style={{backgroundColor: this.props.yourcolorprophere}}></div>
答案 1 :(得分:0)
您使用样式化组件吗? 如果是这样,您可以覆盖Checkbox组件以将背景色传递给其子级,如下所示:
const Checkbox = styled(ImportedCheckbox)`
input {
background-color: ${p => p['data-togglecolor']};
}
`