vue3 uniapp小程序、APP :deep()穿透样式

在做小程序时由于设计稿与uni提供的组件有所出入，所以想着使用deep进行样式穿透

本苦逼程序员也是费了老鼻子劲  /deep/    ::v-deep    :deep() 配合各种选择器都用了个遍也没有效果

后来上网查了一下发现是使用了vue3，需要在script里加入如下代码：

// deep 在vue3中不生效
defineOptions({
	options: { styleIsolation: 'shared' }
});

而vue3穿透样式要用:deep()

写法如下，给原本的section增加了一点间距和圆角，并可通过noHeader去掉section-header的填充以隐藏header

html:

css：

效果如下

修改前：

修改后：

效果非常棒，由于我们还有发布APP平台的需求，于是信心满满的去打包APP

结果到手机上一看，天塌了

section的样式、数字输入框右侧的间距、radio全乱了（没用模拟器测一下就打包也是心大）

那只能回来调一下了，由于模拟器也不好调样式，运行到浏览器，发现效果一样，那就很方便了

通过观察发现小程序端之所以有效是因为组件原本样式是在咱们写的样式内部，所以刚才的后代选择器才能生效

而观察浏览器中的样式发现，组件的样式竟然与我们所写的样式处于同一级

（uniapp你看你都干了什么，你这样我们如何才能对抗产品经理！）

那我们改成同级试一下：

就正常了，也是无语了

最后用uniapp的条件编译改一下

小程序平台使用后代选择，小程序以外的平台使用同级，既然是同级那我们也可以直接使用自己定义的样式

/* #ifdef MP */
:deep(.uniSection .uni-section) {
/* #endif */
/* #ifndef MP */
:deep(.uniSection) {
/* #endif */
	width: 702rpx;
	margin: 0 auto 20rpx;
	border-radius: 8rpx;
	background: #ffffff;
	box-sizing: border-box;
}

而radio框靠左的问题是因为组件自带了一个flex：1，我们把他设为默认值顶替掉flex：1

/* #ifdef MP */
:deep(.form-radio .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text) {
/* #endif */
/* #ifndef MP */
:deep(.form-radio) {
	flex: initial;
}
:deep(.form-radio .checklist-group .checklist-box .checklist-content .checklist-text) {
/* #endif */
	color: #333333 !important;
}

最后，吃一堑长一智，运行到模拟器试一下：

完美

总结一下：

    1.vue3中使用样式穿透要加一个

        defineOptions({
            options: { styleIsolation: 'shared' }
        });

    2.vue3的穿透写法:deep()

    3.uniapp编译到小程序、APP端组件的结构不一样，要注意调整。