Поле ввода формы слишком маленькое с использованием Materialize-CSS

Question

У меня есть форма для входа в базовый административный портал, однако само поле ввода, на которое можно щелкнуть, крайне мало. Кажется, что сама полоса имеет полный размер интерактивного поля ввода, поэтому вы не можете щелкнуть по ярлыку для ввода.

Код выглядит следующим образом:

    <div className="container">
      <form onSubmit={handleSubmit} className="white">
        <h5 className="center">Cars4U Administration</h5>
        <div className="input-field">
          <input type="text" name="username" className="validate" required onChange={handleChange} />
          <label htmlFor="username">Username</label>
        </div>
        <div className="input-field">
          <input type="password" name="password" className="validate" required onChange={handleChange} />
          <label htmlFor="password">Password</label>
        </div>
        <div className="input-field center">
          <button className='btn z-depth-0' type='submit'>Login</button>
        </div>
      </form>
    </div>

Если мой курсорнаходится в следующей позиции, я не могу нажать на поле ввода. Я могу щелкнуть его только в строке:

CSS:

form {
  background-color: white;
  margin-top: 80px;
  margin-left: 350px;
  margin-right: 350px;
  border-radius: 3px;
}

form label {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  font-weight: 700;
}

form .input-field {
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
}

Answer 1

Согласно предложению Энтони, у вас должны быть и name, и id в качестве идентификаторов.

Добавьте id к вашему входу -

<input name="username"/> до <input name="username"id="username"/>

class App extends React.Component {
  render() {
    return (
      <div className="container">
        <form className="white">
          <h5 className="center">Cars4U Administration</h5>
          <div className="row">
            <div className="input-field">
              <input type="text" id="username" className="validate" required />
              <label htmlFor="username">Username</label>
            </div>
            <div className="input-field">
              <input
                type="password"
                id="password"
                className="validate"
                required
              />
              <label htmlFor="password">Password</label>
            </div>
          </div>
          <div className="input-field center">
            <button className="btn z-depth-0" type="submit">
              Login
            </button>
          </div>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>