Style API

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 external style APIs to address the issue where users cannot customize the internal structure styles of components via the low-code editor.

Example

Overriding Global Component Styles

If you want to affect the styles of a specific type of component in an application, such as writing styles for all button components, you can refer to the following steps.

1. Open the code editor in the editor and locate the global style file
2. Refer to the style APIs exposed by components to write style code. Note that to ensure the style APIs take effect, you need to prepend the #wd-page-root selector before the component's style APIs.

Example:

#wd-page-root .wd-btn {
  border-color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}

#wd-page-root .wd-btn:hover {
  background-color: #0c0096;
}

#wd-page-root .wd-btn.is-disabled {
  background-color: #888;
}

#wd-page-root .wd-btn__text {
  color: cyan;
}

Writing Styles for Specified Platforms

Standardized components provide corresponding class names when rendering on different platforms, allowing you to write styles for specified platforms.

For example, the button component provides unique class names for three platforms.

• The button root element .wd-pc-btn can be used to style buttons for the PC platform.
• The button root element .wd-h5-btn can be used to style buttons for the H5 platform.
• The button root element .wd-mp-btn can be used to style buttons for the mini-program platform.

For example, if you wish to make buttons occupy the full screen width by default on mobile, you can write the following styles separately for buttons on the H5 and mini-program platforms.

In this example, we override the styles for all buttons on mobile and mini-program platforms, while the PC platform remains unaffected.

#wd-page-root .wd-mp-btn,
#wd-page-root .wd-h5-btn {
  width: 100%;
}

Overriding Styles for Specific Components

If you only want to affect the styles of certain components, there are two approaches:

Overriding the Styles of a Specific Component Using :scope

:scope` represents the root node of a component.

When you only want to override the style of a specific component without affecting other components of the same type, you can follow these steps:

1. First, click on the component, then click the CSS button in the right-hand style panel.

2. Add the following CSS code in the opened code editor

:scope {
  /* Specific styles for this component */
  font-size: 20px;
}

/* Change the background color to red on pc */
:scope.wd-pc-btn {
  background-color: red;
}

/* The background color on h5 is blue */
:scope.wd-h5-btn {
  background-color: blue;
}

/* The background color on Mini Program is green */
:scope.wd-mp-btn {
  background-color: green;
}

/* You can also combine CSS pseudo-classes to write hover styles */
:scope:hover {
  /* The background turns purple when hovering */
  background: purple;
}

Overriding Styles of Some Components Using class

In the WeDa low-code platform, the method of overriding component styles via class is achieved through custom CSS classes. Here are the steps to guide you through the process:

1. First, locate the component you want to modify in the WeDa editor.

2. Click the component and locate the "className" option in the right-hand style panel.

3. In the "className" input box, enter the custom CSS class name you want to use. For example: custom-button.

4. Open the style file in the code editor. Then add the following code:

/* Adding the #wd-page-root selector is also to ensure it takes effect */
#wd-page-root .custom-button {
  /* Add the styles you want to override here */
  background-color: red; /* For example: change the button's background color to red */
  color: white; /* For example: change the button's text color to white */
}

5. Save the CSS file, then return to the WeDa editor to view the effect. You can also apply this CSS class to components requiring similar effects to achieve style reuse.

Mini Program Notes

Due to mini program platform restrictions, note the following when writing styles. For details, refer to the documentation