[英]React Emotion Styled Component: Class selector not working
我正在使用情感样式组件在 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
我认为问题出在这个选择器上
&: checked + .fill: {
background: theme.colors.Blue,
},
因为 Input 和.fill 不在同一层。 我已经为它做了一个简单的演示,请查看https://codepen.io/doichithhe/pen/bGEQwLJ
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.