自定义了一个tabbar，通过hidden来控制隐藏与否，可是组件1（compo）的page样式会溢出到组件2（compo2），并且修改组件2的page样式也依然被组件1的page样式覆盖。请大神看看为什么？谢谢！（用了styleIsolation:'isoloated' 没有效果）

compo

compo
------------------
page{
  background-color: yellow;
}

compo2

compo2
------------------
page{
  background-color: red;
}

page的WXML

<view hidden="{{mIndex==1?false:true}}"><compo /></view>
<view hidden="{{mIndex==2?false:true}}"><compo2 /></view>
<view hidden="{{mIndex==3?false:true}}"><compo3 /></view>

<view class="box">
  <view class="para {{mIndex==1?'active':'default'}}" bindtap="btn">恭</view>
  <view class="para {{mIndex==2?'active':'default'}}" bindtap="btn2">喜</view>
  <view class="para {{mIndex==3?'active':'default'}}" bindtap="btn3">发</view>
</view>

------------------------------------------------------------------------------
Page({
  data: {
    mIndex: 1
  },

  btn() {
    console.log('btn')
    this.setData({
      mIndex: 1
    })
  },

  btn2() {
    console.log('btn2')
    this.setData({
      mIndex: 2
    })
  },

  btn3() {
    console.log('btn3')
    this.setData({
      mIndex: 3
    })
  },
})
------------------------------------------------------------------------------
.box{
  position: fixed;
  display: flex;
  bottom: 0;
  height: 100rpx;
  width: 100%;
  border-top: 1rpx solid black;
  z-index: 1;
  background: white;
}

.para{
  text-align: center;
  flex:1;
  line-height: 100rpx;
}

.active{
  color: red;
}

.default{
  color: black;
}