Javascript React-emotion样式不起作用，但对于输入和标签样式，普通css工作正常

除了这件我用了很多不同的方法试过的作品外，一切都很好

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

复选框应该会改变颜色，但不会改变。我还尝试在classname='checkbox-label'中使用.checkbox标签，但没有成功

这是相关代码

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 />

const CheckboxLabel=styled.label`
背景色：rgb（211、106、106）；
光标：指针；
字号:20 ;；
文本对齐：居中；
显示器：flex；
证明内容：中心；
右边距：10px；
填充物：5px；
边界半径：5px；
`
const HiddenInput=styled.input`
显示：无；
&：选中+。复选框标签：{
背景色：#866dce；
}
`
handleChecked（item）}键={“输入”+索引}/>
{item}

您需要用

${}

包装组件。此外还有一个scss语法错误，您必须从选择元素的前面删除

：

：

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

注意：您可以使用默认包含在CreateReact应用程序中的babel宏

import styled from '@emotion/styled/macro'

---

我尝试了这个方法，但我得到了这个错误…未捕获错误：组件选择器只能与babel插件情感一起使用。我想这是用于不同的导入。我的导入样式来自'@emotion/styled'@JustinOberte，我想您缺少依赖项。但是如果您更新到版本8，它应该可以正常工作调用插件，但我仍然收到相同的错误“依赖项”：“{@emotion/core”：“^10.1.1”，“@emotion/styled”：“^10.0.27”，“@testing library/jest dom”：“^5.11.5”，“@testing library/react”：“^11.1.0”，“@testing library/user event”：“^12.1.10”，“axios”：“^0.21.1”，“plotly.js”：“^1.58.4”，“react”：“^17.0.1”“，“react-dom”：“^17.0.1”，“react-plotly.js”：“^2.5.1”，“react-router-dom”：“^5.2.0”，“react-scripts”：“4.0.0”，“web重要信息”：“^0.2.4”，