javascript - antd表格在不同的电脑上看起来不一样

Question

有下一个测试代码：

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;

此代码创建一个表单和几个输入字段。在这段代码中，我检查了验证是如何工作的。此代码效果很好，并创建了一个界面，如图片 image1

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

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

标签： javascriptreactjsvalidationantd