组件级 CSS 变量

提示

标准化组件统一了 PC 端、H5 端和小程序端实现，同时对外开放支持一系列标准 API，支持样式 API 和自定义 CSS 变量等。标准化组件都在组件列表中添加的标注。

标准化组件在组件文档中开放了该组件支持的 CSS 变量，可以通过自定义 CSS 变量来统一修改应用中组件的样式。

示例

例如，需要统一修改按钮的风格，可以统一修改页面中的按钮暴露的 CSS 变量

.wd-btn {
  --wd-btn-border-radius: 0.3rem;
  --wd-btn-color-brand: var(--wd-color-success);
  --wd-btn-color-brand-hover: var(--wd-color-success-hover);
  --wd-btn-color-brand-active: var(--wd-color-success-active);
  --wd-btn-color-brand-focus: var(--wd-color-success-focus);
  --wd-btn-color-brand-disabled: var(--wd-color-success-disabled);
}

(为了保证样式修改一定会生效，建议在自定义样式前增加一个 id 选择器来提升 CSS 优先级)

组件级 CSS 变量

示例​

示例