前言
在vue中为了防止样式污染,使用scope来限制样式只在组件内生效。那么就有一个问题了,如果在当前组件内使用了另外一个组件,但是又想对另外一个组件的样式进行覆盖该怎么办?
比如我们使用Ant Design的tab组件,如下:
<a-tabs class="right-bottom-container">
<a-tab-pane key="1" tab="小组">...</a-tab-pane>
<a-tab-pane key="2" tab="评论区">
...
</a-tab-pane>
</a-tabs>
但是tab组件原本的样式并不符合我们的要求,比如字体和颜色,那么我们如何对这些样式进行覆盖?
deep
用deep来进行覆盖,如下:
.right-bottom-container {
height: 66.7%;
background-color: white;
:deep(.ant-tabs-content) {
height: 100%; //每个tab的内容面板的高度都充满父布局
}
:deep(.ant-tabs-nav) {
margin: 0px; //去掉tab和内容面板之间的间隙
}
:deep(.ant-tabs-tab) {
//设置tab的字体和颜色
margin-left: 20px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #3a4961;
&.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: #47b3ff; //设置active的颜色
}
}
}
:deep(.ant-tabs-ink-bar) {
background: #47b3ff; //设置tab底部指示条的颜色
}
}
这样就可以将原样式覆盖。
当然在网上你还可能看到如下的写法:
/deep/ .ant-tabs-nav
或
:deep .ant-tabs-nav
这些都是之前的语法,目前已经不推荐使用了,如果你在项目中使用了当编译的时候就会看到提示你已经过时,换成:deep()。
扩展
deep后面可有多个层级,比如:
.emoji-carousel{
...
:deep(.slick-dots li.slick-active button) {
width: 16px;
}
}
这样可以精准的进行覆盖。
除了上面的写法,还写在外层,如下:
.emoji-carousel {
...
}
.emoji-carousel :deep(.slick-dots) {
position: relative;
height: auto;
bottom: 5px;
}
.emoji-carousel :deep(.slick-dots li button) {
width: 8px;
height: 8px;
border-radius: 4px;
background-color: #ffc722;
}
.emoji-carousel :deep(.slick-dots li.slick-active button) {
width: 16px;
}