Javascript 使用伪元素的样式化组件：选中

我正在用样式化的组件制作切换组件，当它切换时，我想改变背景颜色。在这里，我试图选择并更改它${SwitchInputUI}:checked+${SwitchSliderUI}{background color:737A9B；}，但它不起作用。我选对了吗？这是完整的代码，请帮帮我

import React from 'react';
import styled from 'styled-components'

const SwitchInputUI = styled.input.attrs({ type: 'checkbox' })`
    opacity: 0;


`
const SwitchUI =styled.label`
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-bottom: 0;
    vertical-align: middle;
    ${SwitchInputUI}:checked + ${SwitchSliderUI}{ 
        background-color: #737A9B; 
    }
     ${SwitchInputUI}:checked + ${SwitchSliderUI}:before{
        transform: translateX(10px);
    }

`

const SwitchSliderUI= styled.span`
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#BBCDD9;
    transition: .4s;
    border-radius: 10px;

    &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        left: 1px;
        bottom: 1px;
        background-color: #FFF;
        transition: .4s;
        border-radius: 50%;
    }
`

const Switch = () => {
  return (
      <SwitchUI> 
          <SwitchInputUI/>
          <SwitchSliderUI/>
      </SwitchUI>
  );
};
export default Switch;

如果有帮助，请尝试：

${SwitchInputUI} + ${SwitchSliderUI}{ 
    '&:checked':{background-color: #737A9B; }
}

如果有帮助，请尝试：

${SwitchInputUI} + ${SwitchSliderUI}{ 
    '&:checked':{background-color: #737A9B; }
}

---

问题是，在定义SwitchUI之前，您正在SwitchUI中使用SwitchSliderUI。改变顺序，它就会工作

import React from 'react';
import styled from 'styled-components'

const SwitchInputUI = styled.input.attrs({ type: 'checkbox' })`
    opacity: 0;
`

const SwitchSliderUI= styled.span`
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#BBCDD9;
    transition: .4s;
    border-radius: 10px;

    &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        left: 1px;
        bottom: 1px;
        background-color: #FFF;
        transition: .4s;
        border-radius: 50%;
    }
`
const SwitchUI =styled.label`
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-bottom: 0;
    vertical-align: middle;
    ${SwitchInputUI}:checked + ${SwitchSliderUI}{ 
        background-color: #737A9B; 
    }
     ${SwitchInputUI}:checked + ${SwitchSliderUI}:before{
        transform: translateX(10px);
    }
`

const Switch = () => {
  return (
      <SwitchUI> 
          <SwitchInputUI/>
          <SwitchSliderUI/>
      </SwitchUI>
  );
};
export default Switch;

---

这里的工作沙盒：

问题是，在定义SwitchUI之前，您正在SwitchUI中使用SwitchSlideUI。改变顺序，它就会工作

import React from 'react';
import styled from 'styled-components'

const SwitchInputUI = styled.input.attrs({ type: 'checkbox' })`
    opacity: 0;
`

const SwitchSliderUI= styled.span`
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#BBCDD9;
    transition: .4s;
    border-radius: 10px;

    &:before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        left: 1px;
        bottom: 1px;
        background-color: #FFF;
        transition: .4s;
        border-radius: 50%;
    }
`
const SwitchUI =styled.label`
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
    margin-bottom: 0;
    vertical-align: middle;
    ${SwitchInputUI}:checked + ${SwitchSliderUI}{ 
        background-color: #737A9B; 
    }
     ${SwitchInputUI}:checked + ${SwitchSliderUI}:before{
        transform: translateX(10px);
    }
`

const Switch = () => {
  return (
      <SwitchUI> 
          <SwitchInputUI/>
          <SwitchSliderUI/>
      </SwitchUI>
  );
};
export default Switch;

---

这里的工作沙箱：

或者修改它，事情是你像在我的示例中一样将checked应用到object内部的元素，或者修改它，事情是你像在我的示例中一样将checked应用到object内部的元素