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