uni-app小程序之覆盖uni-ui组件的默认样式
组件的class
通过调试器找到具体的class
样式位置和写法
方法一、全局修改
只有在APP.vue上面写样式 且加!important才生效。此时全局的此组件都会使用此样式,不灵活
<style>
.uni-section {
background-color: #562b2b !important;
}
</style>
方法二、单独设置
此方法可单独在组件里面灵活设置样式。
1.在组件内script加入options,进行样式隔离
options:{
styleIsolation:'shared'
},
自定义组件 JSON 中的 styleIsolation 选项从基础库版本 2.10.1 开始支持。它支持以下取值:
isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)
2.组件内设置样式
::v-deep .uni-section{
background-color: #ececec;
}
由于无法解释的神圣旨意,我们徒然地到处找你;你就是孤独,你就是神秘,比恒河或者日落还要遥远。。。。。。