React中勾选checkbox为什么无法修改对应div元素的颜色样式？

你使用的CSS通用兄弟选择器~仅支持匹配同一父节点下、位于选择器主体后方的同级元素。你当前的DOM结构里.OK类的div写在checkbox输入框前面，无法被#MainPage-checkbox-menu:checked ~ .OK这个选择器匹配，因此样式不生效。

方案1：调整DOM顺序（纯CSS实现） #

把checkbox和对应的label移到div前方即可匹配原选择器，修改后的React代码如下：

<input type="checkbox" id={"MainPage-checkbox-menu"} />
<label htmlFor={"MainPage-checkbox-menu"}></label>
<div className={"OK"}>OK</div>

原有CSS无需修改即可生效。如果需要保持原来的视觉展示顺序，可给父级元素添加display: flex，再通过order属性调整各元素的展示优先级即可。

方案2：通过React状态动态绑定样式 #

如果不想改动DOM结构，可以直接通过React状态控制类名切换，实现同样效果：

import { useState } from 'react';

function App() {
  // 定义checkbox选中状态
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div>
      {/* 动态绑定类名 */}
      <div className={isChecked ? "OK checked" : "OK"}>OK</div>
      <input 
        type="checkbox" 
        id="MainPage-checkbox-menu"
        checked={isChecked}
        onChange={(e) => setIsChecked(e.target.checked)}
      />
      <label htmlFor="MainPage-checkbox-menu"></label>
    </div>
  )
}

对应修改CSS如下：

.OK.checked {
  color: #8ef6ad;
}

内容的提问来源于stack exchange，提问作者Edgar