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

ops/2024/9/24 7:14:03/

        在通过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>


http://www.ppmy.cn/ops/40265.html

相关文章

云计算的优势与未来发展

随着数字化转型的蓬勃发展&#xff0c;云计算作为信息技术应用的基础设施&#xff0c;逐渐成为企业的首选。云计算以其诸多优势和未来发展趋势&#xff0c;为企业带来了更高效、灵活和创新的IT解决方案&#xff0c;助力企业实现数字化转型和业务发展。 云计算的优势 首先&…

81.网络游戏逆向分析与漏洞攻防-移动系统分析-飞天遁地的实现与面向计算

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

Oracle 修改数据库的字符集

Oracle 修改数据库的字符集 alter system enable restricted session; alter database "cata" character set ZHS16CGB231280; alter database "cata" national character set ZHS16CGB231280; alter system enable restricted session; alter database…

渗透之sql注入----二次注入

目录 二次注入的原理&#xff1a; 实战&#xff1a; 第一步&#xff1a;找注入点 找漏洞&#xff1a; 注入大概过程&#xff1a; 第二步&#xff1a;开始注入 二次注入的原理&#xff1a; 二次注入是由于对用户输入的数据过滤不严谨&#xff0c;导致存在异常的数据被出入…

MySQL运维总结

以下是个人工作中用到的mysql运维总结。 基本运维命令 看下死锁的语句&#xff1a;show engine innodb status \G; 修改最大连接数&#xff1a;set global max_connections1400; 使用profile查询sql执行耗时&#xff1a; 1、set profiling 1 ; 启用profile , session级别的配…

Qt宏和关键字

Q_GADGET 这个宏是Q_OBJECT宏的弱化版本吧&#xff0c;不过它可以继续 使用属性机制、反射等特性&#xff0c;但是不能使用信号与槽QT_INCLUDE_COMPAT 兼容版本QT_BEGIN_NAMESPACE 防止命名污染Q_GUI_EXPORT 为了实现跨平台以及插件Q_FLAG(RenderHint)&#xff0c;Q_DECLARE_FL…

适合优化yaml文件编辑效果的.vimrc简单配置

yaml文件编辑最重要的就是缩进对齐&#xff08;一个tab键对应2个空格&#xff09;&#xff0c;最后加上添加横&#xff0c;纵线的效果 某xx.yaml文件或者xx.yml在vim编辑器中效果如图所示&#xff1a;&#xff1a; 简单的~/.vimrc文件配置内容&#xff1a; vim ~/.vimrc set…

JVM 类的加载过程详解

文章目录 1. 哪些类需要加载2. 类加载步骤2.1 装载2.1.1 这个过程都做了什么事2.1.2 类的模板对象2.1.3 二进制流获取方式2.1.4 Class 实例的位置2.1.5 数组类的加载有什么不同 2.2 链接2.2.1 验证2.2.2 准备2.2.3 解析 2.3 初始化 1. 哪些类需要加载 在 Java 中数据类型分为 …