在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样式的更多相关文章

  1. vue中修改Element ui样式不起作用

    公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...

  2. 在vue中scss通过scoped属性设置局部变量如何设置框架样式

    应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...

  3. vue加scoped后无法修改样式(无法修改element UI 样式)

    有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...

  4. vue data对象添加新属性触发视图

    <template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...

  5. Element UI样式无法修改解决方法。

    最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...

  6. Vue.js Cookbook: 添加实例属性; 👍 axios(4万➕✨)访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  7. sass、less中的scoped属性

    1.scoped 的实现原理 Vue中的Less 中的 scoped 属性的效果主要是通过 PostCss 实现的.代码示例: //编译前 <template> <div class ...

  8. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  9. Android中自己定义组件和它的属性

    好长时间没有更新博客了.本来想积累点有深度的东西发,但一直没有找到非常好的点.所以.写一些基础的东西.就当积累吧. Android开发中难免会用到自己定义的组件.以下以ImageButton为例来介绍 ...

随机推荐

  1. python网络编程三次握手和四次挥手

    TCP是因特网中的传输层协议,使用三次握手协议建立连接.当主动方发出SYN连接请求后,等待对方回答SYN+ACK[1],并最终对对方的 SYN 执行 ACK 确认.这种建立连接的方法可以防止产生错误的 ...

  2. 理解HashMap底层原理,一个简单的HashMap例子

    package com.jl.testmap; /** * 自定义一个HashMap * @author JiangLai * */ public class MyHashMap<K,V> ...

  3. 微信小程序,canvas绘图,样式错乱

    问题1:文字样式错乱 使用以下方式分模块绘制, ctx.save()//...ctx.restore() 绘制完后,定时500毫秒再保存图片 ctx.draw(false, () => { se ...

  4. hdu 1532 Drainage Ditches 【ISAP 】

    还是不是很懂算法 先存一个模板先吧--- 看的这篇学的-- http://www.renfei.org/blog/isap.html #include<cstdio> #include&l ...

  5. J2EE概念汇总

    JVM 是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟 ...

  6. 路飞学城Python-Day39(第四模块复习题)

    并发编程 一.简答题 1,简述计算机操作系统的中断的作用 由于cpu本身一次只能执行一个程序,操作系统提供的中断机制使得cpu能够实现不断的在各个程序间进行切换,给人的感觉就是多个程序同时执行 为什么 ...

  7. KVM虚拟机相关步骤

    KVM是Kernel-based Virtual Machine的简称,是一个开源的虚拟化模块,该文档是基于CentOS 7.4环境操作的 一.操作系统安装 本文采用的是CentOS 7.4 1.查看 ...

  8. python在不同情况下写入csv文件

    情况一(解法一):将列表存储为csv文件.列表的每一项代表csv文件的一行. 列表中的每一项包含多个属性.list=[[属性1,属性2,属性3,……],[属性1,属性2,属性3,……],[属性1,属性 ...

  9. Python 绘图与可视化 matplotlib(上)

    参考链接:https://www.cnblogs.com/dudududu/p/9149762.html 更详细的:https://www.cnblogs.com/zhizhan/p/5615947. ...

  10. [luogu] P3294 [SCOI2016]背单词 (贪心)

    题目描述 Lweb 面对如山的英语单词,陷入了深深的沉思,"我怎么样才能快点学完,然后去玩三国杀呢?".这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,他 ...