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

React 情感样式不起作用但正常 css 对于输入和标签样式工作正常

React emotion styled not working but normal css was working fine for input and label styles

javascript

css

styles

reactjs

emotion-js