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>

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

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

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

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

4 通过内联样式修改

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

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

5 总结

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

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐