一、需求背景
纵观现今前端框架,vue,react,angular三分天下,其中易上手的vue目前更是在中国市场用的火热,配合vue用的pc端后台管理类UI组件库,有elementui,iview,ant design of vue等等,今天就来说说如何修改项目当中的elementui主题。
二、自我思考的方式
之前的话,要做elementui的主题配置,用的最多的想法就是去重置elementui的样式,!important也好,scss或less的深度选择器也好(/deep/等),都是用过css优先级层叠去控制,类似如下代码:重置elementui组件border的颜色。
/deep/ .el-collapse-item__header:before {
content: '';
position: relative;
height: 100%;
left: -16px;
bottom: 0;
border: 2px solid #008474;
}
用上述方法可以实现重置elementui的样式,但是这么做有个问题,就是如果ui框架的主题色都要变成#008474这个色号,是不是所有用到的组件的类名全都要重置层叠一遍,OMG,那要写多少重置样式的代码?
三、解决方案
所幸的是 elementui官网上为我们提供了自定义主题的功能:
附链接:https://element.eleme.cn/#/zh-CN/theme
我们可以点击进去看到这个页面:
不同的控件,字体大小,背景颜色,hover后的颜色,active的颜色,边距之类的样式可以自由调整,页面会随着右边选中的样式尔刷新展示。最后点击右上角的下载按钮,得到一个elementui css的包,可以看到有自定义主题后elementui的字体图标和样式表。
之前在项目中引入elementui的一般写法是,在main.js中写入:(这里引入的是node_modules中的包)
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
现在有了自己的样式文件,我们只要把上面生成的文件 放到自己的项目里面,引入自己的包就行了
mport Vue from 'vue'
import ElementUI from 'element-ui';
import '@/styles/theme/element-theme/theme/index.css'
Vue.use(ElementUI)
以上就是根据elementui官网提供的方案修改主题色,不用通过之前的样式重置,或者建立一个element-variable文件通过scss变量去覆盖。更加优雅,易懂。
如果要做升级版,牵扯到主题切换效果,还可以用到css变量var() 或者scss变量的方式,scss less css预编译中还有很多嵌套,继承,定义变量比较好用的功能,可以帮助我们很优雅的编写css代码,作出更炫酷的页面。有人经常说css很简单,但我觉得css不简单。用好css是一门艺术。不写冗余样式,高度集中化,这些都是需要常年累月去学习与实践的,本文仅仅是记录一些日常工作当中的小技巧,别无他意,睡觉。
😴😴。。。