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

1 问题描述

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

html 复制代码
<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参数的问题(以下不需要进行配置

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

2 引发原因

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

3 解决方法

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

html 复制代码
<style scoped>
  .container ::v-deep .u-text:nth-child(2) {
    margin-top: 5px !important; 
    border: 1px solid red;
  }
</style>
<!-- 备注:!important 用于覆盖 up-text 默认的 margin: 0 样式 -->
相关推荐
百思可瑞教育29 分钟前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育
jingling5553 小时前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
百思可瑞教育9 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
项目題供诗12 小时前
微信小程序开发教程(八)
微信小程序·小程序
Q_Q196328847516 小时前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育17 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e18 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张19 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
拼图2091 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
不知名的前端专家1 天前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty