element ui css样式整体修改，有啥较好的解决方案

Posted 2023-03-29

参考技术A elemnt-ui有很多组件,但是我用的时候需要针对很多组件做自定义,比如下拉框的箭头等各种默认样式,官网那个看不太懂,有没有具体一点的教程天津众 维UI设计提供

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