小程序修改原组件样式无效

最新推荐文章于 2024-06-27 14:58:26 发布
最新推荐文章于 2024-06-27 14:58:26 发布
阅读量890 收藏
点赞数
分类专栏： 小程序造轮子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaosama/article/details/106234653
版权

我的天，新建了一个小程序，然后发现以前一直用的样式复制过来竟然变了样，这可为难了我大CV工程师了

结果查了资料才发现，是微信小程序的基础样式已经升级到v2版本了，在app.json中有一行

把style:v2删掉

"style":"v2"

一切恢复正常，又能继续复制粘贴之旅，真是开心

chaosama
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp微信小程序修改组件样式失效（解决方案）
weixin_53524596的博客
05-22 1224
uniapp修改微信小程序组件样式失效（解决方案）
微信小程序，自定义组件使用vant-weapp时，css样式覆盖不生效【已解决】
weixin_43878526的博客
09-15 1786
微信小程序，自定义组件使用vant-weapp时，css样式覆盖不生效
【微信小程序】修改uni-ui组件样式或子组件样式穿透失效的问题
最新发布
weixin_45887187的博客
06-27 910
基于“ 使用uniapp+vue开发微信小程序，项目中使用uni-ui组件，但是uni-ui的组件不能满足设计稿样式，于是尝试在页面中结合深度选择器修改样式，但无效。”这一问题的解决方案
微信小程序vant组件库使用修改css bug
qq_46376192的博客
04-09 313
使用穿透或者直接修改，都没有效果，在父组件上自定义一个类名再修改就可以了。
解决微信小程序自定义组件后样式失效不起作用的问题
热门推荐
数据大牛的博客
09-24 2万+
问题如图： 解决方式： js的Component()中添加： options: { addGlobalClass: true }, 至此发现样式生效了呢！ 我是一条随风飘摇的结尾符~~~~~ ...
【小程序】wxss样式在自定义组件不生效
曹小心的博客
04-11 9948
如题，做项目时遇到如下问题； 1：在component引入的文件wxss样式正常显示； 2：在pages的页面引入wxss不生效，在真机上正常显示 页面预览代码就不贴图了，应该明白意思; 解决办法1（不理解原理） 百度查出来的资料如下，但是不明白其原理 在开发者工具调试器中输入openVendor并回车； 开发者工具会打开一个文件夹，请删除这个文件夹下的所有文件； 关闭并重启开发者工...
微信小程序button组件自定义样式
03-29
background-color属性是修改背景颜色的，color是修改字体颜色的，这里注意：如果组件里面写 type='....'，修改背景颜色会无效，例如以下代码：   <!--修改背景颜色无效--> <button class='btn' bindtap='...
微信小程序-倒计时组件
06-24
在这个特定的案例中，我们关注的是一个“微信小程序-倒计时组件”。这个组件专门设计用于在微信小程序中实现时间倒计时功能，对于开发各种类型的应用场景非常有用。 首先，倒计时组件的核心功能是将服务器返回的...
小程序自定义分页选择组件
08-07
在微信小程序开发中，自定义组件是提升用户体验和代码复用性的重要手段。"小程序自定义分页选择组件"是一个专门为解决页面分页问题而设计的组件，它提供了灵活的配置选项，允许开发者根据实际需求定制分页显示效果。...
微信小程序swiper组件用法实例分析【附源码下载】
08-28
微信小程序 swiper 组件用法实例分析 微信小程序 swiper 组件是小程序开发中常用的滑块组件，用于实现滑块切换、图片轮播等效果。下面将通过一个实例来分析微信小程序 swiper 组件的用法和功能。 一、swiper 组件...
微信小程序picker组件两列关联使用方式
01-18
在使用微信小程序picker组件时候，可以设置属性 mode = multiSelector 意为多列选择，关联选择，当第一列发生改变时侯，第二列甚至第三列发生相应的改变。但是官方文档上给的只有三列数据关联改变，没有两列改变得，...
微信小程序 组件的样式修改
mossbaoo的博客
01-18 7431
 在开发微信小程序时，我们在使用一些组件的时候，总会遇到设计稿与官方提供的组件样式不太一样的情况，需要想办法修改组件的样式。目前只记录了两个组件的修改方法：switch、checkbox switch 1. 大小 /* swtich整体大小 */ .wx-switch-input{ width: 100rpx !important; height: 57rpx !importa...
微信小程序Style无效
huyuchaoheaven的专栏
03-13 4248
超过一行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
ant 修改组件默认样式属性
a_靖的博客
05-20 7728
得在 less 里面使用:global 修改，不能是css文件. :global 修改是全局生效的，所以建议修改之前要加上calssName="样式名"; 不是className={style.样式名} ，是直接写“”。 然后在调试工具找到你要修改的样式的属性名，如图: 来个单选框的样式修改代码，效果图： <Form.Item> <Radio.Group className="modal_Radio" defaultValu..
微信小程序中按钮样式无法设置解决方法
qq_43712409的博客
04-01 623
方法一：样式中加入!important，即：width: 100% !important; 方法二：标签内，使用style，即<button class="login-btn" bindclick="login" style="width:100%">登录</button> 方法三：删除app.json的配置"style": "v2"（不推荐） 微信小程序的button按钮设置宽度无效 ...
微信小程序子组件WXSS样式文件失效处理
xyphf的博客
05-13 9244
场景描述：父组件里面引用子组件，子组件样式失效 处理办法： 第一步：在全局app.wxss中引入子组件的样式，如 @import "pages/路径/子组件样式文件.wxss"; 第二步：在子组件的js文件里面添加上下列代码 options: { addGlobalClass: true, }, ...
小程序一点击view （父组件）如何改变相应的子元素的属性
qq_40817130的博客
06-29 2159
例如要实现这样的功能：不论点击最外部的view还是view里面的任何组件view里面的input的光标都能输入并且有多个view也就是每个view不能被上一个所覆盖wxml部分view id="outer" catchtap='pressView' style='display:flex;flex-direction:row;position:relative;'&gt;    &lt;input...
微信小程序全局配置文件app.json中window:backgroundColor“不生效”
Builder_Taoge的博客
03-13 2万+
标题中"不生效"带着引号你就知道大概不是真的不生效了，而是没搞明白这个属性到底代表的是哪一部分的背景色。从小程序官方文档中看到图1画框处这样的说明：图1.以为指的是小程序中所有页面的背景色，于是满心欢喜的设置了这个属性值，结果出现图2的样子：图2以为是页面的page.json覆盖了app.json这个全局配置里的window属性,但是例子中的两个页面都没做自己的配置...然后又想，难道是开发工具中...
小程序 iview 组件样式不能修改问题
jack_rose_me的博客
09-02 877
1、组件添加样式 2、组件样式引入 3、编辑页面使用到 编辑页面样式重写覆盖 .i-tab-bar{ background-image:linear-gradient(270deg,#F8A7650%,#EE6E35100%); border-radius:3rpx; height:6rpx; width:58rpx; bottom:10rpx; left:unset; } ...
uview u-button在小程序中自定义class样式无效
06-06
如果在小程序中自定义class样式无效，可能是因为在uview组件库中，u-button组件的样式是通过scoped样式来实现的。 scoped样式是一种只在当前组件内生效的样式，它的作用域被限制在当前组件内部，不会影响到其他组件。这种方式可以有效避免样式污染和样式冲突。 因此，如果要自定义u-button组件的样式，需要使用uview提供的自定义组件样式覆盖功能。具体步骤如下： 1. 在app.vue或者需要引入u-button的页面的vue文件中，引入u-button组件，并注册为自定义组件。 ``` <template> <view> <u-button class="my-button">自定义按钮</u-button> </view> </template> <script> import uButton from '@/components/u-button/u-button.vue' export default { components: { uButton } } </script> ``` 2. 在样式文件中，使用>>>或者/deep/来穿透scoped样式，覆盖u-button组件的样式。 ``` /* 在样式文件中 */ .my-button >>> .u-button { background-color: #ff9900; color: #fff; border: none; border-radius: 4px; font-size: 16px; padding: 10px 20px; } ``` 注意，>>>或者/deep/是用来穿透scoped样式的关键词，如果不加这个关键词，自定义样式将不会生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值