ant-design / antd-style

css-in-js library with antd v5 token system
https://ant-design.github.io/antd-style/
MIT License
187 stars 29 forks source link

🧐[Questions or need help] Using with react 18 #150

Open vyachsed opened 3 weeks ago

vyachsed commented 3 weeks ago

🧐 Problem description

Antd can be used with react >=16.9.0, but antd-style with react >=18 (according to peerDependencies). Because of this, the libraries can't be used together if, for example, a project uses react 17.0.2 (as in my case, upgrading to react 18 is not possible at the moment due to the size of the project). I find this distinction strange. After doing some research, I found out that it is actually due to the new react api - the startTransition function. When I try to use antd-style with react 17, I get an attempted import error in CRA. Could you please do something so that antd-style can work with the same version of react as antd? Theoretically, you could try the following trick and change peerDependencies:

💻 Sample code

import React from 'react';
import type { TransitionFunction } from 'react';
// hack for react <18 compatibility
const { startTransition } = React;

export const safeStartTransition = (func: TransitionFunction) => {
  if (typeof startTransition === 'function') {
    startTransition(func);
  } else {
    func();
  }
};

🚑 Other information

I've tried this hack with CRA, and it works because I changed the esm import to destructuring the object