复选框不会在 JavaScript 复选框检查上应用样式表

Question

在选中 ::before{} 伪元素复选框时应用附加样式表的解决方案是什么？一旦我提供了 checked={checked} 属性，附加的样式表就可以工作了

export const ThemeSwithcer: FC = () => {
    const [checked, setChecked] = useState(false);

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

    const setTheme = (themeName: string) => {
        localStorage.setItem('theme', themeName);
        document.documentElement.className = themeName;
    }

    const themeChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTheme('theme-light');
        } else {
            setTheme('theme-dark');
        }
    }

    return (
        <label className="Theme-Switcher">
            <input className="Theme-Switcher-Util" type="checkbox" onChange={themeChangeHandler} checked={checked} />
            <span className="Theme-Switcher-Slider round"></span>
        </label>
    );
}

&: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;
}

Answer 1

TL;DR

• CSS：https://codesandbox.io/s/adoring-cartwright-mvwei?file=/src/styles.css
• SCSS：https://codesandbox.io/s/react-and-scss-forked-oprzc?file=/src/styles.scss

另外，你必须删除：

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

并且可以在这张图片中看到它是如何工作的：https://im5.ezgif.com/tmp/ezgif-5-f94608df776f.gif

说明

• 有了这个useEffect，你就可以重新设置check的值了。

不清楚是否要将样式应用于选中的元素或旁边的跨度。

所以，我为这两个示例创建了一个代码框，您可以查看：https://codesandbox.io/s/summer-brook-ktw08?file=/src/styles.css

但代码是：

在下一个代码中，您将看到一个示例：

1. 普通复选框的 CSS 选择器
2. 选中复选框的 CSS 选择器
3. 之前选中复选框的 CSS 选择器
4. 复选框之前的邻居的 CSS 选择器
5. 选中复选框之前的邻居的 CSS 选择器

前 3 条中的规则只是示例。最后 2 条中的规则是根据您的代码和特定需求显示月亮和太阳。

重要我想说您缺少的部分是之前元素修改中的content: ' '; display: inline-block。基本上，如果没有这 2 个属性，您将无法看到之前的内容，因为它的默认大小是 0x0。

/* 1. Checkbox */
.Theme-Switcher-Util {
  margin-right: 36px;
}

/* 2. Checked Element */
.Theme-Switcher-Util:checked {
  margin-right: 36px;
}

/* 3. Before of the Checked Element */
.Theme-Switcher-Util:checked::before {
  content: ' ';
  display: inline-block;
  background: rgba(255, 0, 0, .5);
  width: 50px;
  height: 10px;
}

/* 4. Before of the Slider after the NOT Checked Element */
.Theme-Switcher-Util + .Theme-Switcher-Slider::before {
  content: ' ';
  display: inline-block;
  height: 24px;
  width: 24px;
  background: white url('https://i.pinimg.com/564x/cc/d4/46/ccd4469667ba2915b82d48e28700843a.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 5. Before of the Slider after the Checked Element */
.Theme-Switcher-Util:checked + .Theme-Switcher-Slider::before {
  content: ' ';
  display: inline-block;
  height: 24px;
  width: 24px;
  background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
  background-repeat: no-repeat;
  background-position: center;
}