微信小程序：VantWeapp组件Tab 标签默认样式修改

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

一、Page中使用vant组件

pages/home.wxml

<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

.page-home__article{
   // 简单的例子，隐藏下划线
  .van-tabs__line {
      display: none;
    }
 }
}

二、自定义组件中使用vant组件

components/custom-component/custom-component.wxml

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

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

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

{
  "component": true,
  "styleIsolation": "apply-shared"
}

参考: 自定义组件 / 组件样式隔离

在page中使用自定义组件

pages/home.wxml

<view class="page-home__article">
	<custom-component></custom-component>
</view>

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

.page-home__article{
   // 简单的例子，隐藏下划线
  .van-tabs__line {
      display: none;
    }
 }
}

总结

vant组件样式修改方式：

• 全局样式app.wxss中修改
• 页面样式page.wxsss中修改
• 自定义组件样式中修改不一定生效