Migrating Component Code

The component demo below is from the ProCard's Static component in procomponents.

Migration Steps

1. Replace Entry Point

Change the style file from index.less to style.ts, and add the hooks const { styles } = useStyles() import. Combine the styles and the default container class in the JSX layer. This way, the JSX layer code is updated.

2. Replace Style Code

Change the style code from less syntax to createStyles syntax. First, rename index.less to style.ts, then add the following at the top:

Then place the original code inside the css function.

3. Adjust Hierarchy

Since we use css`` to provide scope, the nested level styles need to be adjusted as follows:

4. Replace Less Variables with Tokens and JS Variables

The effect after migration is shown below. It can be seen that after a relatively low migration cost, the new component writing method already supports the ability to respond to themes by default and gains all the dynamic capabilities after cssinjs transformation.

New Component Writing Scheme

See: Component Development