React Emotion Styled 组件：Class 选择器不工作

Question

我正在使用情感样式组件在 React 中创建一个单选按钮。由于我们将组件导出到在线组件存储库 (Bit.dev)，我无法使用目标样式组件选择器而必须使用 class 名称。我以相同的方式构建了一个开关，并使用 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;

和样式：

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,
  },
}));

如您所见，当输入更改为“已选中”时，填充跨度的背景应该会发生变化，但实际上并没有。

情感风格组件： https://emotion.sh/docs/styled

Answer 1

我认为问题出在这个选择器上

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

因为Input和.fill不在同一层。我已经为它做了一个简单的演示，请查看 https://codepen.io/doichithhe/pen/bGEQwLJ

React Emotion Styled 组件：Class 选择器不工作

React Emotion Styled Component: Class selector not working

javascript

css

emotion

reactjs