diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
index 9a93813a2c..9e2530e811 100644
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -4,7 +4,7 @@ import {
   createCache,
   extractStyle,
   legacyNotSelectorLinter,
-  logicalPropertiesLinter,
+  NaNLinter,
   parentSelectorLinter,
   StyleProvider,
 } from '@ant-design/cssinjs';
@@ -168,7 +168,7 @@ const GlobalLayout: React.FC = () => {
     <DarkContext.Provider value={theme.includes('dark')}>
       <StyleProvider
         cache={styleCache}
-        linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
+        linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]}
       >
         <SiteContext.Provider value={siteContextValue}>
           <SiteThemeProvider
diff --git a/package.json b/package.json
index 9378f3ccdd..bba9b4f81e 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "lint:deps": "antd-tools run deps-lint",
     "lint:md": "remark . -f -q",
     "lint:script": "npm run component-changelog && eslint . --ext .js,.jsx,.ts,.tsx --cache",
-    "lint:style": "tsx scripts/check-cssinjs.ts",
+    "lint:style": "tsx scripts/check-cssinjs.tsx",
     "pre-publish": "npm run test-all -- --skip-build && tsx ./scripts/pre-publish-notice.ts",
     "prepare": "is-ci || husky install && dumi setup",
     "prepublishOnly": "antd-tools run guard",
@@ -113,7 +113,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^2.0.0-alpha.1",
+    "@ant-design/cssinjs": "^1.18.0-alpha.0",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/react-slick": "~1.0.2",
     "@babel/runtime": "^7.18.3",
diff --git a/scripts/check-cssinjs.ts b/scripts/check-cssinjs.ts
deleted file mode 100644
index 3b4f0156bc..0000000000
--- a/scripts/check-cssinjs.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable no-console */
-import {
-  StyleProvider,
-  legacyNotSelectorLinter,
-  logicalPropertiesLinter,
-  parentSelectorLinter,
-} from '@ant-design/cssinjs';
-import chalk from 'chalk';
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import { generateCssinjs } from './generate-cssinjs';
-
-console.log(chalk.green(`🔥 Checking CSS-in-JS...`));
-
-let errorCount = 0;
-const originError = console.error;
-console.error = (msg: any) => {
-  if (msg.includes('Warning: [Ant Design CSS-in-JS]')) {
-    errorCount += 1;
-    console.log(chalk.red(`❌ `), msg.slice(msg.indexOf('Error in')).replace(/\s+/g, ' '));
-  } else {
-    originError(msg);
-  }
-};
-
-(async () => {
-  await generateCssinjs({
-    key: 'check',
-    render(Component: any) {
-      ReactDOMServer.renderToString(
-        React.createElement(
-          StyleProvider,
-          { linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
-          React.createElement(Component),
-        ),
-      );
-    },
-  });
-
-  if (errorCount > 0) {
-    console.log(chalk.red(`❌  CSS-in-JS check failed with ${errorCount} errors.`));
-    process.exit(1);
-  } else {
-    console.log(chalk.green(`✅  CSS-in-JS check passed.`));
-  }
-})();
diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx
new file mode 100644
index 0000000000..040a0bdfa1
--- /dev/null
+++ b/scripts/check-cssinjs.tsx
@@ -0,0 +1,130 @@
+/* eslint-disable no-console */
+import {
+  legacyNotSelectorLinter,
+  logicalPropertiesLinter,
+  NaNLinter,
+  parentSelectorLinter,
+  StyleProvider,
+} from '@ant-design/cssinjs';
+import chalk from 'chalk';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { generateCssinjs } from './generate-cssinjs';
+import { ConfigProvider } from '../components';
+
+console.log(chalk.green(`🔥 Checking CSS-in-JS...`));
+
+let errorCount = 0;
+const originError = console.error;
+console.error = (msg: any) => {
+  if (msg.includes('Warning: [Ant Design CSS-in-JS]')) {
+    errorCount += 1;
+    console.log(chalk.red(`❌ `), msg.slice(msg.indexOf('Error in')).replace(/\s+/g, ' '));
+  } else {
+    originError(msg);
+  }
+};
+
+async function checkCSSVar() {
+  const ignore = [
+    'affix',
+    'alert',
+    'anchor',
+    'auto-complete',
+    'avatar',
+    'back-top',
+    'badge',
+    'breadcrumb',
+    'calendar',
+    'card',
+    'carousel',
+    'cascader',
+    'checkbox',
+    'collapse',
+    'color-picker',
+    'date-picker',
+    'descriptions',
+    'divider',
+    'drawer',
+    'dropdown',
+    'empty',
+    'flex',
+    'float-button',
+    'form',
+    'grid',
+    'icon',
+    'image',
+    'input-number',
+    'layout',
+    'list',
+    'mentions',
+    'message',
+    'modal',
+    'notification',
+    'pagination',
+    'popconfirm',
+    'popover',
+    'progress',
+    'qr-code',
+    'radio',
+    'rate',
+    'result',
+    'segmented',
+    'select',
+    'skeleton',
+    'slider',
+    'space',
+    'spin',
+    'statistic',
+    'steps',
+    'switch',
+    'table',
+    'tabs',
+    'tag',
+    'timeline',
+    'transfer',
+    'tree',
+    'tree-select',
+    'typography',
+    'upload',
+    'watermark',
+  ];
+
+  await generateCssinjs({
+    key: 'check',
+    ignore,
+    render(Component: any) {
+      ReactDOMServer.renderToString(
+        <StyleProvider linters={[NaNLinter]}>
+          <ConfigProvider theme={{ cssVar: true, hashed: false }}>
+            <Component />
+          </ConfigProvider>
+        </StyleProvider>,
+      );
+    },
+  });
+}
+
+(async () => {
+  await generateCssinjs({
+    key: 'check',
+    render(Component: any) {
+      ReactDOMServer.renderToString(
+        <StyleProvider
+          linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
+        >
+          <Component />
+        </StyleProvider>,
+      );
+    },
+  });
+
+  await checkCSSVar();
+
+  if (errorCount > 0) {
+    console.log(chalk.red(`❌  CSS-in-JS check failed with ${errorCount} errors.`));
+    process.exit(1);
+  } else {
+    console.log(chalk.green(`✅  CSS-in-JS check passed.`));
+  }
+})();
diff --git a/scripts/generate-cssinjs.ts b/scripts/generate-cssinjs.ts
index a9460717c9..0c5846bbe3 100644
--- a/scripts/generate-cssinjs.ts
+++ b/scripts/generate-cssinjs.ts
@@ -9,6 +9,7 @@ interface GenCssinjsOptions {
   key: string;
   render: (component: React.FC) => void;
   beforeRender?: (componentName: string) => void;
+  ignore?: string[];
 }
 
 export const styleFiles = globSync(
@@ -21,13 +22,14 @@ export const styleFiles = globSync(
     .join('/'),
 );
 
-export const generateCssinjs = ({ key, beforeRender, render }: GenCssinjsOptions) =>
+export const generateCssinjs = ({ key, beforeRender, render, ignore }: GenCssinjsOptions) =>
   Promise.all(
     styleFiles.map(async (file) => {
       const absPath = url.pathToFileURL(file).href;
       const pathArr = file.split('/');
       const styleIndex = pathArr.lastIndexOf('style');
       const componentName = pathArr[styleIndex - 1];
+      if (ignore?.includes(componentName)) return;
       let useStyle: StyleFn = () => {};
       if (file.includes('grid')) {
         const { useColStyle, useRowStyle } = await import(absPath);