项目中修改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/)

element-ui默认样式修改

element-ui分页的使用及修改样式

vue 项目全局修改element-ui的样式

自定义element-ui主题,修改样式

Element-ui之修改样式