element常用修改默认样式

原创已于 2023-02-27 10:24:33 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #vue.js

于 2023-02-25 13:38:51 首次发布

css 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何修改ElementUI库中按钮（el-button）和树形组件（el-tree）的默认样式。通过添加CSS规则，可以改变按钮的颜色、边框以及在鼠标悬停时的样式。对于树形节点，文章展示了如何定制节点内容，并设置选中节点的背景色和文字颜色。

element常用修改默认样式

1.el-button自定义颜色

//显示时按钮样式
.el-button--primary { //需要更改的按钮类型
  background: #d8821f !important;
  border-color: #d8821f !important;
}
//移入时按钮样式
.el-button--primary:hover {
  background: #ecbd87 !important;
  border-color: #ecbd87 !important;
  color: #FFF !important;
}

2.el-tree自定义节点内容并设置选中节点的样式

//  移入树形
.el-tree-node__content:hover {
  background: rgba(0, 229, 255, 0.3) !important;
}
// 选中当前node的样式
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: rgba(0, 229, 255, 0.5) !important;
  color: red !important;
}