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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Django  ORM 练习题及答案
2019/07/19 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
应届大学生求职信
2013/12/01 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
行政助理的岗位职责
2014/02/18 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers