如何样式标签输入时，它是检查?

Question

就在这里，我有一段代码，当输入被选中时，我改变了标签的背景，但是标签就在输入之后，如下面的例子所示。

const Label = styled.label`
background: red;
display: block;
padding: 1rem;
`;
const Input = styled.input`
&:checked + ${Label} {
background: blue;
}
`;
const App = () => (
<div>
<Input id="input" type="checkbox" />
<Label for="input" />
</div>
);

但是如果输入在标签内，怎么可能改变标签背景呢?如下例所示:

const App = () => (
<div>
<Label for="input" />
<Input id="input" type="checkbox" />
</Label>
</div>
);

Answer 1

你不能在css中像styled-components一样使用bubbling stage。但是你可以从input得到事件，然后传入styled-component。示例

import { useState } from "react";
import styled from "styled-components";
const Label = styled.label`
background: ${({ checked }) => (checked ? "blue" : "red")};
display: block;
padding: 1rem;
`;
const Input = styled.input`
/* &:checked + ${Label} {
background: blue;
} */
`;
export default function App() {
const [checked, setChecked] = useState(false);
const toggle = () => setChecked(!checked);
return (
<div className="App">
<Label for="input" checked={checked}>
<Input id="input" type="checkbox" onChange={toggle} />
</Label>
</div>
);
}