fix: Should allow inline style for Descriptions component, close #17533…

… (#17558)
ant-design · Jul 10, 2019 · 4e629da · 4e629da
1 parent d52b85f
commit 4e629da
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 0 deletions.
diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
@@ -1,5 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Descriptions Descriptions support style 1`] = `
+<Descriptions
+  column={
+    Object {
+      "lg": 3,
+      "md": 3,
+      "sm": 2,
+      "xl": 3,
+      "xs": 1,
+      "xxl": 3,
+    }
+  }
+  size="default"
+  style={
+    Object {
+      "backgroundColor": "#e8e8e8",
+    }
+  }
+>
+  <div
+    className="ant-descriptions"
+    style={
+      Object {
+        "backgroundColor": "#e8e8e8",
+      }
+    }
+  >
+    <div
+      className="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            className="ant-descriptions-row"
+            key="0"
+          >
+            <td
+              className="ant-descriptions-item"
+              colSpan={1}
+            >
+              <span
+                className="ant-descriptions-item-label ant-descriptions-item-no-label"
+                key="label"
+              />
+              <span
+                className="ant-descriptions-item-content"
+                key="content"
+              >
+                Cloud Database
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</Descriptions>
+`;
+
 exports[`Descriptions Descriptions.Item support className 1`] = `
 <Descriptions
   column={

diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js
@@ -151,4 +151,13 @@ describe('Descriptions', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('Descriptions support style', () => {
+    const wrapper = mount(
+      <Descriptions style={{ backgroundColor: '#e8e8e8' }}>
+        <Descriptions.Item>Cloud Database</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
@@ -281,6 +281,7 @@ class Descriptions extends React.Component<
             children,
             bordered = false,
             layout = 'horizontal',
+            style,
           } = this.props;
           const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
 
@@ -306,6 +307,7 @@ class Descriptions extends React.Component<
                 [`${prefixCls}-${size}`]: size !== 'default',
                 [`${prefixCls}-bordered`]: !!bordered,
               })}
+              style={style}
             >
               {title && <div className={`${prefixCls}-title`}>{title}</div>}
               <div className={`${prefixCls}-view`}>