Vue 中样式穿透 /deep/
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>