1.Vue中的style标签上有一个特殊的属性scoped。当style标签拥有scoped属性时候,它的css样式只能作用于当前的Vue组件,防止组件之间污染。
2.PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,给css选择器额外添加一个对应的属性选择器,这种做法使得样式只作用于含有该属性的dom元素。
转译前
<style scoped>
.eg{
color:red;
}
</style>
<template>
<div class="eg">scoped测试</div>
</template>
转译后
.eg[data-v-5555666a] {
color: red;
}
<template>
<div class="eg" data-v-5555666a>scoped测试</div>
</template>
3.scoped穿透
普通css的样式穿透 使用>>>
//外层 >>> 第三方组件
.wrap>>> .el-input__inner{
height: 1rem;
}
sass和less的样式穿透 使用/deep/
//外层 /deep/ 第三方组件
.wrap /deep/ .el-input__inner{
height: 1rem;
}
其他方法
1.在vue组件中使用两个style标签,一个加scoped属性,一个不加scoped属性,把需要覆盖的css样式写在不加scoped属性的style标签中。
2.建一个css文件,里面写覆盖的css样式,在入口文件main.js 中引入。
3.在vue组件中不使用scoped属性。