React:根据父母的道具设置孩子的风格

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>

复选框组件是语义UI React的一部分。我想使用数据切换颜色的值来设置我的输入样式：

.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

您使用样式化组件吗？如果是这样，你可以覆盖复选框组件，将背景颜色传递给它的子项，就像这样：

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

Answer 2

除非你使用了类似样式组件或相关的东西，否则你无法访问CSS文件中的道具，你可以做的是在你的复选框中添加一个样式属性

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