微信小程式：VantWeapp元件Tab 标簽預設樣式修改

元件文檔提供了好幾種方式來修改樣式，根據實踐，整理如下

## 一、Page中使用vant元件

pages/home.wxml

```html

<view class="page-home__article">

<van-tabs active="{{ active }}" bind:change="onChange">

  <van-tab title="标簽 1">内容 1</van-tab>

  <van-tab title="标簽 2">内容 2</van-tab>

  <van-tab title="标簽 3">内容 3</van-tab>

  <van-tab title="标簽 4">内容 4</van-tab>

</van-tabs>

</view>

```

在外層加一個作用域，可直接修改vat元件樣式

pages/home.wxss

```css

.page-home__article{

  // 簡單的例子，隐藏下劃線

 .van-tabs__line {

     display: none;

   }

}

}

## 二、自定義元件中使用vant元件

components/custom-component/custom-component.wxml

<view class="custom-component">

此時在元件内容修改樣式好像不起作用

元件配置需要開啟樣式選項

```json

{

 "component": true,

 "styleIsolation": "apply-shared"

參考: [自定義元件 / 元件樣式隔離](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB)

在page中使用自定義元件

<custom-component></custom-component>

## 總結

vant元件樣式修改方式：

- 全局樣式app.wxss中修改

- 頁面樣式page.wxsss中修改

- 自定義元件樣式中修改不一定生效