一个Vue页面中使用了引用了两个不同的组件。样式互相冲突

分类：uni-app

组件样式隔离 uniapp

<view v-if="!isLogin">  
  <Login></Login>  
</view>  
<view  v-else>  
  <Scan></Scan>  
</view>

代码结构如上，引用了两个组件。Login组件内定一个样式：
<style>
page{
background-color: white;
}
</style>
Scan组件里面也定义了一个page样式
page{
background-color: black;
}
</style>

当渲染Scan组件的时候页面背景颜色不是设置的black。这是为什么

2025-01-09 00:56 负责人:无分享

2 个回复

一个页面就一个page；你组件引入到同一个页面肯定会冲突；你可以在Login组件里加个.login，在Scan组件里加个.scan样式

控制台打开就可以看到

要回复问题请先登录或注册