element-ui修改全局样式且只作用于当前页面
1)修改组件的样式,但是只作用于当前页面,其他页面不受影响,做法有两种:
法一:使用关键字“/deep/”
1)在当前页面添加样式:
<style lang="scss" scoped>
自定义类名 /deep/{
element ui选择器类名{
样式
}
}
</style>
2)
:在其他页面写样式再导入到所需页面
scss文件写法:
.xx /deep/{
element ui选择器类名{
样式
}
}
.vue页面引入必须加上scoped:
<style lang="scss" scoped>
@import "../../../styles/demo.scss";
</style>
法二:使用 ">>>" 也可实现相同效果(注意不要scss的预处理样式,否则也是没效果的)
<style scoped>
.xxx >>> .el-checkbox__label {
color: red;
}
</style>
总之:有scss的地方一定要用deep;不用scss时就要用>>>
element-ui修改全局样式且只作用于当前页面的更多相关文章
- element ui 修改默认样式
修改element ui默认的样式 如果要组件内全局修改 首先在浏览器里F12找到element默认的UI类名 找到要修改的默认类名以后 在文件中修改代码,重写属性 <style> .el ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue+element ui 表格自定义样式溢出隐藏
样式 .hoveTitle { text-align: left; width: 140px; overflow: hidden; text-overflow: ellipsis; white-spa ...
- vue-cli的项目中关于axios的全局配置,结合element UI,配置全局loading,header中做token传输
在src目录中建立plugins文件夹,在文件夹内建立axios.js文件 "use strict"; import Vue from 'vue'; import axios fr ...
- vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- vue中修改swiper样式
问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...
- vue 无法覆盖vant的UI组件的样式
vue 无法覆盖vant的UI组件的样式 有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将 ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
随机推荐
- kettle查询-2
模糊匹配: 1.主数据/查询数据 2.模糊匹配 3.输出:jaro/jaro winkler/pair letters similarity(各自算法的匹配度measure value) http c ...
- LDOOP ADD_PRINT_TEXT多页项
纯文本打印(ADD_PRINT_TEXT)项超过宽度且高度不够的情况下,不会隐藏后面的内容,而是会分到下一页.分页数量和每页显示内容多少 和设置的纯文本打印项高度有关.LODOP.SET_PRINT_ ...
- [Qualcomm]A Detailed History of Qualcomm 高通的前世今生
https://www.semiwiki.com/forum/content/7353-detailed-history-qualcomm.html
- [Coci2015]Divljak
题目描述 Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操作有两种形式: “1 P”,Bob往自己的集合里添加了一个字符串P. ...
- 如果固定电脑ip地址
打开网络和共享中心 点击详细信息,即可看到IP地址.子网掩码.默认网关.DNS服务器信息 点击本WLAN状态->属性 找到Internet 协议版本 4(TCP/IPv4) 用鼠标左键单击两下 ...
- selenium家族发展史
什么是Selenium? Selenium 是专门为Web应用程序编写的一个验收测试工具.Selenium测试直接运行在浏览器中,支持的浏览器包括IE(7.8.9).Mozilla Firefox.M ...
- GWAS条件分析(conditional analysis)
一.为什么要做GWAS的条件分析(conditional analysis) 我们做GWAS的时候,经常扫出一堆显著的信号,假设rs121是我们扫出来与某表型最显著相关的位点(P=1.351e-36) ...
- GO语言系列(一)- 初识go语言
一.golang语言的特性 1.垃圾回收 a.内存自动回收,再也不需要开发人员管理内存 b.开发人员专注业务实现,降低了心智负担 c.只需要new分配内存,不需要释放 2.天然并发 a.从语言层面支持 ...
- 第十一节:基于MVC5+Spring.Net+EF+Log4net 传统的一种搭建模式
- luogu 4042 有后效性的dp
存在有后效性的dp,但转移方程 f[i] = min( f[i], s[i] + sigma f[j] ( j 是后效点) ) 每次建当前点和 转移点的边 e1, 某点和其会影响的点 e2 spfa ...