element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
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);newVue({
el:'#app',
render: h=>h(App)
});
(一)内嵌法修改样式
通过:style修改,用于局部组件块:
默认按钮
data() {return{
selfstyle: {
color:"white",
marginTop:"10px",
width:"100px",
backgroundColor:"cadetblue"}
};
}
}
(二):class引用修改样式
通过:class修改,用于局部组件块:
默认按钮
data() {return{
selfbutton:"self-button"};
}
}
color: white;
margin-top: 10px;
width: 100px;
background-Color: cadetblue;
}
(三)import导入修改样式
通过import导入样式文件,若在main.js中导入css 则表示全局引用。既可以用于局部组件块也可以用于全局组件:
和下面的el-button效果一样
默认按钮
/*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(Hello, document.getElementById('app'));
(一)内嵌法修改样式
import { Button } from 'element-react';functionapp(){
render() {
const style={
color:"white",
marginTop:"10px",
width:"100px",
backgroundColor:"cadetblue"}return(
Hello
);
}
}
(二)提升优先级修改样式
导入样式文件,通过className引用样式,样式文件中需要使用!import提高优先级,否则无效。
import '../style/button.css'import { Button } from'element-react';functionApp(){
render() {return(
和下面的Button效果一样
Hello
);
}
}/*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;
}
————————————————
版权声明:本文为CSDN博主「黄泽平」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zeping891103/article/details/84961225
element ui需要引入样式吗_ElementUI 修改默认样式的几种办法相关推荐
- element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制 作者:wuwhs 来源:SegmentFault 思否社区 前言 手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...
- Naive UI修改默认样式
一.问题描述 因为大创的缘故,需要做出一个网站,在搭建网站的过程中需要使用Naive UI框架,在设置样式的时候一直无法修改默认样式.小白不知道应该如何使用样式穿透,同时和Naive UI相关的博客比 ...
- Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...
- (Select)解决:Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
1.存在修改默认样式不生效问题的展示: A.问题一:虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示: B.问题二:渲染后的 dom 元素并不在 #app 元素内部: // 发现:修改下拉框默 ...
- 修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
- 「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记
一.Element修改下拉框角标 就比如我最近遇上的一个问题,想要重定义 element 组件库中的下拉选择框的角标,一直不知道怎么覆盖才好. 最后才知道是由伪元素做的. 如果我们想要重定义eleme ...
- 浅谈百度地图的简单开发之引入基本地图以及修改地图样式(一)
今天,想给大家带来一个基于百度地图官方开放的API开发的高仿百度地图的Demo(还称不上是一个APP),基本实现了百度地图的几大核心功能,百度地图中的基本地图,百度地图的定位,百度地图的全景显示,百度 ...
- element-ui 通过变量修改默认样式
项目用的是 element-ui + vue 项目里有个需求是要修改 element 消息提示组件中 warning 类型的背景色和那个小感叹号的背景色 有两种方式,第一种比较简单,用 F12 找到想 ...
- vue 方法里面修改样式_vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. .swiper-contain ...
最新文章
- 如何使用cout以全精度打印双精度值?
- Yahoo!团队实践分享:网站性能优化的34条黄金守则
- python读取nc文件并转换成csv_python3使用类型转换读取csv文件
- 数据结构实验之栈与队列二:一般算术表达式转换成后缀式
- 2 0 2 0 年 第 十 一 届 蓝 桥 杯 - 省赛 - CC++大学B组 - B.既约分数
- 前端学习(2327):angular之双向绑定
- 通俗易懂,先来认识一下Vuex
- cocos2d-x系列 Mac下配置cocos2d-x开发环境(android和ios)
- Mac下和Windows下UnrealEngine 4体验对比
- c51单片机蜂鸣器程序C语言响,单片机蜂鸣器响生日快乐编程程序
- 加速你的企业数字化转型,首先做到这一步!
- java正则表达式详解
- Another Redis DeskTop Manager:一款可视化的Redis管理工具
- 计算机硬盘能否做u盘用怎么用,教你怎么用移动硬盘做原系统的启动硬盘图文教程...
- iOS APP审核注意事项
- java 叠加层_java简单设置图层实现图片叠加
- js简单插件(饼形图)
- Django rest framework --- Routers
- 在线IEEE浮点二进制计算器工具
- 金蝶cloud后台数据库表说明
热门文章
- Apriori算法通俗详解_fpgrowth_关联
- The bean 'xxxx.FeignClientSpecification', defined in null, could not be registered. A bean with that
- 操作系统学习笔记 第五章:文件管理(王道考研)
- 高通为何46亿美元ADAS Veoneer Arriver
- 通过 DLPack 构建跨框架深度学习编译器
- HiCar SDK概述
- CVPR2019论文看点:自学习Anchor原理
- 2021年大数据Spark(五十):Structured Streaming 案例一实时数据ETL架构
- Laravel/Lumen 使用 Redis队列
- python2x NameError: name ‘abc‘ is not defined