如何修改多次重复的首个Checkbox组件样式及点击按钮切换其样式

问题1：修改多次重复渲染组件的首个样式 #

有两种实用方案，可根据场景选择：

方案一：CSS选择器实现 #

给父容器和组件根元素添加类名，利用CSS伪类直接选中首个组件：

1. 父组件结构（添加容器类名）：

<div className="checkbox-group">
  <Checkbox />
  <Checkbox />
  <Checkbox />
  {/* 更多组件 */}
</div>

2. Checkbox组件内部（添加统一类名）：

function Checkbox() {
  return (
    <div className="checkbox-item">
      {/* 组件内容 */}
    </div>
  );
}

3. CSS样式：

.checkbox-group .checkbox-item:first-child {
  /* 自定义首个组件样式 */
  border: 2px solid #ef4444;
  background-color: #fef2f2;
}

方案二：通过Props传递标识 #

如果需要动态切换首个组件的样式状态，可通过props给目标组件标记特殊状态：

1. 父组件传递标识：

<div>
  <Checkbox isFirstItem={true} />
  <Checkbox />
  <Checkbox />
  {/* 更多组件 */}
</div>

2. Checkbox组件根据props应用样式：

function Checkbox({ isFirstItem = false }) {
  const itemClass = isFirstItem ? 'checkbox-item first-item' : 'checkbox-item';
  return (
    <div className={itemClass}>
      {/* 组件内容 */}
    </div>
  );
}

3. CSS样式：

.first-item {
  /* 自定义样式 */
  font-weight: bold;
  color: #dc2626;
}

问题2：点击组件内按钮修改首个Checkbox的样式 #

采用父组件状态控制+props传递的方式实现，避免直接操作DOM：

代码示例： #

父组件：

import { useState } from 'react';

function Parent() {
  // 状态：标记首个组件是否启用特殊样式
  const [isFirstHighlighted, setIsFirstHighlighted] = useState(false);

  // 按钮点击回调：切换首个组件的样式状态
  const handleButtonClick = () => {
    setIsFirstHighlighted(prev => !prev);
  };

  return (
    <div className="checkbox-group">
      {/* 首个组件接收状态props */}
      <Checkbox 
        isHighlighted={isFirstHighlighted}
        onBtnClick={handleButtonClick}
      />
      {/* 其他组件只传递点击回调 */}
      <Checkbox onBtnClick={handleButtonClick} />
      <Checkbox onBtnClick={handleButtonClick} />
      {/* 更多组件 */}
    </div>
  );
}

Checkbox组件：

function Checkbox({ isHighlighted = false, onBtnClick }) {
  const itemClass = isHighlighted 
    ? 'checkbox-item highlighted' 
    : 'checkbox-item';

  return (
    <div className={itemClass}>
      {/* 组件原有内容，比如复选框 */}
      <input type="checkbox" />
      {/* 点击触发父组件回调 */}
      <button onClick={onBtnClick}>修改首个样式</button>
    </div>
  );
}

对应CSS：

.highlighted {
  border: 2px solid #3b82f6;
  padding: 6px;
  border-radius: 4px;
  background-color: #eff6ff;
}

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