# 一、CSS 变量

  通过观察,在小程序中使用 vant 组件库时,css 的引入是采用 CSS 变量的方式的。

官方文档:

Vant Weapp (opens new window)
CSS 变量 (opens new window)

# 1、代码示例

<style>
  /* 定义 */
  :root {
    --box-default-background: #23272e;
  }

  /* 使用 */
  .box {
    background-color: var(--box-default-background);
  }
</style>

# 2、局部有效

使用:

<van-button class="my-button"> 默认按钮 </van-button>

改变:

.my-button {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
}

# 3、全局有效

  • app.wxss
page {
  --button-border-radius: 10px;
  --button-default-color: #f2f3f5;
  --toast-max-width: 100px;
  --toast-background-color: pink;
}
更新于 : 7/8/2024, 10:21:14 AM