轻松覆盖 Element-Plus 禁用按钮样式

CondorHero2025-08-11 17:59

Element Plus 按钮的禁用样式非常的花里胡哨，实际项目使用中一点都不清晰，别说用户可能分不清，写代码的我都有一点迷惑，且暗黑模式下禁用按的样式直接歇菜，不能用了。

请看截图

浅色主题

暗黑主题

点击查看按钮禁用状态

antd 在这个地方做的就很好，禁用按钮是单独的一种颜色，不跟随按钮的主题进行变化，比较便于用户确认按钮表示的意义，请看截图：

演示链接地址

浅色主题

暗黑主题

接下来就是覆盖 Element Plus 禁用按钮的样式了，分别覆盖普通按钮、文本按钮、链接按钮、朴素按钮即可，代码如下：

css 复制代码

.el-button.is-disabled {
  --el-button-disabled-bg-color: var(--el-disabled-bg-color);
  --el-button-disabled-text-color: var(--el-disabled-text-color);
  --el-button-disabled-border-color: var(--el-disabled-border-color);
}
.el-button.is-text.is-disabled,
.el-button.is-link.is-disabled {
  color: var(--el-disabled-text-color) !important;
}
.el-button.is-plain.is-disabled {
  background-color: var(--el-disabled-bg-color) !important;
  color: var(--el-disabled-text-color) !important;
  border-color: var(--el-disabled-border-color) !important;
}

最终演示效果如下：

演示链接

浅色主题

暗黑主题