score:1

Accepted answer

you can't use the bubbling stage in css like also styled-components. but you can get event from input and then pass in 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>
  );
}

Related Query

More Query from same tag