diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx
index 52d41e801b..05a2ce98dc 100644
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -47,6 +47,11 @@ class FormItem extends React.Component {
     );
   }
 
+  renderExtra() {
+    const { prefixCls, extra } = this.props;
+    return <div className={prefixClsFn(prefixCls, 'extra')}>{extra}</div>;
+  }
+
   getValidateStatus() {
     const { isFieldValidating, getFieldError, getFieldValue } = this.context.form;
     const field = this.getId();
@@ -142,7 +147,7 @@ class FormItem extends React.Component {
         this.renderValidateWrapper(
           children,
           this.renderHelp(),
-          props.extra
+          this.renderExtra(),
         )
       ),
     ];
diff --git a/style/components/form.less b/style/components/form.less
index 37c85b98df..9943c88341 100644
--- a/style/components/form.less
+++ b/style/components/form.less
@@ -102,6 +102,11 @@ input[type="checkbox"] {
   margin-top: 3px;
 }
 
+.@{css-prefix}form-explain,
+.@{css-prefix}form-extra {
+  color: #999;
+}
+
 .@{css-prefix}form-text {
   display: inline-block;
   padding-right: 8px;