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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
javascript函数特点实例分析
May 14 Javascript
javascript控制台详解
Jun 25 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
js实现随机8位验证码
Jul 24 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 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.MVC的模板标签系统(四)
2006/09/05 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
10款实用的PHP开源工具
2015/10/23 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
禁止js文件缓存的代码
2010/04/09 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
关于环保的建议书400字
2014/03/12 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
基层党员公开承诺书
2014/05/29 职场文书
大学生毕业评语
2014/12/31 职场文书
博士导师推荐信
2015/03/25 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
二年级作文之动物作文
2019/11/13 职场文书
JavaScript函数柯里化
2021/11/07 Javascript