vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题。但是想要修改还是有方法的:
1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式。
2.使用深度作用选择器,可以通过vue-loader提供的新写法 vue-loader 写法如下(先安装,在使用):
<style scoped>
.a >>> .b { /* ... */ }
</style>
某些预处理器(如Sass)可能无法>>>正确解析。在这些情况下,您可以使用/deep/组合器 - 它是别名,>>>并且完全相同。
<style scoped lang="scss">
.form {
background-color: #fff;
/deep/ .list{
font-size: 18px;
}
}
</style>
sass注意要用 /deep/ ,而无法使用 >>> 这个符号。
通过 v-html 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式 。
vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式的更多相关文章
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- 在vue中scss通过scoped属性设置局部变量如何设置框架样式
应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...
- vue加scoped后无法修改样式(无法修改element UI 样式)
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- vue data对象添加新属性触发视图
<template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...
- Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...
- Vue.js Cookbook: 添加实例属性; 👍 axios(4万➕✨)访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
- sass、less中的scoped属性
1.scoped 的实现原理 Vue中的Less 中的 scoped 属性的效果主要是通过 PostCss 实现的.代码示例: //编译前 <template> <div class ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- Android中自己定义组件和它的属性
好长时间没有更新博客了.本来想积累点有深度的东西发,但一直没有找到非常好的点.所以.写一些基础的东西.就当积累吧. Android开发中难免会用到自己定义的组件.以下以ImageButton为例来介绍 ...
随机推荐
- Javascript 正则表达式简述
本文地址:http://www.cnblogs.com/blackmanba/p/regular-expressions-introduce.html 或者 http://forkme.info/re ...
- CSS大纲
- ZBrush为电影制作设计独特的生物概念
任何一个从事3D行业的艺术家,在雕刻和画画方面,都要有牢固的基本技能,还要会使用一些软件.比如今天我们提到的这位概念设计师.插画师和艺术导演Ian Joyner,他在创作新角色之前,都会思考如何以及为 ...
- UVALive-8078 Bracket Sequence 简单dp
题目链接:https://cn.vjudge.net/problem/UVALive-8078 题意 括号序列T是这样定义的: T是个空的 T是(T), {T}, 或者 [T] T是两个T组成的,比如 ...
- codevs 3945 完美拓印 (KMP)
题目大意:给你一个神奇的印章,他左右下三个面都是直的,上面是凸凹不平的面(凸凹都平行于别的面).然后给你一个轮廓线,如果一个面能与轮廓线完全重合,可以把印章的这个沿着轮廓线拓印,求所有的拓印方案. 把 ...
- [读书笔记] Python数据分析 (四) 数组和矢量计算
Numpy:高性能计算和数学分析的基础包 ndarray, 一个具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组 用于对数组数据进行快速运算的标准数学函数 用于读写磁盘数据的工具和用于操作内存 ...
- [读书笔记] Python 数据分析 (十二)高级NumPy
da array: 一个快速而灵活的同构多维大数据集容器,可以利用这种数组对整块的数据进行一些数学运算 数据指针,系统内存的一部分 数据类型 data type/dtype 指示数据大小的元组 str ...
- UVALIVE 4256 Salesmen
Salesmen Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Original ...
- PatentTips - Object-oriented processor architecture and operating method
BACKGROUND OF THE INVENTION The present invention relates to processors and computer systems. More s ...
- ASP.NET-前台view返回model集合
有时操作列表的时候想一次提交一个model集合,这样后台controller直接接受后就可以直接进行操作了,不用使用js,比较方便,也体现了MVC的Binding模式的优势,方法如下: 准备: 1.两 ...