修改element-ui组件样式

在项目开发过程中,为了提高开发效率,使用了element-ui的组件库,但同时带来一个问题就是组件的样式并非我们想要的,通过加id这种方法的能提高元素的部分层级,但是对于一些组件内部通过一些条件新创建的元素,我们控制样式就比较无能为力了,于是我们考虑修改源码。官网上也给我们提供了这样的条件,
首先,安装「主题生成工具」,可以全局安装或者安装在当前项目下,这里以全局安装做演示:

npm install element-theme -g
其次,从github或者npm上拉取默认主题:

从 npm
npm i element-theme-default -D

从 GitHub
npm i https://github.com/ElementUI/theme-default -D

因为是全局安装的,所以可以在命令行里通过et调用工具,执行-i初始化变量文件。
et -i

直接编辑对应的CSS文件,然后保存,保存文件后,再到命令行执行:
et

(整体修改:可以通过修改 element-variables.css文件里的变量,即可改变整体风格。
修改部分源码进入:node_modules/element-theme-default/src目录下修改相应文件的代码即可。)

还有一点值得注意:修改源码的时候不会触发编译的watch模式,需要手动再保存一遍 element-variables.css这个文件才可以触发编译效果。

下一步就是将我们修改的引入就可以了,(默认情况下编译的主题目录是放在./theme下,你可以通过-o参数指定打包目录。像引入默认主题一样,在代码里直接引用theme/index.css文件即可。)
import ‘../theme/index.css’

这里说明一下element-ui的样式写法:
element-theme-default采用的是下一代CSS风格的开发方式,有几个显著特征:采用var进行全局样式变量定义 支持@import引入外部css 支持层级嵌套书写,支持一些独特的语法一些独特的语法列举如下:

@component-namespace后面跟着的通常是 el,会通知整个组件的class前缀渲染为 el
以下的部分是跟在 @component-namespace层级之后,也就是都在 @component-namespace el {...}花括号内。
@b后面跟着的class会渲染为: el-class。例如:@b alert{...}会被渲染为el-alert{...}

@modifier或者 @m后面跟着的class会被渲染为: --class。例如:
@b alert{ @modifier info{...}会被渲染为:el-alert--info{...}
@m warning{...}}会被渲染为:el-alert--warning{...}

@e后面跟着的class会被渲染为: __class。例如:
@b alert{ @e content{...}}会被渲染为:el-alert__content{...}

@when后面跟着的class会被渲染为: .is-class。例如:
@b alert{ @e title{ @when bold {...} }}会被渲染为:el-alert__title.is-bold{...}

@mixin button-size后面跟着四个值,分别代表是padding上下、padding左右,font-size,border-radius。
例如:
@b button{ @mixin button-size 10px 20px 30px 40px;}
会被渲染为
.el-button{ padding: 10px 20px; font-size: 30px; border-radius: 40px;}

@mixin button-variant后面跟着3个值,分别代表color、background-color、border-color。同时还会渲染一系列的hover/active/focus等颜色的深浅变化。
例如:
@b button { @mixin button-variant white blue black;}
会被渲染为:
.el-button{ color: white; background-color: blue; border-color: black;}
.el-button:hover,.el-button:focus{...}/ 一系列颜色变化 /......

tint()和 shade()函数,分别用来使颜色提升亮度、颜色降低亮度用的。接受两个参数,第一个是颜色值,第二个是明暗百分比。
例如:
.foo { color: tint(#BADA55, 42%)}会被渲染为:.foo { color: #e2efb7}
.bar { background-color: shade(#663399, 42%)}会被渲染为:.bar { background-color: #2a1540}

转自简书:http://www.jianshu.com/p/e946456f3d09

阅读更多
博主设置当前文章不允许评论。
换一批

没有更多推荐了,返回首页