一、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中修改
自定义组件样式中修改不一定生效
