小程序页面嵌套自定义组件无法修改vant-weapp样式的问题

这篇具有很好参考价值的文章主要介绍了小程序页面嵌套自定义组件无法修改vant-weapp样式的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述:

一般情况下,小程序想修改vant组件的样式只需要找到对应vant组件的类名,可以自由的在自己的wxss文件中进行修改。

但当我们在自定义组件内引入vant元素,再将自定义组件内嵌到小程序某个页面中的时候,此时,自定义组件内的vant元素的样式就无法修改了。

我试了各种方法,!important /deep/ #shadow custom-class...都无效。

比如,我现在自定义了ctrl-device组件,并在组件内使用了vant的侧边栏,此时,我想修改侧边栏选中项的边框,如图,官方默认边框为红色

vantweapp custom-class无效,vant-weapp,小程序,前端,javascript

 文章来源地址https://www.toymoban.com/news/detail-601666.html

vantweapp custom-class无效,vant-weapp,小程序,前端,javascript

我现在要修改它为绿色,此时,如果我在ctrl-device组件的wxss文件内选中vant标签去修改,是无法生效的。尽管我们通过wxml结构已经找到了该元素边框的class类以及他的嵌套位置。

vantweapp custom-class无效,vant-weapp,小程序,前端,javascript

 

到了这里,关于小程序页面嵌套自定义组件无法修改vant-weapp样式的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序子页面自定义tabbar组件

    有时候微信小程序会遇到代码合并,就比如把B小程序代码迁移到A小程序,要使得B作为A小程序的一个子页面子功能。因为本身小程序都有tabbar,原来B也有,这时候就要给B子功能自定义一个tabbar底部导航栏。(注意,这个不是微信小程序自定义tabBar,不需要app.json中设置一个

    2024年02月08日
    浏览(51)
  • 微信小程序自定义tabBar以及图标-使用vant-weapp

    微信官方文档介绍 官方文档 1、在小程序根目录下创建custom-tab-bar文件夹,并创建以下文件。 custom-tab-bar/index.js custom-tab-bar/index.json custom-tab-bar/index.wxml custom-tab-barr/index.wxss 2、修改custom-tab-bar/index.js(清除初始化的内容) 3、修改custom-tab-bar/index.json(引入vant 组件) 4、修改custom-tab-

    2024年02月11日
    浏览(59)
  • 微信小程序怎么修改自定义组件中的样式

    在微信小程序中我们经常要用到自定义组件,但是有时我们因为引用的地方不同可能组件的一些样式也要修改,比如颜色,高度,宽度等来适合不同的页面,有没有办法来修改自定义组件中的样式呢,很显然是有的,我们要用到externalClasses方法。 一.自定义子组件: component

    2024年02月12日
    浏览(67)
  • 原生微信小程序使用 wxs;微信小程序使用 vant-weapp组件

    在这里插入图片描述 操作顺序 :文档地址 如果使用 typescript 需要操作步骤3,否则不需要操作 2.1 在根目录下 操作 2.2 安装版本 2.3 构建包 - 详情-勾选使用 npm 2.4 使用 vant 组件

    2024年02月11日
    浏览(74)
  • 【微信小程序】自定义组件布局会议OA其他页面(附源码)

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的

    2024年02月08日
    浏览(48)
  • 微信小程序入门与实战之电影页面与实战自定义组件

    Movie自定义组件包含三部分:图片、标题和图片,评分可以再单独写一个组件。 实现代码: css代码中我们通过title里面的属性设置文字省略效果,为了能够直观地感受到效果我们必须给container设置宽度,当文字超过宽度的时候就会显示省略号,效果如下图所示: 首先在自定义

    2024年02月08日
    浏览(51)
  • 小程序之修改引用的vant组件样式(包括自定义组件中的vant样式)

    今天在写小程序的时候,刚好遇到,以前遇到解决了之后忘记记录,今天记录下! 一般组件的基础样式会跟ui设计稿有些出入,就得改动! 使用vant的话,官方就有提供方法,比如复选框 我在项目中用custom-class居多,设置根节点后就能操作; 比如修改复选框禁用时的样式 如

    2024年02月11日
    浏览(60)
  • uniapp小程序自定义签名面板组件,小程序页面引用实现横屏签字(亲测有效)

    需求: uniapp小程序自定义签字面板组件, canvas手写签名画板, 小程序页面引用实现横屏签字 实现效果: 在项目中创建components文件夹, 在文件夹下创建my-sign组件, 组件下创建my-sign.vue和index.js my-sign.vue组件代码: index.js代码: 在pages.json中添加\\\"pageOrientation\\\": “landscape”, pageOrientation 设

    2024年02月05日
    浏览(44)
  • uniapp 微信小程序 纯js文件中引入自定义modal组件(无需所有页面手动引入组件)

    工具:uniapp 开发端:微信小程序 其他:uview 2.0 场景:接口请求统一封装中需要对接口返回token失效的情况做modal显示,引导用户退出小程序,我的想法是将modal的默认confirm按钮替换成小程序自带的退出方法: 这样用户点击确认按钮就能退出小程序,因此uni.showModel不满足需求

    2024年02月09日
    浏览(69)
  • 微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)

     注意:下载完成后,需要删除 miniprogram_npm 目录后,重新构建 npm。 注意:ts编写的话,方法中使用this,需要在参数中定义this: any,否则会提示错误 引入onLoad()方法中引入createStoreBindings将store上的方法和属性绑定到页面中 在unOnLoad()方法中销毁destroyStoreBindings() 页面中使用:

    2024年02月16日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包