学习记录 Unaipp vue3 样式穿透在小程序不生效

前言

我们在进行css样式编写的时候，难免会使用到第三方的组件库，但是这个时候组件里面的样式不是我们想要的内容时我们就要手动进行修改，但是普通的编写方式不会让样式生效这个时候就需要使用:deep(){} 来进行样式穿透，但是在微信小程序中，样式的穿透就无效了怎么回事呢？

在uniapp编写公共组件时，我使用了uniapp的扩展增强input组件，这个时候我使用了:deep()对样式进行了一个穿透给他加上了圆角。

此时在h5中进行测试是没有问题的，但是一进入到微信小程序中查看，就变成了下面这样

实例代码:

<view class="search-wrap">
		<view class="fixed">
			<uni-easyinput class="input" suffixIcon="search" :value="keyword" @input="handleInput"
				placeholder="请输入要搜索的产品..." @iconClick="handleSearch" @confirm="handleSearch"></uni-easyinput>
		</view>
		<view class="block"></view>
	</view>

	.search-wrap {
		.fixed {
			background: $uni-color-primary;
			padding: 10rpx 32rpx;
			position: fixed;
			width: 100%;
			height: 45px;
			top: v-bind(headHeight);
			left: 0;
			z-index: 8000;

			:deep(.is-input-border) {
				border-radius: 50px;
				border-color: $uni-color-primary !important;
			}
		}

		.block {
			height: 45px;
		}
	}

解决办法

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

defineOptions 定义组件选项的宏

options.styleIsolation: 'shared'

• 微信小程序特有的配置，用于控制组件的样式隔离行为。
• styleIsolation 是小程序组件的一个选项，决定组件样式是否受外部影响或影响外部。
• 'shared' 表示允许样式穿透

总结

options.styleIsolation为编译到微信小程序的组件配置样式共享（允许父子组件样式相互影响）。