【前端】[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变了,小程序没变,则需要重新编译项目,我这边测试有时候小程序无法实时展现样式效果。

相关推荐
web守墓人44 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
为风而战1 小时前
uni-app X APP在线升级 解决【uni-upgrade-center-app】未配置uni-upgrade-center 问题
uni-app
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
雪碧聊技术5 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
@Dream_Chaser5 小时前
uniapp页面间通信
uni-app
Liudef066 小时前
儿童趣味记忆配对游戏
css·游戏·css3
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js