uniapp某个页面内部style修改组件样式不起作用，必须要去app.vue中修改才能生效的解决办法

最新推荐文章于 2024-07-15 06:48:06 发布
最新推荐文章于 2024-07-15 06:48:06 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 报错问题解决 uniapp学习笔记 Vue学习笔记 文章标签： vue.js uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44912902/article/details/129601984
版权
在uniapp开发中，若需修改特定页面的组件样式而非全局，可以利用vue的`::v-deep`选择器来实现。通过在相应的页面组件内使用`::v-deep`包裹class，可以成功地修改该页面独有的组件高度、颜色等样式，而不会影响到其他页面。
摘要由CSDN通过智能技术生成

问题描述

在uniapp使用过程中会遇到修改组件样式问题，比如我想修改某个组件的高度颜色等等，但是又不是修改全局，只想修改某个页面中的组件样式。如果要修改全局的直接去app.vue里面设置就好了，但是在单个页面中怎么设置呢？

在这里插入图片描述

修改失败

在这里插入图片描述

问题解决

使用vue提供的::v-deep包裹class即可修改成功

在这里插入图片描述

令人作呕的溏心蛋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序/uniapp：class和style不生效的问题
彭世瑜的博客
07-04 596
非常重要：小程序端不支持 classObject 和 styleObject 语法。
UniApp中动态绑定Style数值失败 | 动态绑定宽高无效（各属性正常但唯独效果无法实现）
Cucci | IT猿的自白
03-14 2091
坑，真坑，不报错、没联想，值还给照常赋，就是不让你用，无语透了，大神别喷，毕竟刚开始，此文写给同样摸不着脑袋的朋友。
使用uniapp开发修改样式无效修改方案
ZhouXin_0819的博客
06-28 2248
如果是picker 和 picker-view组件元素定位不到 在微信开发者工具中有些标签会转译成别的标签就要对标签的样式进行重写。在微信开发者工具如果是picker 和 picker-view组件元素定位不到，要去查看官方文档有没有配置样式的配置项。我们通常会遇到这种情况在H5和App修改了有效果在微信开发者工具却没有效果,只需要加入如下配置（与data同级）
Uniapp开发小程序日常踩坑(一)
qq_43592392的博客
04-09 158
uniapp 小程序 踩坑
uni-app编译小程序样式的条件编译不执行
z17864151193的博客
06-23 5563
最近在用uni-app编译小程序的时候发现样式没有条件编译 之前的代码是这样写的 <style lang="scss" scoped> page { //#ifdef H5 padding-top: var(--status-bar-height); //#endif } .page-header { // #ifdef H5 padding-top: calc(13rpx + var(--status-bar-height)); // #endif
记uniapp总动态:style无法用带参数的computed属性问题
domyself918的专栏
01-06 915
v-for里面的组件呢，我要根据不同的item配置不同的style,于是有了这样的写法。小感悟：写代码不要太固执，打不过就加入，主打一个曲线救国。然后一运行 ，就给报错。这样，就可以了，主要。
解决vue项目中某一页面不想引用公共组件app.vue的问题
10-14
总的来说，要解决Vue项目中某一页面不想引用公共组件的问题，可以通过动态控制组件的`v-if`或`v-show`属性，结合路由信息来实现。同时，可以在组件内部监听路由变化，根据路由状态来决定组件的显示或隐藏，以满足...
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
10-16
主要介绍了vue App.vue里的公共组件改变值触发其他组件或.vue页面监听,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue在App.vue文件中监听路由变化刷新页面操作
10-14
主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
.vue文件 加scoped 样式不起作用的解决方法
08-27
scoped 样式不起作用的解决方法 scoped 属性是 Vue 中的一个重要概念，用于限定样式的作用域，使得样式不影响其他组件。但是，如果不正确地使用 scoped 属性，可能会导致样式不起作用的情况。本文将详细介绍 scoped...
uniapp框架-侧边导航分类,适合商品分类页面组件-uni-app项目源码-vue语法格式.zip
05-21
UniApp开发前景分析：专业视角引领未来 随着移动互联网的迅猛发展，跨平台应用开发框架UniApp以其独特的优势，展现出广阔的开发前景。 UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和...
【uni-app】深度作用选择器解决修改checkbox样式无效问题
weixin_43655896的博客
02-16 8273
uni-app表单多项选择器需要使用内置组件checkbox，具体使用见官网链接，如下： checkbox - uni-app官网 (dcloud.io) 官方给出的默认样式是这样的： ​ 现在需要修改样式为这样： ​ 于是开始修改： <checkbox-group @change="checkboxChange"> <label class="radio"> <checkbox :value="item+''"/> <
uniapp微信小程序修改组件样式失效（解决方案）
weixin_53524596的博客
05-22 1322
uniapp修改微信小程序组件样式失效（解决方案）
uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况
热门推荐
qq_39879542的博客
10-19 2万+
uniapp微信小程序样式问题
uniapp中通过选择器修改组件内部的样式不生效问题
最新发布
张小勇的博客
07-15 339
scoped属性，由于其编译机制的特殊性，实际上每个页面的样式在最终打包构建时会被隔离到该页面自身的上下文中。意味着你直接用选择器修改组件内部的某个view的样式,不能生效,必须要哪个穿透方式才能修改例如下方是可以的。而在其他vue项目中,如果有全局的样式文件,就不会自带scoped属性了,需要自己决定是否使用。
uniapp 修改引入组件样式 使用/deep/、::v-deep、＞＞＞不生效 解决
weixin_44286765的博客
01-12 1577
【代码】uniapp 修改引入组件样式 使用/deep/、::v-deep、＞＞＞不生效 解决。
解决uniapp修改内置组件样式，在微信中不生效问题
小二来一只葫芦
04-26 1064
解决uniapp修改内置组件样式，在微信中不生效问题
关于uniapp修改内部样式小程序无效的解决方法
weixin_42947972的博客
03-19 1728
但是在我要修改样式的使用直接用穿透发现,小程序样式是不生效的。标签中实际会帮我们默认加scoped的。
在uniapp框架开发中如何让某些css样式只在手机app上面才生效
06-08
在uni-app框架中，可以使用 `@media` 和 `uni-platform` 结合使用来实现只在手机App中应用特定的CSS样式。 具体实现步骤如下： 1. 在 `App.vue` 文件中的 `style` 标签中定义一个只在手机App中生效的样式： ```css @media only screen and (min-width: 768px) { /* 在PC端应用的样式 */ } @media only screen and (max-width: 767px) { /* 在手机端应用的样式 */ .only-app { /* 只在手机App中应用的样式 */ } } ``` 2. 在需要应用该样式的组件中，使用 `uni-platform` 类名来限制只在手机App中应用该样式： ```html <template> <view class="only-app uni-platform--app-plus"> <!-- 只在手机App中应用的内容 --> </view> </template> <style> .only-app { /* 在手机端应用的样式 */ } </style> ``` 这样，只有在手机App中运行时，`.only-app` 类中的样式才会生效，从而实现只在手机App中应用特定样式的效果。如果需要在其他平台或者运行环境中应用不同的样式，可以使用不同的 `uni-platform` 类名来定义样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

令人作呕的溏心蛋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值