小程序-vant修改vant actionsheet图标颜色

最新推荐文章于 2024-06-03 15:20:11 发布

desongzhang

最新推荐文章于 2024-06-03 15:20:11 发布

阅读量1.3k

点赞数

分类专栏： vant 文章标签：小程序 css css3

本文链接：https://blog.youkuaiyun.com/desongzhang/article/details/124941224

版权

vant 专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍如何在使用 vant 小程序组件库时，修改 actionsheet 组件中图标的颜色，通过深入理解 vant 的 CSS 类名机制，结合 CSS 样式覆盖原理，实现图标颜色的个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.transfer-detail {
  --action-sheet-close-icon-color: black;
}

源码：

.van-action-sheet__close {
  color: var(--action-sheet-close-icon-color, #c8c9cc);
  font-size: var(--action-sheet-close-icon-size, 22px) !important;
  line-height: inherit !important;
  padding: var(--action-sheet-close-icon-padding, 0 16px);
  position: absolute !important;
  right: 0;
  top: 0
}