修改样式的方法
- 官网上面介绍了几种方法;
- 当然还有其他的方法,比如直接在vue文件的
style
里面设置样式进行覆盖,或者引入其他的scss文件(谁说的一定要引入variables.scss
,我偏不信),下面为直接在style
中通过选择器进行覆盖的样子,结果也是有效的 - 经过一段时间的使用,发现直接在
style
中添加样式并不好维护,因为很多时候,同一个样式会利用在项目中的很多地方,比如一个后台的所有按钮风格都要一样,我们也不可能每一个都去设置一下样式,如果突然感觉颜色不对,岂不是要每个文件的去修改了,而且有些样式的设置通过这种方式也未必有效(当然其他名字的scss也会有同样的问题,并不总是有效的) - 所以我们直接采用element-variables.scss的方法,在src目录下创建common->styles->element-variables.scss目录;
基本设置
- 首先要对引入的element-variables.scss进行基本设置
$--font-path: ‘~element-ui/lib/theme-chalk/fonts‘; @import "~element-ui/packages/theme-chalk/src/index";
- 然后我们就可以快乐的开始修改样式啦!
修改默认颜色
- Element-ui的默认颜色是鲜艳、友好的蓝色,当我们需要修改整体风格的颜色时,只需要在
element-variables.scss
里添加一条简单的代码,$
的这种写法是scss里对变量的修饰符。
修改button的样式
- 在处理其他组件的样式,我们通常不会直接进行修改,而是通过交集选择器的方式限定范围,如下图(注意,这儿的限制选择器放到默认的样式后面,可以更好的进行维护)
.el-button.edit { color: #fff; background-color: #333; } .el-button.add { color: #fff; background-color: #666; } .el-button.delete { color: #fff; background-color: #999; }
- 在组件里面进行使用
- 首先引入
element-variables.scss
文件<style rel="stylesheet/scss" lang="scss" scoped> @import "[email protected]/common/styles/element-variables.scss"; </style>
- 在遍历里面加入class便可完成样式的修改
<el-button class="edit">编辑</el-button> <el-button class="add">添加</el-button> <el-button class="delete">删除</el-button>
- 首先引入
- 最终效果如下
原文地址:https://www.cnblogs.com/usebtf/p/9098382.html
时间: 2024-11-14 13:29:47