怎样修改element-ui中的样式？

ElementUI是一款非常强大的前端UI组件库，它默认定义了很多美观的样式，

但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式。

下面总结了几种修改默认样式的方法

方法一 新建全局样式表

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

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

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

方法二 使用  /deep/

.homePage /deep/ .el-main {
　　padding: 0;
}

  或者

/deep/ .el-form-item__content{
    margin-left: 140px !important;
}

.homePage为我们要修改组件类名的父级组件样式类名：即使定义一个空的类名也没事。

.el-main为我们要修改组件的样式。

方法三 在当前 vue 单页面中添加一个新的style标签

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

方法四 使用 >>> 来深度修改样式

<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 标签内部，但却不可以直接嵌套使用。这一部分内容，参考这篇文章

参考文章：

https://www.cnblogs.com/aurora-ql/p/13308107.html