组件文档提供了好几种方式来修改样式，根据实践，整理如下
## 一、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中修改
- 自定义组件样式中修改不一定生效
