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为例来介绍 ...
随机推荐
- electron-vue中使用iview 报错this. is readonly的解决办法
title: electron-vue中使用iview 报错this. is readonly的解决办法 toc: false date: 2019-02-12 19:33:28 categories ...
- SQLSERVER 链接服务器执行存储过程
1.创建链接服务器 exec sp_addlinkedserver 'server_tmp','','SQLOLEDB','192.168.1.1' -- server_tmp 为别名 exec sp ...
- 洛谷P3327 [SDOI2015]约数个数和(莫比乌斯反演)
题目描述 设d(x)为x的约数个数,给定N.M,求 \sum^N_{i=1}\sum^M_{j=1}d(ij)∑i=1N∑j=1Md(ij) 输入输出格式 输入格式: 输入文件包含多组测试数据.第 ...
- python小项目之头像右上角加数字
pillow介绍 一.Image类的属性:1.Format 2.Mode 3.Size 4.Palette 5.Info 二.类的函数:1.New 2.Open 3.Ble ...
- 使用Latex写book类型文本的体会
晚上参考中科院上海交大清华北大等学校的模板,终于重新把博一时候没解决的问题解决了.中科院吴老师的CTeX论坛因为维护压力比较大不得不关了,查不到之前的Latex解决答案.经过一下午和一晚上的摸索,忽然 ...
- CoordinatorLayout:android之ScrollingActivity
1.效果图 2.新建SrcollingActivity后生成代码为: <?xml version="1.0" encoding="utf-8"?> ...
- ZBrush中物体的显示与隐藏
在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选 ...
- 前端框架easyui layout, Tabs,tree
一.三大前端框架的 1.easyui=jquery+html4(用来做后台的管理界面) 不要钱,开发速度快,不好看,不支持响应式 2.bootstrap=jquery+html5 好看,开发速度快,部 ...
- router+x
vue-router官方的路由管理器 包含的功能: ——绑定方法进行跳转 路由嵌套 写的不一样搜索的路由路径也不一样 二级路由 设置默认路由 导航守卫: 用于强制跳转或者取消的方式 ...
- Day 01 计算机编程基础
1.编程语言是什么? 编程语言是人与计算机交流的介质 2.什么是编程? 用编程语言写出一个个文件,这堆文件会达到一个目的 3.编程有什么用? 让计算机帮助我们干活,从而解放人类劳动力 4.计算机组成原 ...