修改element ui 默认样式

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 常用的 vant ui 表单组件使用 ；今天我们来分享一下我项目中常用的修改element ui 默认样式。

首先修改表格的默认样式

（1）去掉鼠标移入当前行的高亮样式

/deep/.el-table tbody tr:hover>td { 
    background-color:transparent;
}

（2）隔行变色样式修改

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td{
 background-color: #ecf3fd;
}

（3）头部th的样式修改

/deep/ .el-table__header thead th {
  background-color: #f2f2f2;
}

然后是修改Dialog对话框的默认样式

（1）头部 X 按钮隐藏

/deep/ .el-dialog__headerbtn {
  display: none;
}

（2）头部标题居中

/deep/ .el-dialog__header {
  text-align: center;
}

（3）头部标题文字样式

/deep/ .el-dialog__title {
  font-size: 20px;
  font-weight: bold;
  color: #19283f;
  line-height: 32px;
}

最后是修改按钮样的默认样式

/deep/ .el-button--primary {
  background-color: #1a65fb!important;
  border-color: #1a65fb!important;
}

修改element ui 默认样式无效的解决方法

（1）要注意的是如果要修改element UI 的默认样式，style 里加了 scoped的属性是导致修改失效，要去掉scoped属性，但是又怕此时该样式会污染全局样式并且打包项目后样式会错乱，那么可以给引用的element ui 的组件 加个最外层标签包着然后去一个唯一的类名。

<style>
  .personCenter .el-table__header thead th {
  background-color: #f2f2f2;
}
</style>

（2）如不想去掉scoped属性当然也可以用/deep/加在最前面，如上述代码为例。 （3）还可以用::v-deep的语法修改element ui的 默认样式，用法如下

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap{
    overflow: hidden;
    overflow-y: auto;
}
</style>

（4）将修改的样式放到控制全局样式的文件中，但是缺点是全部都一样，不能单独修改样式。

结语：

好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第18天，加油！坚持就是胜利。