Vant ActionSheet 如何自定义取消按钮样式？

怡冉🍀 提问于 2026-03-26 10:03:20 阅读 62

组件

我在用 Vant 的 ActionSheet 组件，想改一下底部“取消”按钮的颜色和字体大小，但文档里没找到相关属性。试过传 cancel-text 只能改文字，没法改样式。

也尝试在外层加 class 然后写 CSS 覆盖，但发现取消按钮是动态插入到 body 里的，scoped 样式根本不起作用，全局样式又怕影响其他地方。有没有靠谱的办法？

<van-action-sheet
  v-model="show"
  :actions="actions"
  cancel-text="放弃操作"
  @cancel="onCancel"
/>

Vant

我来解答赞 6 收藏

反馈

2 条解答

Dev · 瑞娜 Lv1

直接这样，给取消按钮加个特定的类名，然后写全局样式时带上这个类名，确保不和其他地方冲突。在 cancel-text 外面包一层 span，给它加个自定义 class，像这样：

<van-action-sheet

  v-model="show"

  :actions="actions"

  >

  <template #cancel-text>

    <span class="custom-cancel">放弃操作</span>

  </template>

</van-action-sheet>

再写 CSS 样式：

.van-action-sheet__cancel .custom-cancel {

  color: red;

  font-size: 18px;

}

2026-03-31 09:08

Des.欧辰 Lv1

我之前也遇到过这种坑，Vant 的 ActionSheet 确实有点烦人。你可以在 mounted 钩子里用 document.querySelector 找到取消按钮然后直接改样式，这样不会影响全局。代码大概长这样：

mounted() {

  setTimeout(() => {

    let cancelButton = document.querySelector('.van-action-sheet__cancel');

    if (cancelButton) {

      cancelButton.style.color = 'red';

      cancelButton.style.fontSize = '18px';

    }

  }, 100);

}

记得加个定时器延迟下，因为 ActionSheet 是异步渲染的。这办法虽然有点 hack，但确实管用。

2026-03-26 10:04