选中标签内的输入时如何设置标签样式？

Question

正确here我有一段代码，我在检查输入时更改标签的背景，但标签就在输入之后，如下例所示。

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

您不能像 styled-components 一样在 css 中使用 bubbling stage。但是你可以从 input 获取事件，然后传入 styled-component。 example

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

选中标签内的输入时如何设置标签样式？

How to style a label when input inside it is checked?

checkbox

reactjs

styled-components