覆盖element-ui默认样式的方式

1 使用全局统一覆盖的方式

在src/assets/css目录下创建文件global.css文件,然后在main.js文件中引入，写法如下：

import'./assets/css/global.css'

2 在当前的vue单页面中添加一个新的style标签

在当前的vue单页面中添加style标签,记住不要添加****scoped属性，加上scoped无法覆盖ElementUI默认的样式，具体缘由可以自行百度了解scoped属性的作用及其用法，写法如下：

<style>/* 重写element-ui部分样式 */.el-card__body{padding: 0px;}</style><stylelang="less"scoped>/*自己本地的样式*/.language-detail-progress{padding: 20px;}
...............
</style>

3 使用/deep/深度修改标签样式

在需要修改的ElementUI标签的style样式前面加上**/deep/，可以强制修改默认样式。这种方式可以直接用到带有scoped**属性的style标签中，写法如下：

/deep/ .el-card__body{padding:0px;}

4 通过内联样式修改

通过内联样式style，直接覆盖默认样式，方式如下

<el-cardstyle="height: 403px">
    .....
</el-card>

5 总结

以上就是本人总结的几种方式，欢迎补充修改。第一种方式适合对element

UI整体的修改。第四种方式的局限性比较大，不推荐使用。其它两种各有所长。