Vue3为什么在组件内使用组件，Web端可以正常显示样式，微信小程序却不行呢

我使用的 Vue3版本，hx版本是 4.66

MyTable组件demo  
<template>  
    <view class="my-table">  
        <!-- 默认插槽 -->  
        <slot></slot>  
    </view>  
</template>  

<script>  
    export default {  
        name: "MyTable"  
    }  
</script>  

<style lang="scss"></style>  

MyTableRow组件demo  
<template>  
    <view class="my-table-row">  
        <!-- 默认插槽 -->  
        <slot></slot>  
    </view>  
</template>  

<script>  
    export default {  
        name: "MyTableRow"  
    }  
</script>  

<style lang="scss"></style>  

MyTableItem组件 demo  
<template>  
    <view class="my-table-item">  
        <!-- 默认插槽 -->  
        <slot></slot>  
    </view>  
</template>  

<script>  
    export default {  
        name: "MyTableItem"  
    }  
</script>  

<style lang="scss">  
</style>  

MyCard组件demo  
<script setup>  
    // 引入组合式API  
    import {  
        defineProps  
    } from 'vue'  
</script>  

<template>  
    <view class="my-card">  
        <slot></slot>  
    </view>  
</template>  

<script>  
    export default {  
        name: "MyCard",  
    }  
</script>  

<style lang="scss">  
    .my-card {  
        position: relative;  
        margin-bottom: 32rpx;  
        padding: 32rpx;  
        width: 100%;  
        border-radius: 26rpx;  
        background-color: $uni-bg-color;  
        box-sizing: border-box;  
        box-shadow: 0 0 4rpx 0 $uni-bg-color-mask;  
    }  
</style>  

System页面demo  
<!--  -->  

<template>  
    <!-- 月基本工资 -->  
    <my-card class="system-base">  
        <MyTable class="my-table">  
            <MyTableRow class="my-table-row">  
                <MyTableItem class="my-table-item">月基本工资</MyTableItem>  
                <MyTableItem class="my-table-item">2360</MyTableItem>  
                <MyTableItem class="my-table-item">元/月</MyTableItem>  
            </MyTableRow>  
            <MyTableRow class="my-table-row">  
                <MyTableItem class="my-table-item">小时工资</MyTableItem>  
                <MyTableItem class="my-table-item">20</MyTableItem>  
                <MyTableItem class="my-table-item">元/小时</MyTableItem>  
            </MyTableRow>  
        </MyTable>  
    </my-card>  

    <!-- 月基本工资 -->  
    <my-card class="system-work">  
        <MyTable class="my-table">  
            <MyTableRow class="my-table-row">  
                <MyTableItem class="my-table-item">平时加班</MyTableItem>  
                <MyTableItem class="my-table-item">1.5</MyTableItem>  
                <MyTableItem class="my-table-item">20</MyTableItem>  
            </MyTableRow>  
            <MyTableRow class="my-table-row">  
                <MyTableItem class="my-table-item">周末加班</MyTableItem>  
                <MyTableItem class="my-table-item">2.0</MyTableItem>  
                <MyTableItem class="my-table-item">20</MyTableItem>  
            </MyTableRow>  
            <MyTableRow class="my-table-row">  
                <MyTableItem class="my-table-item">节假日加班</MyTableItem>  
                <MyTableItem class="my-table-item">3.0</MyTableItem>  
                <MyTableItem class="my-table-item">20</MyTableItem>  
            </MyTableRow>  
        </MyTable>  
    </my-card>  
</template>  

<script>  
    export default {  
        name: 'System'  
    }  
</script>  

<style lang="scss"></style>  

我将MyTable相关的样式放在了 app.vue 样式内了   
<script>  
    export default {  
        // onLaunch: function() {  
        //  console.log('App Launch')  
        // },  
        // onShow: function() {  
        //  console.log('App Show')  
        // },  
        // onHide: function() {  
        //  console.log('App Hide')  
        // }  
    }  
</script>  

<style lang="scss">  
    /*每个页面公共css */  
    page {  
        padding: 32rpx;  
        height: 100vh;  
        background-color: #e2e2e4;  
        box-sizing: border-box;  
        font-size: 28rpx;  
        overflow-y: auto;  

        image {  
            vertical-align: middle;  
        }  

        // icon  
        .icon {  
            width: 40rpx;  
            height: 40rpx;  
        }  

        // 自定义表格样式  
        .my-table {  
            border: 1px solid #000;  
            border-radius: 24rpx;  

            .my-table-row {  
                display: flex;  
                border-top: 1px solid #000;  

                // 第一个取消顶部边框  
                &:first-child {  
                    border-top: none;  
                }  

                // 内容  
                .my-table-item {  
                    flex: 1;  
                    height: 80rpx;  
                    line-height: 80rpx;  
                    text-align: center;  
                    border-left: 1px solid #000;  

                    // 第一个取消顶部边框  
                    &:first-child {  
                        border-left: none;  
                    }  
                }  
            }  
        }  
    }  
</style>