解决uniapp vue3版本封装组件后:deep()样式穿透不生效的问题

在 Vue 3 的CSS 中，使用:deep() 用于穿透样式作用域，也就是说可以通过deep深度穿透的方式，修改组件内的css样式。

语法推荐写法格式

:deep(.child) { 
  color: red;
}

以上写法是修改子组件中类名为child的样式。

问题复现

使用uniapp开发微信小程序，在页面中使用了uniapp的扩展组件uni-easyinput，该组件默认是圆角矩形的框，想要修改成圆角矩形框，该组件并没有属性对自身修改这个样式，所以采用:deep()穿透深度修改css样式，如下代码示例：

<view class="search-wrap">
	<view class="fixed">
		<uni-easyinput class="input" suffixIcon="search"
		v-model.trim="searchVal" 
		placeholder="请输入要搜索的产品..." 
		@iconClick="handleSearch" 
		@confirm="handleSearch"></uni-easyinput>
	</view>	
</view>

.fixed{
	background: #BDAF8D;	
	width: 100%;
	height: 90rpx;	
	:deep(.is-input-border){
		border-radius: 50px;
		border-color:#BDAF8D;
	}
}

通过以上css代码的修改，是可以修改到uni-esayinput组件内的输入框的样式的。

但是输入框在多个页面内都存在，想要将该输入框区域封装成一个组件，经过测试，在H5端封装是没有问题的，但是在微信小程序中，是不起作用的，那么该怎么解决那？

解决办法

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

defineOptions 定义组件选项的宏

options.styleIsolation: 'shared'

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

总结

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