ConfigProvider 全局配置

引入

通过以下方式来全局注册组件，更多注册方式请参考。

Vant 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 类名上存在以下变量：

  1. .van-button--primary {
  2.   color: var(--van-button-primary-color);
  3. }

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

  1. /* 添加这段样式后，Primary Button 会变成红色 */
  2. :root {
  3.   --van-button-primary-background-color: red;
  4. }

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

  1. import { ref } from 'vue';
  3. export default {
  5.     const rate = ref(4);
  6.     const slider = ref(50);
  8.     // themeVars 内的值会被转换成对应 CSS 变量
  9.     // 比如 sliderBarHeight 会转换成 `--van-slider-bar-height`
  10.     const themeVars = {
  11.       rateIconFullColor: '#07c160',
  12.       sliderButtonWidth: '20px',
  13.       sliderButtonHeight: '20px',
  14.       sliderActiveBackgroundColor: '#07c160',
  15.       buttonPrimaryBorderColor: '#07c160',
  16.       buttonPrimaryBackgroundColor: '#07c160',
  17.     };
  20.       rate,
  21.       slider,
  22.       themeVars,
  23.     };
  24.   },
  25. };

修改变量

由于 CSS 变量继承机制的原因，两者的修改方式有一定差异：

  • 基础变量只能通过 root 选择器 修改，不能通过 ConfigProvider 组件 修改。
  • 组件变量可以通过 root 选择器 和 ConfigProvider 组件 修改。

变量列表

下面是所有的基础变量：

你可以在各个组件文档底部的表格中查看组件变量。

API

Props