Vue 中樣式穿透 /deep/

樣式穿透使用2中場景 [ IE11可以使用,火狐83可以使用,chrome87可以使用]

01) 父組件樣式影響到子組件

02) 組件內css影響到引入第三方樣式 [ 以引入 Ant-Design-Vue 為例]

父組件demo:

<template>
    <div id="study01">
        <div>
            <loginCloseBtn style="margin-left: 10px;"></loginCloseBtn>
        </div>
        
        <a-button> 父組件按鈕father   ant-design-vue</a-button>
    </div>
</template>

<script>
    /* 這是ant-design-vue */
    import Vue from 'vue'
    import Antd, { message,Select } from 'ant-design-vue'  //這是ant-design-vue
    import 'ant-design-vue/dist/antd.css'
    Vue.use(Antd);
    /* 這是ant-design-vue */
    //喜歡組件
    import loginCloseBtn from '../../components/close-btn.vue'
    export default {
        name: "study01",
        components: {
            loginCloseBtn
        },
    }
</script>

<style lang="scss" scoped>
    /deep/.ant-btn{ /* 影響第三方引入的css  */
        color: red;
    }
    /deep/#children_css { /* 影響子組件樣式 */
        width: 100px;
        height: 100px;
        background-color: #ff6b81;
    }
</style>

字組件demo

<template>
    <div>
       <div>我是子組件</div>
        
        <div id="children_css">我的樣式在父組件控制</div>
        <a-button> 子組件按鈕children   ant-design-vue</a-button>
    </div>
</template>