使用css3变量修改elementUI原始样式

83 阅读 0 评论 55 点赞

我是靠谱客的博主着急火龙果，这篇文章主要介绍使用css3变量修改elementUI原始样式，现在分享给大家，希望可以做个参考。

在使用elementUI的过程中，官方提供了修改SCSS变量和命令行工具实现自定义主题的方式。

不过，这种方式主要是从整体上进行样式修改，比如修改input组件的样式后，在哪里使用，都是相同的样式。

在实际使用过程当中，不同的页面，或者相同的页面中，同一个组件的样式可能存在不一样的情况。

当前，我的处理方式是在使用的时候，进行样式覆盖。为了统一管理，使用css3的var变量。

注意事项：

1、覆盖elementUI原始样式，不能给style加scoped属性，否则不生效。为了避免污染全局样式，对本vue文件的div添加作用范围，例如#myIndex。其他样式使用scoped限定作用域。

2、使用css3的变量功能，可以方便进行样式调整。需要注意的是变量的calc方法使用。

height:var(menu-height-size)px 是有问题的，数字和px之间有空格，需要使用计算功能--menu-submenu-top:calc((var(--menu-height-size) + 5)*1px);

以上就是着急火龙果最近收集整理的关于使用css3变量修改elementUI原始样式的全部内容，更多相关使用css3变量修改elementUI原始样式内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。