uView 里面的u-flex 等样式丢失的快速解决办法

简单粗暴解决办法: 把样式在APP.vue重新下,不用任何/deep/!!

.u-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.u-row-center {
    justify-content: center;
} 

事情是这样子的,我在使用u-calendar组件的时候发现日历标题样式不对,便快速定位到是我们的布局样式没有被渲染出来

便在当前页面中重写了.u-flex样式(如下),然后在h5快速生效了.此时我是多么的开心啊,but....小程序没有生效

.u-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .u-row-center {
        justify-content: center;
    }

询问官方人员,官方回答说要用view标签把组件包裹起来去写,类似于下面那样

        <view class="dateCom">
            <u-calendar v-model="show" ref="calendar" @change="change" mode="range" safe-area-inset-bottom
                :start-text="startText" :end-text="endText" :range-color="rangeColor" :range-bg-color="rangeBgColor"
                :active-bg-color="activeBgColor" :btn-type="btnType">
            </u-calendar>
        </view>
// 样式:/deep/,::v-deep都尝试了
    .dateCom /deep/ .u-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .dateCom /deep/ .u-row-center {
        justify-content: center;
    }

我试了下,并没什么卵用,还被鄙视不会写代码,哭唧唧,没办法,谁让咱用的人家的组件呢?

然后我灵机一动,把它写成全局样式吧,虽然它本来也是全局样式!!!只是没生效而已?

接下来就把它放在app.vue里面了,果然有效~~~

.u-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.u-row-center {
    justify-content: center;
}