覆盖或者更改elementui组件原有样式的几种方式如下

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

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

<span style="color:#000000">
  <span style="background-color:#282c34">
<code class="language-css"><span style="color:#669900">/deep/ .el-card__body</span><span style="color:#999999">{</span>
	<span style="color:#98c379">padding</span><span style="color:#999999">:</span>0px<span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>
</span>

 

2、 使用全局统一覆盖的方式
在src/assets/css目录下创建文件global.css文件,然后在main.js文件中引入，写法如下：

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

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

<style>
/* 重写element-ui部分样式 */
.el-card__body {
  padding: 0px;
}
</style>

<style lang="less" scoped>
/*自己本地的样式*/
.language-detail-progress {
  padding: 20px;
}
...............
</style>

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

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



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

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