项目中修改element-ui的默认样式
Posted liyunlonggg
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目中修改element-ui的默认样式相关的知识,希望对你有一定的参考价值。
项目中修改element-ui的默认样式
新建全局样式表
新建 global.css 文件,并在 main.js 中引入。 global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下,在 main.js 的引用写法如下:
import "./assets/style/global.css";
在 global.css 文件中写的样式,无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。
通过内联样式 或者 绑定类样式覆盖默认样式
通过内联样式 style ,绑定类样式的方式,可以在某些标签中可以直接覆盖默认样式,不是很通用。
<el-button :style="selfstyle">默认按钮</el-button>
<script>
export default
data()
return
selfstyle:
color: "white",
marginTop: "10px",
width: "100px",
backgroundColor: "cadetblue"
;
</script>
通过绑定修改样式方式修改:
<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
export default
data()
return
selfbutton: "self-button"
;
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.self-button
color: white;
margin-top: 10px;
width: 100px;
background-Color: cadetblue;
</style>
使用 >>> 深度修改标签样式
//没有scss,less
<style scoped>
.a >>> .b /* ... */
</style>
有less的
<style scoped lang='less'>
@deep: ~'>>>';
.box
@deep .title
...
</style>
以上是关于项目中修改element-ui的默认样式的主要内容,如果未能解决你的问题,请参考以下文章
项目中如何修改element-ui的默认样式 (去除scoped,样式穿透 >>> , less/sass : /deep/)