uni-app Vue3语法实现微信小程序样式穿透uview-plus框架

1 问题描述

我在用 uni-app vue3 语法开发微信小程序时，在项目中使用了 uview-plus 这一开源 UI 框架。在使用 up-text 组件时，想要给它添加一些样式，之前了解到微信小程序存在样式隔离的问题，也在uview-plus官网-注意事项中找到了相关解决方法，尝试后发现样式仍然不能失效。

<template><view class="container"><up-text text="标题"></up-text><up-text text="内容" class="content"></up-text></view>
</template><style scoped>.container ::v-deep .content {margin-top: 5px !important;border: 1px solid red;}
</style>

说明：由于不是自定义组件，所以不是配置styleIsolation参数的问题（以下不需要进行配置）

<script setup>
// 功能实现
</script>
// 配置自定义组件样式穿透
<script>
export default {options: {styleIsolation: 'shared'}
}
</script>

2 引发原因

在微信开发者工具查看页面 DOM 结构时发现，我给第二个 up-text 添加的类名 .content 没有生效。

3 解决方法

通过 up-text 内部类 .u-text 和伪类 :nth-child 结合使用定位到要添加自定义样式的元素。

<style scoped>.container ::v-deep .u-text:nth-child(2) {margin-top: 5px !important; border: 1px solid red;}
</style>
<!-- 备注：!important 用于覆盖 up-text 默认的 margin: 0 样式 -->