React Emotion Styled 組件：Class 選擇器不工作

Question

我正在使用情感樣式組件在 React 中創建一個單選按鈕。 由於我們將組件導出到在線組件庫 (Bit.dev)，我無法使用目標樣式組件選擇器，而必須使用類名。 我以相同的方式構建了一個開關，並使用 class 選擇器在選中開關（輸入）時更改另一個組件的 CSS。 但是，當我的切換更改為“選中”時，class 選擇器不起作用：

這是我的代碼：

import React from "react";
import PropTypes from "prop-types";

import { Container, Input, Label, Outline, Fill } from "./styles";

const RadioButton = ({ id, ...props }) => {
  return (
    <Container>
      <Input id={id} type="radio" {...props} />
      <Label htmlFor={id}>
        <Outline className="outline">
          <Fill className="fill" />
        </Outline>
      </Label>
    </Container>
  );
};

RadioButton.propTypes = {
  id: PropTypes.string.isRequired,
};

export default RadioButton;

和 styles：

import styled from "@emotion/styled";

export const Container = styled.div(() => ({}));

export const Label = styled.label(() => ({
  cursor: "pointer",
}));

export const Outline = styled.span(({ theme }) => ({
  border: `3px solid ${theme.colors.Blue}`,
  width: "24px",
  height: "24px",
  borderRadius: "100%",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
}));

export const Fill = styled.span(({ theme }) => ({
  width: "14px",
  height: "14px",
  margin: "auto",
  borderRadius: "50%",
  background: "red",
}));

export const Input = styled.input(({ theme }) => ({
  opacity: 0,
  position: "absolute",
  "&: checked + .fill": {
    background: theme.colors.Blue,
  },
}));

如您所見，當輸入更改為“已選中”時，填充跨度的背景應該會發生變化，但事實並非如此。

Emotion Styled組件： https://emotion.sh/docs/styled

Answer 1

我認為問題出在這個選擇器上

&: checked + .fill: {
   background: theme.colors.Blue,
},

因為 Input 和.fill 不在同一層。 我已經為它做了一個簡單的演示，請查看https://codepen.io/doichithhe/pen/bGEQwLJ