react动态改变css的伪元素样式

情景：需要动态改变checkbox的选中的复选框的背景色，颜色由用户任意从选色盘选取

解决：

react里的代码

<input type="checkbox" value={option.value} style={{ '--bgColor': optionColor }} />

less里的代码

input[type='checkbox']:checked {
   background: var(--bgColor);
}