修改ElementUI样式的几种方式

ElementUI是一款非常强大的前端UI组件库，它默认定义了很多美观的样式，但是我们在实际开发过程中不可避免地遇到需要修改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>

5.总结

第一种全局引入css文件的方式，适合于对elementUI整体的修改，比如整体配色的修改；
第二种添加一个style标签的形式，也能够实现修改默认样式的效果，但实际上因为是修改了全局的样式，因此在不同的vue组件中修改同一个样式有可能会有冲突。
第三种方式通过 /deep/ 的方式可以很方便的在vue组件中修改默认样式，也不会于其他页面有冲突。
第四种方式局限性比较大，可以使用，但不推荐使用。

---------------------------------分割线-7月20日更新----------------------------------------

elementUI修改样式介绍内容更新

第三种方法 /deep/ 更新：

今天在做样式修改的时候，突然发现谷歌浏览器报了一个警告，说 ** /deep/ combinator is no longer supported in CSS dynamic profile.** 保险起见我决定不用 /deep/ 这种方法来修改 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://blog.csdn.net/bamboozjy/article/details/81629381
https://blog.csdn.net/zeping891103/article/details/84961225
https://blog.csdn.net/weixin_42204698/article/details/101757080

修改ElementUI样式的几种方式相关推荐

改变elementui卡片crad样式_修改ElementUI样式的几种方式
ElementUI是一款非常强大的前端UI组件库,它默认定义了很多美观的样式,但是我们在实际开发过程中不可避免地遇到需要修改ElementUI默认样式.下面总结了几种修改默认样式的方法. 1. 新建全 ...
原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
JS修改css样式的8种方式
从其他人的博客上看到的,感觉归纳的很棒,在这里种个草. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保 ...
重学前端第一阶段完钢琴项目(document.querySelector js改变css样式的3种方式思路成品)
菜鸟学完之后,总是感觉学了也还是不会,主要就是因为没有实践,不知道自己到底哪里有问题!虽然说我还没复习完,前端很大一部分都处于模糊阶段,但是感觉还是应该先尽力做一个简单的东西,把这几天学的都用进去,遇 ...
html js 设置样式,原生js设置样式笔记：JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性用J ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者内部引用方式1: 直接在标签内用 style 引用,如: <div ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
java kafka设置偏移量_kafka实战宝典：手动修改消费偏移量的两种方式
kafka实战宝典:手动修改消费偏移量的两种方式工作中遇到过消费端报错的问题:包括数据Invalid Message和Failed_to_UNcompress等报错信息,导致消费端的iterator ...

修改ElementUI样式的几种方式

修改ElementUI样式的几种方式相关推荐

最新文章

热门文章