uniapp - css样式设置scoped

1.App.vue（样式层级高）定义样式就可以覆盖子组件或者父组件，无论有没有设置scoped关键字

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>
 
<style>
    /*每个页面公共css */
    .title{
        color: #333333 !important;
    }
</style>

2.子组件设置scoped

子组件设置scoped会增加私有后缀，为了保证它的唯一性不会父组件导入的css覆盖掉，但App.vue导入的css会覆盖掉它（特别注意）

<template>
    <view>
        <view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
            点击hover效果
        </view>
        <!-- <button type="primary" @click="onSend">传值给onB组件</button> -->
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                msg: 'hello,onB'
            };
        },
        methods: {
        },
        mounted() {
        }
    }
</script>
 
<style lang="scss" scoped>
    .title {
        color: #F0AD4E;
    }
</style>

3.父组件如何穿透子组件，覆盖它的样式->穿透“>>>和/deep/”

index.vue

<template>
    <view class="content">
        <onA></onA>
    </view>
</template>
 
<script>
    import onA from '@/components/onA.vue';
    export default {
        data() {
            return {
            }
        },
        components:{
            onA
        },
        onLoad() {
        },
        mounted() {
             
        },
        methods: {
 
        }
    }
</script>
 
<style>
    >>>.title {
        font-size: 36rpx;
        color: #007AFF;
    }
     
    /deep/.title{
        font-size: 36rpx;
        color: #f00;
    }
</style>

onA.vue

<template>
    <view>
        <view style="padding: 12px 15px;border-bottom: 1rpx solid #007AFF;" class="title">
            点击hover效果
        </view>
        <!-- <button type="primary" @click="onSend">传值给onB组件</button> -->
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                msg: 'hello,onB'
            };
        },
        methods: {
        },
        mounted() {
        }
    }
</script>
 
<style lang="scss">
    .title {
        color: #F0AD4E;
    }
</style>