React设置checkbox的checked属性后::before伪元素样式失效如何解决？

云原生阿岚

2026-10-6

根因分析

你给checkbox绑定了受控属性checked，但onChange回调themeChangeHandler中没有同步更新checked状态，导致checked值始终停留在初始值，dom层面的checkbox勾选状态不会变化，:checked伪类自然无法触发。
现有useEffect将checked设为依赖项，又在回调内部调用setChecked，会触发无限重渲染，逻辑完全混乱。

修复步骤

1. 修正change事件逻辑

直接通过事件对象拿到最新的勾选状态，同步更新checked状态与主题：

const themeChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
  const newChecked = e.target.checked
  setChecked(newChecked)
  const newTheme = newChecked ? 'theme-light' : 'theme-dark'
  setTheme(newTheme)
}

2. 调整useEffect逻辑

将useEffect的依赖项改为空数组，仅在组件挂载时执行一次初始主题读取逻辑，避免无限循环：

useEffect(() => {                
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme === 'theme-dark') {
    setTheme('theme-dark');
    setChecked(false);
  } else {
    setTheme('theme-light');
    setChecked(true);
  }
}, []);

3. 确认样式选择器有效性

确保:checked伪类是绑定在checkbox对应的类名上，示例如下：

.Theme-Switcher-Util:checked + .Theme-Switcher-Slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
  background-repeat: no-repeat;
  background-position: center;
}