如何通过styled-components根据单选框状态设置Dot组件样式？

你的核心问题在于原生CSS的选择器路径和当前组件DOM结构不匹配：原生CSS里单选框和<span>是兄弟关系，能用~兄弟选择器，但现在RadioInput和Category是同级，Dot嵌套在Category内部的AccTypeLabel里，原来的选择器找不到目标元素。下面提供两种可行方案：

方案一：调整DOM结构（推荐，语义化更优） #

把RadioInput放到对应的AccTypeLabel内部，让它和Dot成为相邻元素，这样可以用styled-components的插值选择器实现样式联动。

修改后的组件结构 #

<div className="acc__type">
  <Category>
    <AccTypeLabel>
      <RadioInput type="radio" name="accType" id="dot-1" required />
      <Dot />
      <AccTypeTitle>Student</AccTypeTitle>
    </AccTypeLabel>
    <AccTypeLabel>
      <RadioInput type="radio" name="accType" id="dot-2" required />
      <Dot />
      <AccTypeTitle>Staff</AccTypeTitle>
    </AccTypeLabel>
  </Category>
</div>

对应的styled-components代码 #

import styled from 'styled-components';

export const RadioInput = styled.input`
    display: none;
`;

export const Category = styled.div`
    display: flex;
    width: 80%;
    margin: 15px 0;
    justify-content: space-between;
`;

export const AccTypeLabel = styled.label`
    display: flex;
    align-items: center;
    cursor: pointer; // 增加点击反馈，提升交互体验
`;

export const AccTypeTitle = styled.div`
    font-size: 20px;
    font-weight: 500;
`;

export const Dot = styled.span`
    height: 18px;
    width: 18px;
    background: #d9d9d9;
    border-radius: 50%;
    margin: 10px;
    border: 5px solid transparent;
    transition: all 0.3s ease;

    // 利用styled-components插值，选中相邻的已勾选RadioInput对应的Dot
    ${RadioInput}:checked + & {
        border-color: #d9d9d9;
        background: #9b59b6;
    }
`;

方案二：不改动原有DOM结构 #

如果不想调整现有组件层级，可以通过兄弟选择器+后代选择器的组合，从RadioInput定位到嵌套的Dot。

修改后的styled-components代码 #

import styled from 'styled-components';

export const RadioInput = styled.input`
    display: none;

    // 当当前RadioInput被选中时，找到同级Category中对应for属性的Label下的Dot
    &:checked ~ ${Category} ${AccTypeLabel}[for="${props => props.id}"] ${Dot} {
        border-color: #d9d9d9;
        background: #9b59b6;
    }
`;

export const Category = styled.div`
    display: flex;
    width: 80%;
    margin: 15px 0;
    justify-content: space-between;
`;

export const AccTypeLabel = styled.label`
    display: flex;
    align-items: center;
`;

export const AccTypeTitle = styled.div`
    font-size: 20px;
    font-weight: 500;
`;

export const Dot = styled.span`
    height: 18px;
    width: 18px;
    background: #d9d9d9;
    border-radius: 50%;
    margin: 10px;
    border: 5px solid transparent;
    transition: all 0.3s ease;
`;

注意点 #

组件中的RadioInput必须传递id属性，和AccTypeLabel的for属性对应：

<RadioInput type="radio" name="accType" id="dot-1" required />
<RadioInput type="radio" name="accType" id="dot-2" required />

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