React+Styled Components中，子元素状态变更时更新父元素样式的方法

现有一个包含按钮的自定义Label组件，代码示例如下：

<MyLabel htmlFor='xx' onClick={() => onChange}>
    <MyButton id='xx' {...rest} />
    Check it!
</MyLabel>

在浏览器开发者工具的Elements面板中，渲染后的DOM结构为：

<label for="xx">
    <button type="button" role="checkbox" aria-checked="false" data-state="unchecked" value="on" id="xx">
    </button>
    Check it!
</label>

组件的具体定义如下：

import styled from 'styled-components';
import * as Checkbox from '@radix-ui/react-checkbox';

export const StyledCheckboxRoot = styled(Checkbox.Root)`
  button {
    all: unset;
  }
  height: 2rem;
  width: 2rem;
`;

const MyLabel = styled.label`
  display: flex;
  width: 100%;
  & > button {
    margin-right: 1rem;
  }
`;

点击按钮时，按钮的aria-checked会在"false"和"true"间切换，data-state会在"unchecked"和"checked"间切换。现在需要实现：当按钮状态变化时，同步更新父元素<label>的样式。

方法1：利用CSS :has() 选择器（现代浏览器推荐） #

CSS的:has()选择器可直接选择包含特定子元素的父元素，刚好适配这个场景。修改MyLabel的样式定义，根据内部按钮的data-state状态调整样式：

const MyLabel = styled.label`
  display: flex;
  width: 100%;
  & > button {
    margin-right: 1rem;
  }

  /* 当内部按钮处于选中状态时，修改label样式 */
  &:has(> button[data-state="checked"]) {
    color: #2563eb; /* 示例：改变文字颜色 */
    font-weight: bold; /* 示例：加粗文字 */
    background-color: #eff6ff; /* 示例：添加背景色 */
  }
`;

注意：:has()选择器目前已被主流现代浏览器支持（Chrome 105+、Firefox 121+、Safari 15.4+），无需兼容旧版浏览器时，这是最简洁的方案。

方法2：状态提升 + Styled Components Props 控制 #

如果需要兼容不支持:has()的旧浏览器，可以将Radix UI Checkbox的状态提升到父组件，再将状态作为props传递给MyLabel，动态调整样式：

1. 在父组件中管理Checkbox状态：

import { useState } from 'react';
import { StyledCheckboxRoot as MyButton } from './your-components';
import MyLabel from './your-components';

function ParentComponent() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <MyLabel isChecked={isChecked} htmlFor='xx'>
      <MyButton 
        id='xx' 
        checked={isChecked} 
        onCheckedChange={setIsChecked}
      />
      Check it!
    </MyLabel>
  );
}

2. 修改MyLabel的样式定义，接收isChecked props：

const MyLabel = styled.label`
  display: flex;
  width: 100%;
  & > button {
    margin-right: 1rem;
  }

  /* 根据props中的isChecked状态调整样式 */
  ${props => props.isChecked && `
    color: #2563eb;
    font-weight: bold;
    background-color: #eff6ff;
  `}
`;

方法3：使用Radix UI原生组件组合（推荐） #

Radix UI的Checkbox组件本身提供了Checkbox.Label组件，更符合语义化设计规范，直接使用它可更方便地关联状态控制样式：

import styled from 'styled-components';
import * as Checkbox from '@radix-ui/react-checkbox';

export const StyledCheckboxRoot = styled(Checkbox.Root)`
  all: unset;
  height: 2rem;
  width: 2rem;
`;

const StyledCheckboxLabel = styled(Checkbox.Label)`
  display: flex;
  width: 100%;
  margin-left: 1rem;

  /* 关联Checkbox的选中状态 */
  ${Checkbox.Root}:checked + & {
    color: #2563eb;
    font-weight: bold;
  }
`;

// 使用方式
function MyCheckbox() {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <StyledCheckboxRoot id="xx" />
      <StyledCheckboxLabel htmlFor="xx">Check it!</StyledCheckboxLabel>
    </div>
  );
}

这种方式贴合Radix UI的设计思路，避免自定义组件的关联问题，同时能更直观地通过组件状态控制样式。

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