怎样修改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文件怎么写如何在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标签内部，但却不可以直接嵌套使⽤。这⼀部分内容，参考
参考⽂章：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。