Javascript antd表单在不同的计算机上看起来不同

下一个测试代码是：

class MyApp extends React.Component {
  render(){
    const { getFieldDecorator } = this.props.form;
    return (
      <Form className="login-form">
        <Form.Item>
          {getFieldDecorator('username', {
            trigger: 'onBlur',
            validateTrigger: 'onBlur',
            valuePropName: 'defaultValue',
            initialValue: 123,
            rules: [
                    { required: true, message: 'Please input your username!' },
                    { pattern: /^\s*[0-9]+\s*$/, message: 'wrong input!!!' }
                    ]
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />,
          )}
        </Form.Item>
      </Form>
    );
  }
}

const App = Form.create()(MyApp);

export default App;

MyApp类扩展了React.Component{ render（）{ const{getFieldDecorator}=this.props.form； 返回( {getFieldDecorator（'用户名'{ 触发器：“onBlur”， validateTrigger:“onBlur”， valuePropName:“defaultValue”， 初始值：123， 规则：[ {必需：true，消息：“请输入您的用户名！”}， {模式：/^\s*[0-9]+\s*$/，消息：“输入错误！！！”} ] })( , )} {getFieldDecorator（'密码'{ 规则：[{required:true，消息：'请输入您的密码！'}]， })( , )} ); } } const-App=Form.create（）（MyApp）； 导出默认应用程序； 这段代码创建一个表单和几个输入字段。在这段代码中，我检查了验证是如何工作的。 这段代码工作得很好，创建了一个如图所示的界面

当我在另一台计算机上运行此代码时，我得到以下图片，其中图标扩展到输入字段之外，并且当字段被验证时，字段不是红色的

请告诉我如何使表格看起来像第一种情况