fix: Skeleton missing style (#33405)

ant-design · Dec 24, 2021 · 9c086c5 · 9c086c5
1 parent 0edf042
commit 9c086c5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx
@@ -17,6 +17,7 @@ export interface SkeletonProps {
   loading?: boolean;
   prefixCls?: string;
   className?: string;
+  style?: React.CSSProperties;
   children?: React.ReactNode;
   avatar?: SkeletonAvatarProps | boolean;
   title?: SkeletonTitleProps | boolean;
@@ -76,6 +77,7 @@ const Skeleton = (props: SkeletonProps) => {
       prefixCls: customizePrefixCls,
       loading,
       className,
+      style,
       children,
       avatar,
       title,
@@ -153,7 +155,7 @@ const Skeleton = (props: SkeletonProps) => {
       );
 
       return (
-        <div className={cls}>
+        <div className={cls} style={style}>
           {avatarNode}
           {contentNode}
         </div>

diff --git a/components/skeleton/__tests__/__snapshots__/index.test.js.snap b/components/skeleton/__tests__/__snapshots__/index.test.js.snap
@@ -526,6 +526,31 @@ exports[`Skeleton should square avatar 1`] = `
 </div>
 `;
 
+exports[`Skeleton should support style 1`] = `
+<div
+  class="ant-skeleton"
+  style="background: blue;"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 38%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li />
+      <li />
+      <li
+        style="width: 61%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`Skeleton should without avatar and paragraph 1`] = `
 <div
   class="ant-skeleton"

diff --git a/components/skeleton/__tests__/index.test.js b/components/skeleton/__tests__/index.test.js
@@ -147,4 +147,9 @@ describe('Skeleton', () => {
       expect(wrapper.render()).toMatchSnapshot();
     });
   });
+
+  it('should support style', () => {
+    const wrapper = genSkeleton({ style: { background: 'blue' } });
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });