如何根据React状态值为切换按钮设置差异化样式？

一、先定义选中状态的CSS样式 #

在你的index.css文件里添加一个用于标识选中状态的类：

.button-container button.active {
  text-decoration: underline;
  color: #1a1a1a; /* 替换成你需要的深色值 */
  /* 可额外添加字体加粗、下划线粗细等样式优化体验 */
}

二、修改按钮组件，动态绑定类名 #

在SpecialButton组件里，根据每个按钮的value状态，动态给按钮添加active类：

const SpecialButton = ({ buttons, handleButtonsChange }) => {
  return (
    <div className="button-container">
      {buttons.map((button, index) => (
        <button
          key={`${button.label}-${index}`}
          onClick={() => handleButtonsChange(button.label)}
          // 根据value判断是否添加选中类
          className={button.value ? 'active' : ''}
        >
          {button.label.toUpperCase()}
        </button>
      ))}
    </div>
  );
};

三、优化状态更新函数（可选，更简洁安全） #

原来的handleButtonsChange写法有点冗余，改成函数式更新更稳妥，避免依赖旧状态：

const handleButtonsChange = (label) => {
  setButtons(prevButtons => 
    prevButtons.map(btn => ({
      ...btn,
      value: btn.label === label
    }))
  );
};

修改后调用时直接传label即可，不用嵌套函数。

四、为什么:focus伪类满足不了需求？ #

:focus是元素获得焦点时的临时样式，比如点击按钮后焦点在按钮上时生效，但用户点击页面其他区域后，按钮失去焦点，样式就会消失，无法持续标识当前选中的组件状态。而通过state控制的类名，只要状态不变，样式就会一直保留，完全符合你要的UX标识需求。

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