javascript - 反应情感样式不起作用，但正常的 CSS 对输入和标签样式工作正常

Question

除了我尝试过许多不同方式的这件作品外，一切都在工作......

    const HiddenInput = styled.input`
    display: none;
    &:checked + CheckboxLabel: {
        background-color: #866dce;
    },
`

检查应该改变颜色，但它不会。我也尝试使用 .checkbox-label where classname='checkbox-label" 但没有运气

这是相关的代码...

const CheckboxLabel = styled.label`
    background-color: rgb(211, 106, 106);
    cursor: pointer;
    font-size: 20;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-right: 10px;
    padding: 5px;
    border-radius: 5px;
`
const HiddenInput = styled.input`
    display: none;
    &:checked + .checkbox-label: {
        background-color: #866dce;
    }
`

<HiddenInput type="checkbox" id={"toggle"+index} onChange={() => handleChecked(item)} key={"input" + index} />
<CheckboxLabel htmlFor={"toggle"+index} className="checkbox-label" key={"label" + index}>{item}</CheckboxLabel><br />

Answer 1

你需要用${}. 还有一个 scss 语法错误，您必须:从选择元素的前面删除：

    const HiddenInput = styled.input`
      display: none;
      &:checked + ${CheckboxLabel} {
        background-color: #866dce;
      },
`

注意：您可以使用默认包含在 create-react-app 中的 babel-macro

import styled from '@emotion/styled/macro'