网站设计服务合同我赢seo
在 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为编译到微信小程序的组件配置样式共享（允许父子组件样式相互影响）。