组件文档提供了好几种方式来修改样式，根据实践，整理如下

## 一、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

```html

<view class="custom-component">

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

```

此时在组件内容修改样式好像不起作用

组件配置需要开启样式选项

```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中使用自定义组件

pages/home.wxml

```html

<view class="page-home__article">

<custom-component></custom-component>

</view>

```

在外层加一个作用域，可直接修改vat组件样式

pages/home.wxss

```css

.page-home__article{

  // 简单的例子，隐藏下划线

 .van-tabs__line {

     display: none;

   }

}

}

```

## 总结

vant组件样式修改方式：

- 全局样式app.wxss中修改

- 页面样式page.wxsss中修改

- 自定义组件样式中修改不一定生效