uni-app 3.12 style scoped 无效 [未解决]

uni-app 3.12 style scoped 无效 [未解决]

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：10

HBuilderX类型：Alpha

HBuilderX版本号：3.1.2

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：redmi4

页面类型：nvue

打包方式：离线

示例代码：

父组件：

<template>  
    <view class="view">  
        <!-- 引入子组件 -->  
        <m-sub></m-sub>  
    </view>  
</template>  
<style scoped>  
.view {  
    flex: 1;  
    background-color: #fff;  
}  
</style>

子组件

<template>  
    <view class="view"></view>  
</template>  
<style scoped>  
.view {  
    height: 200rpx;  
    background-color: #000;  
}  
</style>

更多关于uni-app 3.12 style scoped 无效 [未解决]的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

大概猜到原因了 style 标签现在要加上 scoped ，不然样式会向子组件传递，如果是这样请在更新中详细说明，修正以前文档

更多关于uni-app 3.12 style scoped 无效 [未解决]的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我在源码视图的"nvueCompiler" : “uni-app”,下添加了"nvueStyleCompiler": “uni-app”，为什么我重启之后运行还是不支持后代选择器，兄弟选择器？

回复 StarSky: 我觉得应该重新编译

又实验了下 style 标签加上 scoped 还是会被子组件继承

能否具体说下

已修改说明，请测试

帅哥咋样了？

回复 汉中李: 收到

单独开的一个工程，测试环境纯净

问题确认，已加分，后续优化

现在优化好了吗？为什么我的代码里scoped还是失效的

效率真低 还没解决

这个问题还挺严重的吧 20220608还没有解决？

无聊过来看看还没解决啊，我已经转Flutter一年了你们加油，搞APP的别入坑了

啊，还是没解决，这效率

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式

在uni-app 3.12版本中，nvue页面的scoped样式确实存在一些兼容性问题。针对您的情况，建议尝试以下解决方案：

  1. 检查HBuilderX版本是否最新，建议升级到3.1.2以上版本

  2. 对于nvue页面，可以尝试以下替代方案：

  • 使用class命名空间来避免样式冲突
  • 在父组件中通过props传递样式变量
  1. 临时解决方案：
<style>
/* 去掉scoped */
.view {
    height: 200rpx;
    background-color: #000;
}
</style>
  1. 如果必须使用scoped样式，可以尝试添加!important：
.view {
    height: 200rpx !important;
    background-color: #000 !important;
}
回到顶部