elementUI如何修改样式

elementUI如何修改样式解决方案：

1.新建全局样式表

新建 global.css 文件，并在 main.js 中引入。 
global.css 文件一般都放在 src->assets 静态资源文件夹下的 style 文件夹下，
在 main.js 的引用写法如下：

import "./assets/style/global.css";

在 global.css 文件中写的样式，无论在哪一个 vue 单页面都会覆盖 ElementUI 默认的样式。

2.在当前vue单页面中添加一个新的style标签

在当前的vue单页面的style标签后，添加一对新的style标签，
新的style标签中不要添加scoped属性。
在有写scoped的style标签中书写的样式不会覆盖 ElementUI 默认的样式。

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

找到需要修改的 ElementUI 标签的类名，然后在类名前加上 /deep/ ，可以强制修改默认样式。
这种方式可以直接用到有 scoped 属性的 style 标签中。

// 修改级联选择框的默认宽度
/deep/ .el-cascader {
  width: 100%;
}

4.通过内联样式或者绑定类样式覆盖默认样式

通过内联样式 style 绑定类样式的方式，可以在某些标签中可以直接覆盖默认样式，不是很通用。
具体实例如下：
内联样式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>

如果在使用/deep/方法 报这个错误： ** /deep/ combinator is no longer supported in CSS dynamic profile.**
可以使用 >>> 来深度修改样式。如下面的例子：

<style scoped>
  .a >>> .b { /* ... */ }
</style>

上面的代码将会被解析成如下格式，可在浏览器中查看：

.a[data-v-f3f3eg9] .b { /* ... */ }

如果在 <style> </style> 标签中并没有声明类似于 less，scss等预处理语言，
因此：** 这种 >>> 方式只能用在原生 CSS 语法中，
不能在 css 预处理器如 less scss 等直接使用**

如何在css预处理器中使用 >>> 深度修改elementUI样式呢？

用变量代替 >>> 符号，如下代码示例：

<style scoped lang='less'>
    @deep: ~'>>>';
      .box {
        @{deep} .title {
            ...
        }
      }
</style>
**~ 表示转义**
转义允许您将任意字符串用作属性或变量值。除插值外，里面的任何东西 ~"anything" 或 ~'anything' 原样使用。
```css
.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

编译为以下内容：

.weird-element {
  content: ^//* some horrible but needed ss hack;
}

当然，我们也可以在全局样式表中为 >>> 取别名，那么就可以直接在页面任何 style 标签中使用其别名如 @{data} 来修改页面样式了

注意：我在实际中发现，多个 @{data} 可以同级使用，但不能相互嵌套，否则将不会生效。如下图，虽然 el-input__inner 在 el-input 标签内部，但却不可以直接嵌套使用