vue中使用elementui 更改其样式的几种常见的方法

ElementUI是款经常使用的前端UI组件库，它默认定义了很多美观的样式，但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式的情况。

1.内联样式：更适合修改旧项目/他人项目，对于很少范围内的样式修改，可以使用内联修改

<!-- 修改elementui的样式：1. 内联样式 style='background:#98674c;' -->
<el-button  style='background: #98674c;'  type="primary" icon="el-icon-arrow-left">上一页</el-button>

或者：

 <el-button  :style='mysty'  type="primary" icon="el-icon-arrow-left">上一页</el-button>
 ...
<script>
  export default {
    data() {
        return {
          mysty:{
              color:'black',
              width:'100px',
              backgroundColor:'cadetblue'
          }
        }
     }
  }
</script>

但是使用 :class="[mysty]" 绑定修改样式无效

<el-button :class="[mysty]" type="primary" icon="el-icon-arrow-left">上一页</el-button>

2.全局样式，适合改变整体风格的样:

在src下面assets文件夹中建立一个全局的css文件，在main.js中全局引入，局部引入无效

//2.  引入全局样式(只能全局引入，不能局部引入)
import './assets/global.css'

3.样式穿透： （注意如果使用 >>> 有报错时，最好外面添套个标签使用）

<template>
    <div>
        <!-- 单独对某一个input更改，需要添加一个标签包裹 -->
        <div class="inp">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
</template>

<script>
export default {
    data() {
    return {
      input: ''
    }
  }
}
</script>

<style scoped >   
    /* 1. 不管是用css样式还是使用less/sass此处都需要加上scoped才会起作用 
    但是使用 scoped后，原来利用 父级>子级 类选择器来修改的样式就无法生效了
       2. 样式穿透：css样式，用>>>和/deep/或者::v-deep 都可以
       3. 使用less或者scss ，只能用/deep/或者::v-deep 
       4. 注意标签类名是.el-input__inner而不是el-input*/
     .inp ::v-deep .el-input__inner{
         color: red;
         border:2px solid red;
         width: 200px;
         background-color: aqua;
     }

    /* .inp >>> .el-input__inner{
        color: red;
        border:2px solid red;
        width: 200px;
        background-color: aqua;
    } */

</style>

4.组件中 style 加或者不加scoped属性，直接利用 父级>子级 类选择器来修改的样式的方法（不建议使用，亲测不灵，大部分样式都无法更改生效）

<template>
  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</template>

<style scoped>
    /* 加了 scoped 才起作用 */
    .el-button{
         background-color: black;
         color:white;
    }
 </style>

<template>
  <el-input v-model="input" placeholder="请输入内容"></el-input>
  <el-tag type="success">标签二</el-tag>
</template>

<style scoped>
    /* 加不加都没用 */
    .el-input{
        background-color: bisque;
        width: 200px;        // 加了scoped，这里的宽度起作用的，其他样式没用
        color: red;
    }
    .el-tag{
        color: red;
        background-color: bisque;
    }
 </style>