AntDesign样式穿透解决方案

业务效果

// 直接放在style标签中 不要放在<style lang="scss" scoped>标签中
<style>
.ant-table.ant-table-bordered .ant-table-title {
    background: #f3f3f3;
}
</style>

上述方式会导致整个项目中该组件样式发生改变，要想只在当前组件生效

      .right-content {
        margin-top: 20px;
        height: 100vh;
        // 案例
        // Vue2中穿透方式
        & >>> .ant-steps-vertical   .ant-steps-item .ant-steps-item-title{
          color: red;
        }
        // Vue3中穿透方式
              & :deep(.ant-tabs-tab) {
        color: yellow;
        border: 1px solid red;
        border-radius: 15px;
      }
      & :deep(.ant-tabs-tab-active) {
        color: red;
      }
      }

参考： http://www.ppmy.cn/news/5467.html