无法根据启用/禁用状态更改按钮颜色（已解决）

纯CSS方案 #

直接利用CSS的:disabled伪类针对禁用状态设置样式，确保优先级覆盖默认样式即可：

/* 启用状态按钮样式 */
.custom-btn {
  color: #007bff; /* 自定义蓝色 */
  /* 可补充背景、边框等其他样式 */
}

/* 禁用状态按钮样式 */
.custom-btn:disabled {
  color: #6c757d; /* 灰色 */
  cursor: not-allowed; /* 鼠标显示禁止样式，增强视觉提示 */
  opacity: 0.65; /* 可选：降低透明度，强化禁用状态感知 */
}

对应HTML结构：

<button class="custom-btn" disabled>禁用按钮</button>
<button class="custom-btn">启用按钮</button>

React 实现方案 #

方式1：CSS伪类（推荐） #

和纯CSS逻辑一致，通过disabled属性控制按钮状态：

import './Button.css';

function CustomButton({ isDisabled }) {
  return (
    <button 
      className="custom-btn"
      disabled={isDisabled}
    >
      {isDisabled ? '已禁用' : '可点击'}
    </button>
  );
}

方式2：动态类名 #

如果需要更灵活的样式切换，可通过动态类名控制：

import './Button.css';

function CustomButton({ isDisabled }) {
  const btnClassName = isDisabled ? 'custom-btn disabled' : 'custom-btn';
  return (
    <button 
      className={btnClassName}
      disabled={isDisabled}
    >
      {isDisabled ? '已禁用' : '可点击'}
    </button>
  );
}

对应CSS：

.custom-btn {
  color: #007bff;
}

.custom-btn.disabled {
  color: #6c757d;
  cursor: not-allowed;
}

Vue 实现方案 #

方式1：CSS伪类 #

<template>
  <button class="custom-btn" :disabled="isDisabled">
    {{ isDisabled ? '已禁用' : '可点击' }}
  </button>
</template>

<style scoped>
.custom-btn {
  color: #007bff;
}

.custom-btn:disabled {
  color: #6c757d;
  cursor: not-allowed;
}
</style>

方式2：动态类名 #

<template>
  <button 
    :class="['custom-btn', { disabled: isDisabled }]"
    :disabled="isDisabled"
  >
    {{ isDisabled ? '已禁用' : '可点击' }}
  </button>
</template>

<style scoped>
.custom-btn {
  color: #007bff;
}

.custom-btn.disabled {
  color: #6c757d;
  cursor: not-allowed;
}
</style>

注意事项 #

• 如果按钮使用了内联样式，:disabled伪类的样式优先级会不足，此时建议将内联样式改为类样式，或临时使用!important（不推荐，尽量避免破坏样式优先级规则）：

  .custom-btn:disabled {
    color: #6c757d !important;
  }
  

• 若使用Bootstrap、Ant Design等UI框架，框架自带的禁用样式可能会覆盖自定义样式，需调整自定义样式的优先级（比如增加父类选择器）。

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