1. ホーム
  2. javascript

[解決済み] react MUIでTextFieldコンポーネントの幅をオーバーライドする方法とは?

2022-02-05 12:46:01

質問

の幅を小さくしたいのですが、どうすればいいですか? TextField コンポーネントを使用します。

以下はレンダーメソッドです。

  render() {
    return (
      <div>
          <div>
            <form onSubmit={this.handleSubmit}>
                <TextField
                  hintText="Email"
                  ref="email"
                /><br/>
                <TextField
                  hintText="Password"
                  type="password"
                  ref="password"
                /><br/>
              <button className="btn btn-success" onClick={this.loginCommand}><i className="fa fa-sign-in"/>{' '}Log In</button>
            </form>
          </div>
      }
      </div>
    );
  }
}

解決方法は?

また、以下のページもご覧ください。 fullWidth プロパティ をクリックして、正しく設定されていることを確認してください。

<TextField
      id="full-width-text-field"
      label="Label"
      placeholder="Placeholder"
      helperText="Full width!"
      margin="normal"
      fullWidth // this may override your custom width
/>