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

相关推荐
蛋黄蛋黄4 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙4 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员7 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特7 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
qiyue778 分钟前
AI编程专栏(一)- 评估AI编程工具对编程语言支持情况
前端·ai编程
MR_发9 分钟前
万字实现带@和表情包的输入框
vue.js·typescript
多啦C梦a10 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
bo5210011 分钟前
解决跨域的几种种方法, 你都知道几种?
前端·面试·浏览器
拾光拾趣录11 分钟前
无状态协议下的用户状态管理:Web应用如何保持用户登录态
前端·http·https