vant组件主题定制自定义样式实践记录

使用vant组件中可以通过文档中提供的css变量进行自定义样式。

以vant的button组件为例，修改它的基础变量。

<template>
  <div class="container">
    <van-button type="primary">主要按钮</van-button>
  </div>
</template>
<style lang="less" scoped>
:root :root{
  --van-button-primary-background: red;
}
</style>

css变量存在继承关系，组件变量会继承父级基础变量的样式，需要使用 :root 选择器或 ConfigProvider 组件的 global 模式来修改基础变量。否则，组件变量可能会无法正确继承基础变量。

根标签选择器修改样式不生效

根标签选择器样式不生效因为style标签的scoped的原因，scoped所在的style标签，样式只能应用到当前组件的模板内容，不会影响其他组件或者全局DOM元素。

这个解决办法是去除scoped，修改的样式就会生效，但是全局会被影响。不去除scoped，考虑给button组件的DOM节点类添加样式，注意元素的层级关系。

<style lang="less" scoped>
.container{
  width: 100%;
  .van-button--primary{
    // --van-button-primary-background: red;
    background: red;
  }
}
</style>

注释代码也生效。

通过ConfigProvider覆盖不生效

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

  <div class="container">
    <van-config-provider
      :theme-vars="{ primaryColor: 'red' }"
      theme-vars-scope="global"
    >
      <van-button type="primary">主要按钮</van-button>
    </van-config-provider>
  </div>

通过浏览器控制台可以看到van-config-provider层已经有了样式，只是按钮还是保持了自己的样式，并没有继承。

文档说的组件样式会继承最近的父级的基础样式。。。emm，最后通过浏览器控制台发现并不需要额外使用van-config-provider包裹目标组件，vant组件的根标签自己就包裹了一个，修改这个的基础样式，其子元素就可以继承了～

<template>
  <div class="container">
       <van-button type="primary">主要按钮</van-button>
   </div>
 </template>

总结

关于vant组件主题定制自定义样式，可以在没有scoped的style标签中通过根标签选择器修改基础样式，或者给vant自动注入的ConfigProvider设置基础样式，之后它的子组件就可以继承修改的样式了。