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

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;
}

最终演示效果如下:

演示链接

  • 浅色主题
  • 暗黑主题
相关推荐
tanxiaomi14 小时前
通过HTML演示JVM的垃圾回收-新生代与老年代
前端·jvm·html
palpitation9714 小时前
Android App Links 配置
前端
FuckPatience14 小时前
Vue 组件定义模板,集合v-for生成界面
前端·javascript·vue.js
sophie旭14 小时前
一道面试题,开始性能优化之旅(3)-- DNS查询+TCP(三)
前端·面试·性能优化
开心不就得了15 小时前
构建工具webpack
前端·webpack·rust
gerrgwg15 小时前
Flutter中实现Hero Page Route效果
前端
不枯石15 小时前
Matlab通过GUI实现点云的ICP配准
linux·前端·图像处理·计算机视觉·matlab
hhzz15 小时前
Pythoner 的Flask项目实践-在web页面实现矢量数据转换工具集功能(附源码)
前端·python·flask
lypzcgf15 小时前
Coze源码分析-资源库-编辑工作流-前端源码-核心流程/API/总结
前端·工作流·coze·coze源码分析·智能体平台·ai应用平台·agent平台
lypzcgf15 小时前
Coze源码分析-资源库-编辑工作流-前端源码-核心组件
前端·工作流·coze·coze源码分析·智能体平台·agent平台