如何使用styled-components为内部包含选中input的label设置样式

你可以通过两种方案实现该效果，适配不同兼容需求：

方案1：使用CSS :has() 伪类（无额外JS，推荐现代浏览器使用） #

这是最简洁的实现方式，直接在Label的样式规则中匹配「内部包含选中状态Input」的场景即可，无需修改Input逻辑，也不需要额外状态管理。

注意：你给出的嵌套代码示例存在两处笔误：一是Label开头写为自闭合标签，实际需要包裹Input要改为普通开标签；二是React框架下label的for属性需要写成htmlFor才会生效。

const Input = styled.input`
  // 无需额外写选中相关样式
`;

const Label = styled.label`
  background: red;
  display: block;
  padding: 1rem;

  // 匹配内部Input为选中状态的Label元素
  &:has(${Input}:checked) {
    background: blue;
  }
`;

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

方案2：使用React状态联动（兼容所有浏览器） #

如果需要兼容不支持:has()伪类的老旧浏览器，可以通过受控组件绑定选中状态，将状态传递给Label控制样式即可：

import { useState } from 'react';

// 接收临时props控制背景色，$前缀是styled-components约定，避免该属性被传递到原生DOM上
const Label = styled.label`
  background: ${props => props.$isChecked ? 'blue' : 'red'};
  display: block;
  padding: 1rem;
`;

const Input = styled.input``;

const App = () => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <div>
      <Label $isChecked={isChecked} htmlFor="input">
        <Input 
          id="input" 
          type="checkbox"
          checked={isChecked}
          onChange={(e) => setIsChecked(e.target.checked)}
        />
      </Label>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者MestreALMO