How do I customize the style of Vant components?

1. Theme customization

Vant provides the ability to customize the theme based on CSS variables, and can uniformly modify the component style. For details, see ConfigProvider Global Configuration component.

2. Overriding the default style

If the theme customization does not meet your needs, you can also override the default style using a custom style class, see the following example:

<template>\n  <van-button class="my-button">Button</van-button>\n</template>\n\n<style>\n  /** Override the style of Button's root element */\n  .my-button {\n    width: 200px;\n  }\n\n  /** Override the style of Button's child elements */\n  .my-button.van-button__text {\n    color: red;\n  }\n</style>\n

Components not rendering correctly in HTML?

When using Vant components in HTML, you may encounter situations where some sample code may not render correctly, such as the following usage:

<van-cell-group>\n  <van-cell title="cell" value="content" />\n  <van-cell title="cell" value="content" />\n</van-cell-group>\n

This is because HTML does not support self-closing custom elements, so syntax like <van-cell /> is not recognized. Using a closing tag can work around this problem:

<van-cell-group>\n  <van-cell title="cell" value="content"></van-cell>\n  <van-cell title="cell" value="content"></van-cell>\n</van-cell-group>\n

Self-closing custom elements are available in single-file components, string templates, and JSX, so this problem doesn\'t arise.

Can\'t trigger the click feedback on iOS?

This is because iOS Safari does not trigger the :active pseudo-class by default. The solution is to add an empty ontouchstart attribute to the body tag:

<body ontouchstart="">\n  ...\n</body>\n

Reference link: stackoverflow - :active pseudo-class doesn\'t work in mobile safari

Why is there no Select component?

Select is a widely used component on the desktop, but its interactive form is not suitable for the mobile device.

On the mobile side, we recommend using the Picker selector component instead.

Is it supported in uni-app?

All components of Vant are implemented based on the Vue framework and are not adapted to uni-app, so the availability of each component under uni-app is not guaranteed.

If you encounter problems using Vant in uni-app, it is recommended to provide feedback to uni-app.

FAQ