反应情感样式不起作用，但正常的 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'