reactjs - 如何在 Box 模型中创建带有样式组件的切换器？

Question

我想创建切换器以与样式化组件做出反应。当我单击切换器时，它不会关闭或打开切换器。切换器已创建，但即使我在代码中使用检查作为伪元素它也不是活动的。我的代码在这里

import React from 'react'
import Box from 'app/components/Box'
import css from '@styled-system/css'

export const FeatureFlagPage = () => {


  return (
    <Box position='relative'>
      <Box
        as='input'
        id='checkbox'
        typeof='checkbox'
        opacity='0'
        zIndex={1}
        borderRadius={15}
        width={42}
        height={26}
        css={css({
          '::checked': {
            backGround: '#4fbe79',
            '::after': {
              content: '""',
              display: 'block',
              borderRadius: '50%',
              width: '18px',
              height: '18px',
              marginLeft: '21px',
              transition: '0.2s',
            },
          },
        })} 
      />

      <Box
        as='label'
        position='absolute'
        top='0'
        left='0'
        width='42px'
        height='26px'
        borderRadius='15px'
        backgroundColor='#bebebe'
        cursor='pointer'
        css={css({
          '::after': {
            content: '""',
            display: 'block',
            borderRadius: '50%',
            width: '18px',
            height: '18px',
            margin: '3px',
            backGround: '#ffffff',
            boxShadow: '1px 3px 3px 1px rgba(0, 0, 0, 0.2)',
            transition: '0.2s',
          },
        })}
      />
    </Box>
  )
}

实际上我无法解决如何在我的伪元素被称为检查后使用+来制作这样的代码。

  &:checked + ${CheckBoxLabel} {
    background: #4fbe79;
    &::after {
      content: "";
      display: block;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      margin-left: 21px;
      transition: 0.2s;
    }
  }

标签： reactjsstyled-components