Component-Level CSS Variables

tip

Standardized components unify implementations across PC, H5, and mini-program platforms while exposing a series of standard APIs to the public, including style APIs and custom CSS variables. All standardized components are marked with in the Component List.

Standardized components expose the CSS variables supported by the component in the documentation. Custom CSS variables can be used to uniformly modify the styles of components in the application.

Example

For example, to uniformly modify button styles, you can modify the CSS variables exposed by the buttons on the page.

.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);
}

(To ensure style modifications take effect, it is recommended to add an id selector before custom styles to increase CSS priority.)