如何在React的Styled Components中实现单选组样式及修复点击失效问题

我有一段实现单选组效果的HTML/CSS代码：

.radios .radio{
    background-color:#c5e043;
    display:inline-block;
    width:20px;
    height:20px;
    cursor:pointer
}

.radios input[type=radio]{
    display:none
}

.radios input[type=radio]:checked + .radio{
    background-color:#241009
}

<div class="radios">
<div>
    <input type="radio" name="rGroup"  id="r1"  />
    <label class="radio" for="r1"></label>
    <input type="radio" name="rGroup"  id="r2" />
    <label class="radio" for="r2"></label>
    <input type="radio" name="rGroup"  id="r3" />
    <label class="radio" for="r3"></label></div>
</div>

我想在React中用Styled Components实现相同效果，但不知道怎么写input[type=radio]和.radios input[type=radio]:checked + .radio这类选择器。我写了一段代码，元素能正常显示，但点击后无法切换选中状态，请问要修改哪些内容？

我的代码：

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

export const XSelectionBoxContainer = styled.div`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xlabel = styled.label`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

export const Xinput = styled.input`
  display: none;
  :checked {
    background-color: #241009;
  }
`;

function App() {
  const options = [
    {
      label: "first",
      value: "first",
      name: "radio-group"
    },
    {
      label: "second",
      value: "second",
      name: "radio-group"
    },
    {
      label: "third",
      value: "third",
      name: "radio-group"
    }
  ];
  return (
    <XSelectionBoxContainer>
      {options.map((option) => {
        return (
          <div key={option.label}>
            <Xlabel htmlFor={option.value}></Xlabel>
            <Xinput
              type="radio"
              name={option.value}
              value="1"
              id={option.value}
            />
          </div>
        );
      })}
    </XSelectionBoxContainer>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

你的代码存在三个核心问题，修改后就能实现预期效果：

1. 单选组的name属性错误 #

单选按钮需要共享同一个name值才能实现互斥选中，你现在给每个Xinput的name设为option.value，导致每个按钮都是独立的组，无法互斥。应该统一用option.name作为name属性值。

2. Input和Label的顺序颠倒，且相邻兄弟选择器未正确使用 #

原CSS中用了input:checked + .radio，即选中的input后面紧跟的label会变色。但你现在把Xlabel放在了Xinput前面，选择器无法生效。同时在Styled Components中，需要通过父容器来关联input和label的样式逻辑。

3. 选中状态的样式目标错误 #

你给Xinput的:checked状态加背景色，但input是隐藏的，应该把样式应用到对应的Xlabel上。

修改后的完整代码 #

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

// 外层容器，仅用于布局，移除错误的单选框样式
export const XSelectionBoxContainer = styled.div`
  display: flex;
  gap: 8px; // 可选，给单选框之间加间距
`;

// 单个单选项的容器，在这里实现选中关联样式
export const RadioItem = styled.div`
  input:checked + label {
    background-color: #241009;
  }
`;

export const XLabel = styled.label`
  background-color: #c5e043;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
`;

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

function App() {
  const options = [
    {
      label: "first",
      value: "first",
      name: "radio-group"
    },
    {
      label: "second",
      value: "second",
      name: "radio-group"
    },
    {
      label: "third",
      value: "third",
      name: "radio-group"
    }
  ];
  
  return (
    <XSelectionBoxContainer>
      {options.map((option) => {
        return (
          <RadioItem key={option.label}>
            {/* 把input放在label前面，让相邻选择器生效 */}
            <XInput
              type="radio"
              name={option.name} // 统一name值，实现单选组互斥
              value={option.value}
              id={option.value}
            />
            <XLabel htmlFor={option.value}></XLabel>
          </RadioItem>
        );
      })}
    </XSelectionBoxContainer>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

关键修改说明 #

• 新增RadioItem组件作为每个单选按钮的容器，在它的样式里写input:checked + label，利用CSS相邻兄弟选择器关联选中状态和label样式。
• 调整XInput和XLabel的顺序，让input在label前面，确保选择器能匹配到目标元素。
• 修正XInput的name属性为option.name，保证所有单选按钮属于同一组，实现互斥选中。
• 移除XSelectionBoxContainer上错误的背景和尺寸样式，把这些样式放到XLabel上，和原CSS逻辑保持一致。

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