zoukankan      html  css  js  c++  java
  • 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 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式 。

  • 相关阅读:
    深拷贝浅拷贝
    mock demo
    django 2. 配置信息
    django 1. 入门基础
    java 12. 方法重载
    java 11. 设计规约
    java 10. 参数返回值问题
    java 9. 面向对象之方法设计
    java 8. 面向对象之属性
    java 7. 多维数组
  • 原文地址:https://www.cnblogs.com/wangmaoling/p/9827428.html
Copyright © 2011-2022 走看看