如何在React中点击时修改Base Web Button组件的样式？

你遇到的问题是因为$isSelected是Base Web中ToggleButton组件的专属状态属性，普通Button组件并不支持这个变量，所以通过它判断点击状态不会生效。根据你想要的效果，分两种情况解决：

情况1：需要切换式选中状态（点击后保持样式） #

这种场景下需要自己用React状态来维护选中状态，通过点击事件切换状态值，再根据状态设置样式：

import { useState } from 'react';
import { Button } from 'baseui/button';

function MyButton() {
  const [isSelected, setIsSelected] = useState(false);

  return (
    <Button
      kind="secondary"
      size="compact"
      shape="pill"
      onClick={() => setIsSelected(!isSelected)}
      overrides={{
        BaseButton: {
          style: () => ({
            color: isSelected ? 'white' : 'black',
            backgroundColor: isSelected ? 'black' : 'white',
            transition: 'all 0.2s ease', // 可选：添加过渡动画让样式变化更平滑
          }),
        },
      }}
    >
      Hello
    </Button>
  );
}

情况2：仅需要点击按下时的瞬时样式 #

如果只需要按下按钮时变色、松开恢复，直接用Button组件内置的$active状态属性即可，无需额外维护state：

import { Button } from 'baseui/button';

function MyButton() {
  return (
    <Button
      kind="secondary"
      size="compact"
      shape="pill"
      overrides={{
        BaseButton: {
          style: ({ $active }) => ({
            color: $active ? 'white' : 'black',
            backgroundColor: $active ? 'black' : 'white',
          }),
        },
      }}
    >
      Hello
    </Button>
  );
}

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