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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/836646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

扭蛋机小程序开发,探索扭蛋机市场的盈利趋势

近几年随着互联网科技的不断创新&#xff0c;扭蛋机又再一次进入到了大众的目光中&#xff0c;各种全新的“互联网扭蛋机”模式为大众打造了一个全新的扭蛋体验&#xff0c;市场规模也在不断扩大&#xff0c;为扭蛋机商家和创业者提供了巨大的发展空间。本文将介绍“互联网扭蛋…

夜莺监控(Nightingale)上线内置指标功能

Prometheus 生态里如果要查询数据&#xff0c;需要编写 promql&#xff0c;对于普通用户来说&#xff0c;门槛有点高。通常有两种解法&#xff0c;一个是通过 AI 的手段做翻译&#xff0c;你用大白话跟 AI 提出你的诉求&#xff0c;让 AI 帮你写 promql&#xff0c;另一种是平台…

巩固学习6

正则表达式 又称规则表达式&#xff0c;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a到z之间的字母&#xff09;和特殊字符&#xff08;称为“元字符”&…

Uniapp 自定义弹窗

布局 <view><view v-if"show" class"popup"><view class"popup-box"><view>支付方式:{{way}}</view><view>停车费用:{{money}}</view><view class"btn-box"><view class"ca…

Spring高手之路18——从XML配置角度理解Spring AOP

文章目录 1. Spring AOP与动态代理1.1 Spring AOP和动态代理的关系1.2 AOP基本术语 2. 通过XML配置实现Spring AOP2.1 添加Spring依赖2.2 定义业务接口和实现类2.3 定义切面类2.4 配置XML 1. Spring AOP与动态代理 1.1 Spring AOP和动态代理的关系 Spring AOP使用动态代理作为…

Python从0到POC编写--基础

什么是EXP、POC、CVE&#xff1a; 在某个漏洞出现的时候&#xff0c;会经常看到 exp啊&#xff0c;poc啊什么鬼的&#xff0c; 那么这些究竟是什么东西&#xff1f;&#xff1f; 余弦大大说&#xff1a; POC 即 Proof Of Concept&#xff0c;观点验证程序。 运行这个程序就…

【Linux系统编程】第十七弹---进程理解

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、进程的基本概念 2、描述进程-PCB 2.1、什么是PCB 2.2、为什么要有PCB 3、task_ struct 3.1、启动进程 3.2、创建进程…

基于微信小程序的预约挂号系统(源码)

博主介绍&#xff1a;✌程序员徐师兄、10年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447…

在Android Native层实现Try/Catch异常处理机制

文章目录 一、技术原理二、代码实现2.1 定义结构体保存线程的异常处理信息2.2 实现try/catch语义2.3 检查当前线程的异常处理信息2.4 设置信号处理函数2.5 信号处理和非局部跳转2.5.1 信号处理函数实现2.5.2 跳转回用户空间 2.6 清理异常处理的资源 三、使用示例3.1 示例3.2 如…

页眉如何插入横线

双击激活页眉——菜单栏——格式——边框和底纹——边框——应用于&#xff1a;段落——线型&#xff1a;选双线——预览&#xff1a;”点“下边框——确定。

Ubuntu20.04右键打不开终端

今天用virtualbox安装了ubuntu20.04 问题&#xff1a;右键打开终端&#xff0c;怎么也打开不了&#xff01; 点了也没反应&#xff0c;或者鼠标转小圈圈&#xff0c;然后也没有反应… 解决方法&#xff1a; 1、Ctrl Alt F6 先切换到终端访问界面 mac电脑 Ctrl Alt F6 …

letcode整数反转

整数反转 问题 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示例 示…

vuerouter声明式导航

声明式导航-跳转传参数 1.查询参数传参 语法&#xff1a;to /path?参数名值 2.对应页面组件接受传来的值 $router.query.参数名 2.动态路由传参 1.配置动态路由 2.配置导航连接 to/path/参数值 3.对应页面组件接收传递过来的值 #route.params.参数名 多个参数传递&…

情感感知OCR:整合深度学习技术提升文字识别系统的情感理解能力

摘要&#xff1a;随着深度学习技术的发展&#xff0c;文字识别&#xff08;OCR&#xff09;系统在识别准确率和速度上取得了长足的进步。然而&#xff0c;在处理文本时&#xff0c;仅仅依靠字符和词语的识别并不足以满足用户对信息的全面理解需求。本文提出了一种新颖的方法&am…

母亲节祝福html源码示例

创建一个完整的HTML页面&#xff0c;我可以为您提供一个简单的HTML模板&#xff0c;其中包含一些示例性的祝福语&#xff0c;并添加一些注释以帮助您理解如何扩展内容。 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8&qu…

Redis五大基本数据类型介绍及其使用场景

文章目录 1 String&#xff08;字符串&#xff09;应用场景 2 List&#xff08;列表&#xff09;应用场景 3 Set&#xff08;集合&#xff09;4 sorted set&#xff08;有序集合&#xff09;应用场景 5 hash&#xff08;哈希&#xff09;应用场景 Redis 是一个开源&#xff0c;…

彩信群发推广:四大革新优势,引领营销新时代!

在数字化营销日益盛行的今天&#xff0c;短信群发已成为我们生活中不可或缺的一部分。然而&#xff0c;您是否想过&#xff0c;除了传统的文本短信&#xff0c;还有一种更为丰富、更具吸引力的推广方式——彩信群发推广&#xff1f;彩信不仅融合了图片、文字、音频、动画和视频…

【漏洞复现】泛微OA E-Cology ln.FileDownload文件读取漏洞

漏洞描述&#xff1a; 泛微OA E-Cology是一款面向中大型组织的数字化办公产品&#xff0c;它基于全新的设计理念和管理思想&#xff0c;旨在为中大型组织创建一个全新的高效协同办公环境。泛微OA E-Cology ln.FileDownload存在任意文件读取漏洞&#xff0c;允许未经授权的用户…

轨迹规划 | 图解纯追踪算法Pure Pursuit(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 纯追踪算法原理推导2 自适应纯追踪算法(APP)3 规范化纯追踪算法(RPP)4 仿真实现4.1 ROS C仿真4.2 Python仿真4.3 Matlab仿真 0 专栏介绍 &#x1f525;附C/Python/Matlab全套代码&#x1f525;课程设计、毕业设计、创新竞赛必备&#xff01;详细介绍全局规划…

快速配置 Nginx 来实现 GPT 流式传输

目录 1. Nginx 参考配置2. Nginx 核心参数3. 其他参数 场景&#xff1a;代理 ChatGPT、代理各种 GPT 工具套壳等。 1. Nginx 参考配置 支持 GPT 流式访问的配置如下&#xff0c;请根据实际需求适当取舍即可&#xff1a; server {listen 80;server_name chat.test.com; # 绑…