Laughing
UniApp中修改某个页面的uView样式
06/21
本文最后更新于2024年06月21日，已超过88天没有更新。如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！
最近在使用UniApp开发微信小程序时，使用了uView UI框架，在进行列表展示时，使用了Cell单元格组件。但是在使用的时候，感觉Cell单元格的字体较大，想调整小一点。
在Vue开发中，我们知道都是用depp进行样式穿透，但是在UniApp开发小程序时，如果我们添加以下代码
::v-deep {
.u-cell {
padding: 10rpx 32rpx !important;
font-size: 20rpx !important;
line-height: 54rpx;
font-family: cursive;
}
}可以尝试运行一下，你会发现没有任何效果。原因就在于小程序组件样式是隔离的。
如果我们想解除样式隔离，可以在父组件（基本就是我们自己的页面）与methods同级的位置，添加以下代码
options: {
styleIsolation: 'shared', // 解除样式隔离
},对于组件的styleIsolation有三个可选值：
| 可选值 | 说明 |
|---|---|
| isolated | 默认值，组件内外的样式互不影响 |
| apply-shared | 接收外部（包括父页面和全局）的样式，但组件内的样式不影响外部。 |
| shared | 接收外部样式，同时组件内的样式会共享到页面 |
版权属于：
香草物语
本文链接：
https://www.xiangcaowuyu.net/wechat/modify-the-uview-style-of-a-page-in-uniapp.html（转载时请注明本文出处及文章链接）
作品采用：
