vue样式穿透

vue样式穿透

　　今天我在写表格样式的时候，想要让antDesign的<a-table>表格组件的单元格内容垂直居中，可是我怎么都改不过来。一开始我以为是权重不够，于是加了！important，结果还是没有变化，表格中 td 的vercal-align一直是baseline。通过一番网上搜索之后，我找到了解决办法：通过vue的样式穿透来改变表格的默认样式。

　　根据不同的样式文件，有不同的vue样式穿透写法。

1. stylus的样式穿透：三个右尖括号（>>>）
   使用方法：外层类 >>> 目标类{ 样式列表}
   例如：
   

   .ant-table-body >>> .v-center {
   　　display:table-cell;
   　　vercal-align: middle;
   }

    

2. sass和less的样式穿透：/deep/
   使用方法：外层类 /deep/ 目标类{样式列表}
   例如：
   

   .ant-table-body /deep/ .v-center{
       display: table-cell;
       vertical-align: middle;
   }        

    

3. 通用样式穿透：::v-deep
   使用方法：::v-deep 目标类{样式列表}
   例如：
   

   ::v-deep .v-center{
     　display: table-cell;
     　vertical-align: middle;
   }