ElementUI 修改默认样式的几种办法(小结)


Posted in Javascript onJuly 29, 2020

ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 vue 框架介绍几种修改 ElementUI 默认样式的办法。

ElementUI下载官网:http://element.eleme.io/#/zh-CN

Vue

安装:

npm i element-ui -S

使用:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
 el: '#app',
 render: h => h(App)
});

(一)内嵌法修改样式

通过:style修改,用于局部组件块:

<el-button :style="selfstyle">默认按钮</el-button>
<script>
 export default {
 data() {
  return {
  selfstyle: {
   color: "white",
   marginTop: "10px",
   width: "100px",
   backgroundColor: "cadetblue"
  }
  };
 }
 }
</script>

(二):class引用修改样式

通过:class修改,用于局部组件块:

<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>

(三)import导入修改样式

通过import导入样式文件,若在main.js中导入css 则表示全局引用。既可以用于局部组件块也可以用于全局组件:

<el-button>和下面的el-button效果一样</el-button>
<el-button :class="[selfbutton]">默认按钮</el-button>
<script>
 import './button.css'
 export default {}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped></style>
 
/* button.css */ 
.el-button {
 color: white;
 margin-top: 10px;
 width: 100px;
 background-Color: cadetblue;
}
 
.self-button {
 color: white;
 margin-top: 10px;
 width: 100px;
 background-Color: cadetblue;
}
 
.self-button:hover {
 color: black;
 background-Color: whitesmoke;
}

React

安装:

npm install element-react -S
npm install element-theme-default -S

使用:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'element-react';
 
import 'element-theme-default';
 
ReactDOM.render(<Button type="primary">Hello</Button>, document.getElementById('app'));

(一)内嵌法修改样式

import { Button } from 'element-react';
 
function app(){
 render() {
 const style = {
  color: "white",
  marginTop: "10px",
  width: "100px",
  backgroundColor: "cadetblue"
 }
 return(
       <div>
       <Button style={style}>Hello</Button>
      </div>
 );
 }
}

(二)提升优先级修改样式

导入样式文件,通过className引用样式,样式文件中需要使用!import提高优先级,否则无效。

import '../style/button.css'
import { Button } from 'element-react';
 
function App(){
 render() {
 return(
  <div>
              <Button>和下面的Button效果一样</Button>
      <Button className="self-button">Hello</Button>
   </div>
 );
 }
}
 
/* button.css */
.el-button {
 color: white!important;
 margin-top: 10px!important;
 width: 100px!important;
 background-Color: cadetblue!important;
}
 
.self-button {
 color: white!important;
 margin-top: 10px!important;
 width: 100px!important;
 background-Color: cadetblue!important;
}
 
.self-button:hover {
 color: black!important;
 background-Color: whitesmoke!important;
}

到此这篇关于ElementUI 修改默认样式的几种办法(小结)的文章就介绍到这了,更多相关ElementUI 修改默认样式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
May 15 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
Element中Slider滑块的具体使用
Jul 29 #Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 #Javascript
javascript实现移动端触屏拖拽功能
Jul 29 #Javascript
Vue实现移动端拖拽交换位置
Jul 29 #Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 #Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 #Javascript
JavaScript编写开发动态时钟
Jul 29 #Javascript
You might like
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python画图的函数用法以及技巧
2019/06/28 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
自我评价的正确写法
2013/09/19 职场文书
大学毕业的自我鉴定
2013/10/08 职场文书
自考生自我评价分享
2014/01/18 职场文书
个人作风剖析材料
2014/02/02 职场文书
《太阳》教学反思
2014/02/21 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
政协会议宣传标语
2014/10/09 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS