uniapp引用第三方组件样式无法穿透

        在通过uniapp编写小程序过程中发现,引用第三方组件库的样式无法穿透修改。微信小程序文档也给出对应的解决思路自定义组件样式穿透

组件样式隔离

默认情况下,自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况:

  • 指定特殊的样式隔离选项 styleIsolation 。
  • webview 渲染下,在 app.wxss 或页面的 wxss 中使用标签名选择器(或一些其他特殊选择器)来直接指定样式会影响到页面和全部组件。通常情况下这是不推荐的做法。
{
  "styleIsolation": "isolated"
}

自定义组件 JSON 中的 styleIsolation 选项从基础库版本 2.10.1 开始支持。它支持以下取值:

  • isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
  • apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
  • shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

使用后两者时,请务必注意组件间样式的相互影响。

如果这个 Component 构造器用于构造页面 ,则默认值为 shared ,且还有以下几个额外的样式隔离选项可用:

  • page-isolated 表示在这个页面禁用 app.wxss ,同时,页面的 wxss 不会影响到其他自定义组件;
  • page-apply-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式不会影响到其他自定义组件,但设为 shared 的自定义组件会影响到页面;
  • page-shared 表示在这个页面禁用 app.wxss ,同时,页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件,也会受到设为 shared 的自定义组件的影响。

其他不再推荐的配置方式

项目中如何使用

// Vue3写法

<script>
   export default {
       options:{
        styleIsolation:'shared', //解除样式隔离
       }
    
    }
    
</script>
<script setup>
import {ref} from "vue";
// ....下面正常编写代码

</script>

相关推荐

  1. uniapp引用组件样式无法穿透

    2024-05-13 14:52:03       4 阅读
  2. 解决pycharm无法引用的问题

    2024-05-13 14:52:03       22 阅读
  3. react经验14:动态修改组件样式

    2024-05-13 14:52:03       6 阅读
  4. libtff组件编译

    2024-05-13 14:52:03       10 阅读
  5. UI组件库的样式修改

    2024-05-13 14:52:03       35 阅读

最近更新

  1. .Net Core WebAPI参数的传递方式

    2024-05-13 14:52:03       0 阅读
  2. QT--气泡框的实现

    2024-05-13 14:52:03       0 阅读
  3. LeetCode 968.监控二叉树 (hard)

    2024-05-13 14:52:03       0 阅读
  4. leetcode热题100.完全平方数(动态规划进阶)

    2024-05-13 14:52:03       0 阅读
  5. leetcode328-Odd Even Linked List

    2024-05-13 14:52:03       0 阅读
  6. C 语言设计模式(结构型)

    2024-05-13 14:52:03       0 阅读
  7. v-if 与 v-show(vue3条件渲染)

    2024-05-13 14:52:03       0 阅读
  8. kafka防止消息丢失配置

    2024-05-13 14:52:03       0 阅读

热门阅读

  1. 安徽省环境保护工程专业技术资格评审标准条件

    2024-05-13 14:52:03       5 阅读
  2. Redis缓存的基本概念和使用

    2024-05-13 14:52:03       3 阅读
  3. QT作业5

    QT作业5

    2024-05-13 14:52:03      4 阅读
  4. C语言笔记13

    2024-05-13 14:52:03       4 阅读
  5. 商业时代杂志社投稿信箱邮箱

    2024-05-13 14:52:03       4 阅读
  6. hive自定义函数

    2024-05-13 14:52:03       4 阅读
  7. OpenCV 滤波方法总结

    2024-05-13 14:52:03       2 阅读