Ant Design 5.x 升级后，整体依赖的配置大大减少，更容易引入。

移除 less

Ant Design 5.0 中移除了 less 的使用，改为 css-in-js，这意味着引入它不再需要进行一堆的配置，更容易在更多环境下引入，也不会污染项目原因的全局样式了。

记录一下原有的 4.0 项目升级的过程：

• 移除 craco，恢复使用 react-scripts
• 移除脚手架中对 less 的设置
• 移除 babel-plugin-import
• 移除对 antd 的 less 文件的引用

定制主题

改为通过设置 theme，传入 token 去设置。

<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#333333',
      colorPrimaryBg: '#fafafa',
      controlOutline: 'rgb(51,51,51,.2)',
      colorLink: '#FFC725',
      colorLinkActive: '#d9a116',
      colorLinkHover: '#ffd94f',
    },
  }}
  locale={zhCN}
>
</ConfigProvider>

使用自定义变量信息

通过 useToken 可读取到当前的变量信息，这样就可以使用到其他的 js 组件中。

import { theme } from 'antd';
const { useToken } = theme;

let { token } = useToken();

token 里的变量值也是自定义主题中的可设置值，发现哪里不合适进行一下设置即可。

在 CSS 变量中共享主题样式

也可以通过 style 标签，把这些变量导入到 css 变量中：

const CssTheme: React.FC = () => {
  let { token } = useToken();
  const globalVars = `html {
    --ant-color-primary: ${token.colorPrimary};
    --ant-color-primary-hover: ${token.colorPrimaryHover};
    --ant-control-outline: ${token.controlOutline};
    --ant-color-link: ${token.colorLink};
    --ant-screen-sm: ${token.screenSM};
    --ant-color-link-active: ${token.colorLinkActive};
    --ant-color-link-hover: ${token.colorLinkHover};
  }`;
  return <style>{globalVars}</style>;
};
export default CssTheme;

这样在原有使用 less 变量的项目样式文件中，就可以改为对应的 CSS 变量了，改动量小。