vue引用了第三方组件(如使用vue.ant.design
的组件时),需要在组件中局部修改第三方组件的样式,而又不想去除scoped
属性造成组件之间的样式污染。
1.stylus的样式穿透 使用 >>>
.wrapper >>> .ant-tabs-nav-scroll {
background-color: #ffffff;
padding-left: 24px;
}
2.样式穿透 使用/deep/
.wrapper /deep/ .ant-tabs-nav-scroll {
background-color: #ffffff;
padding-left: 24px;
}
3.使用全局样式表(不推荐)
- 一般情况下,引入
import '../global.css'
全局得样式 - 或者是直接在
app.vue
文件中写全局定义,下面是在全局得app.vue中写
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* 上面没加 scoped 属性,所以全局样式 */
.container.xx组件样式类 {
background-color: #ffffff;
padding-left: 24px;
}
</style>