Vue中解决冲突覆盖问题

Posted 2022-12-30 BennuCTech

前言

在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;