mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 14:39:16 +08:00
docs: add custom style faq (#8844)
This commit is contained in:
parent
c983079ab8
commit
9e031b74f4
@ -189,6 +189,34 @@ app.use(Vant);
|
|||||||
|
|
||||||
## 常见问题
|
## 常见问题
|
||||||
|
|
||||||
|
### 如何自定义 Vant 组件的样式?
|
||||||
|
|
||||||
|
#### 1. 主题定制
|
||||||
|
|
||||||
|
Vant 提供了主题定制的能力,可以对组件样式进行统一修改,详见[定制主题](#/zh-CN/theme)章节。
|
||||||
|
|
||||||
|
#### 2. 覆盖默认样式
|
||||||
|
|
||||||
|
如果主题定制不能满足你的需求,也可以通过**自定义样式类**来覆盖默认样式,参考下面的示例:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<van-button class="my-button">按钮</van-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/** 覆盖 Button 最外层元素的样式 */
|
||||||
|
.my-button {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 覆盖 Button 内部子元素的样式 */
|
||||||
|
.my-button .van-button__text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
### 在 HTML 中无法正确渲染组件?
|
### 在 HTML 中无法正确渲染组件?
|
||||||
|
|
||||||
在 HTML 中使用 Vant 组件时,你可能会碰到部分示例代码无法正确渲染的情况,比如下面的用法:
|
在 HTML 中使用 Vant 组件时,你可能会碰到部分示例代码无法正确渲染的情况,比如下面的用法:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user