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 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JS常用正则表达式总结
Nov 12 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
js实现div色块拖动录制
Jan 16 Javascript
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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
jQuery学习笔记之创建DOM元素
2015/01/19 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
vue货币过滤器的实现方法
2017/04/01 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
super关键字的用法
2012/04/10 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
考试退步检讨书
2014/01/15 职场文书
后备干部考察材料
2014/02/12 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2016年元旦寄语
2015/08/17 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers