草庐IT

【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案

莫诺库诺 2023-04-19 原文

在使用uniapp框架开发微信小程序时，使用到了uni-ui的uni-table组件。由于需要修改表头的背景色，于是乎在微信开发工具中使用调试工具审查元素获取其class名：

尝试直接在页面中修改样式：

.uni-table-th {
	background-color: #ddd;
}

结果无效。于是尝试使用深度选择器

::v-deep .uni-table-th {
	background-color: #ddd;
}

依然无效。然后查询微信平台官方开发文档得知，微信中的组件存在组件样式隔离，即自定义组件的样式只受到自定义组件 wxss 的影响。
此时如果想在其它页面影响到该组件的样式，需要在施加影响的组件中加入选项：

  options: {
    styleIsolation: 'shared', // 解除样式隔离
  }

shared表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

根据以上设定，我们可以在想要改变uni-ui组件的组件中加入该选项，样式就正常被修改了。

但其实，还有更方便的改法：直接全局修改。当然最好加上容器以免污染其它组件的样式，除非这是一个通用样式。
由于我的修改是应用于所有该类型组件的，所以我选择了全局修改。
具体来说我的做法是，在全局样式文件global.scss中加入想要修改的样式：

.uni-table-scroll {
	&.table--border {
		border: 1px solid $border-color;
		border-bottom: 1px solid $border-color;
	}
	.uni-table-tr:nth-child(odd) {
		background-color: $table-odd-td-bgcolor;
	}
}

然后在uni.scss中引入即可：

@import "@/static/scss/common/global.scss";

总结

如果发现直接修改uni-ui或其它第三方组件的样式无效，有以下两种方法可以尝试：

  1. 在选项中加入styleIsolation: 'isolated'来达到解除样式隔离的目的；
  2. 全局修改。
uniappuni-uispanclasstoken微信小程序uicss

有关【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  3. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  5. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  6. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信

  7. 微信小程序订餐系统 - 2

    对传统的餐饮商家来说，小程序很好地解决了餐厅线下线上连接的问题，在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序，商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式：1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同

  8. ruby-on-rails - 如何使用 grape swagger ui 传递数组？ - 2

    我在下面定义了api端点:paramsdorequires:ids,type:Array,desc:'Arrayofgroupids'end我无法从Swagger生成的UI传递数组。如果我输入[1,2,3,4]或ids%5b%5d=1&ids%5b%5d=2&ids%5b%5d=3然后两者都无效.如果我使用数组调用spec中的api，它就可以工作。我的客户想尝试Swagger的整个api，所以我想要一个适用于SwaggerUI的解决方案。 最佳答案 我对所有情况的解决方案:paramsdorequires:ids,type:Arra

  9. jquery - Sprockets::FileNotFound - 找不到文件 'jquery.ui' - 2

    这个问题已经被问过几次了，但我尝试了提供的解决方案，但仍然没有帮助，所以我提出了一个新问题。gem文件gem'jquery-ui-rails'按照建议，我将gem放在:assets组之外Application.css~*=require_self*=requirejquery.ui*=requirebootstrap-datepicker*=requirejquery.timepicker*=require_tree.*/RailsAssetPipeline根据列出的顺序加载Assets。在这里，我把它排在列表的第2位。Application.css.scss*=require_sel

  10. jquery - 'jquery-rails' 和 'jquery-ui-rails' 可以在一个项目下管理吗？ - 2

    我有一个Rails应用，使用Rails5.1.6和ruby2.3.5p376我的Gemfile中有这两个gemgem'jquery-rails','~>4.3.3'gem'jquery-ui-rails','~>6.0.1'在show.html.erb中我有以下内容:$(function(){$("#datepicker").datepicker();});Date:在application.js中//=requirejquery-ui//=requirejquery//=requirerails-ujs//=requireturbolinks//=require_tree.在appl

随机推荐