diff --git a/components/skeleton/Node.tsx b/components/skeleton/Node.tsx
index 4183d4dcc6..841fbf63ea 100644
--- a/components/skeleton/Node.tsx
+++ b/components/skeleton/Node.tsx
@@ -1,6 +1,7 @@
 import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
 import classNames from 'classnames';
 import * as React from 'react';
+import useStyle from './style';
 import { ConfigContext } from '../config-provider';
 import type { SkeletonElementProps } from './Element';
 
@@ -13,6 +14,7 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = props => {
   const { prefixCls: customizePrefixCls, className, style, active, children } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const cls = classNames(
     prefixCls,
@@ -20,17 +22,18 @@ const SkeletonNode: React.FC<SkeletonNodeProps> = props => {
     {
       [`${prefixCls}-active`]: active,
     },
+    hashId,
     className,
   );
 
   const content = children ?? <DotChartOutlined />;
 
-  return (
+  return wrapSSR(
     <div className={cls}>
       <div className={classNames(`${prefixCls}-image`, className)} style={style}>
         {content}
       </div>
-    </div>
+    </div>,
   );
 };