Merge pull request #17389 from ant-design/fix-className-undefined

fix: fix classname is undefined

components/result/__tests__/__snapshots__/demo.test.js.snap

@@ -143,7 +143,7 @@ exports[`renders ./components/result/demo/basic.md correctly 1`] = `
   </div>
   <p />
   <div
-    class="ant-result ant-result-403 undefined"
+    class="ant-result ant-result-403"
   >
     <div
       class="ant-result-icon ant-result-image"
@@ -457,7 +457,7 @@ exports[`renders ./components/result/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/result/demo/complex.md correctly 1`] = `
 <div
-  class="ant-result ant-result-error undefined"
+  class="ant-result ant-result-error"
 >
   <div
     class="ant-result-icon"
@@ -591,7 +591,7 @@ exports[`renders ./components/result/demo/complex.md correctly 1`] = `
 
 exports[`renders ./components/result/demo/customIcon.md correctly 1`] = `
 <div
-  class="ant-result ant-result-info undefined"
+  class="ant-result ant-result-info"
 >
   <div
     class="ant-result-icon"

components/result/__tests__/index.test.js

@@ -47,4 +47,9 @@ describe('Progress', () => {
     const wrapper = mount(<Result status="404" />);
     expect(wrapper.find('.ant-result-extra')).toHaveLength(0);
   });
+
+  it('🙂  result should support className', () => {
+    const wrapper = mount(<Result status="404" title="404" className="my-result" />);
+    expect(wrapper.find('.ant-result.my-result')).toHaveLength(1);
+  });
 });

components/result/index.tsx

@@ -69,17 +69,17 @@ export const OriginResult: React.SFC<ResultProps> = props => (
     {({ getPrefixCls }: ConfigConsumerProps) => {
       const {
         prefixCls: customizePrefixCls,
-        className,
+        className: customizeClassName,
         subTitle,
         title,
         style,
         children,
         status,
       } = props;
-
       const prefixCls = getPrefixCls('result', customizePrefixCls);
+      const className = classnames(prefixCls, `${prefixCls}-${status}`, customizeClassName);
       return (
-        <div className={`${prefixCls} ${prefixCls}-${status} ${className}`} style={style}>
+        <div className={className} style={style}>
           {renderIcon(prefixCls, props)}
           <div className={`${prefixCls}-title`}>{title}</div>
           {subTitle && <div className={`${prefixCls}-subtitle`}>{subTitle}</div>}

components/result/style/index.less

@@ -5,22 +5,20 @@
 
 .@{result-prefix-cls} {
   padding: 48px 32px;
-  background-color: @component-background;
-
   // status color
-  &-success .anticon {
+  &-success &-icon > .anticon {
     color: @success-color;
   }
 
-  &-error .anticon {
+  &-error &-icon > .anticon {
     color: @error-color;
   }
 
-  &-info .anticon {
+  &-info &-icon > .anticon {
     color: @info-color;
   }
 
-  &-warning .anticon {
+  &-warning &-icon > .anticon {
     color: @warning-color;
   }