【前端】[vue3] [uni-app] 组件样式击穿:deep

我是在开发uni-app时测试的思路,大家可以借鉴一下。

我这边测试的是uni组件,但是我觉得即便你用element-plus之类的,样式击穿的思路都相同。

我自定义了一个全局样式scss文件,并引入到了项目中。(如图)

利用vue3 中的 deep 方式击穿,我这边测试了三个击穿方式,主要用了uniApp的uni-icon组件进行演示:

(如图,我项目中用了 uni-icon 组件,一个是type=right 一个是type=download-filled):

  1. 第一种:在自定义的全局样式文件中,针对icon的type=download-filled 进行color变色:

    --效果:项目中icon组件所有type=download-filled的图标变色了,而其它type的图标没变色--

  2. 第二种:在当前页面文件中,针对icon的type=right 进行color变色:

    --

--效果:只针对当前页面,并且style标签中加上了 【scoped】。 左侧图标没变色,右侧向右箭头图标 变色了,--

  1. 第三种:在自定义全局样式文件中,定义全局所有icon组件的color变色,无论type是多少,统一变成一种颜色:

    --效果:无论type是多少,颜色全都变了--

注意:如果你和我一样在开发uni-app项目,在做这种全局样式变更时,如果修改完发现h5变了,小程序没变,则需要重新编译项目,我这边测试有时候小程序无法实时展现样式效果。

相关推荐
kura_tsuki8 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo8 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端
码界奇点8 小时前
Spring Web MVC构建现代Java Web应用的基石
java·前端·spring·设计规范
yinuo9 小时前
UniApp + Vue3 使用 marked 报错:SyntaxError /[\p{L}\p{N}]/u 问题分析与解决
前端
大前端helloworld9 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试
小墨宝10 小时前
web前端学习LangGraph
前端·学习
南囝coding10 小时前
React 19.2 重磅更新!这几个新特性终于来了
前端·react.js·preact
Dajiaonew10 小时前
Vue3 + TypeScript 一篇文章 后端变全栈
前端·javascript·typescript
广州华水科技10 小时前
GNSS与单北斗变形监测一体机在基础设施安全中的应用分析
前端
kakacc:10 小时前
SpringBoot+Hutool+Vue实现导出
java·vue.js·spring boot