javascriptreactjsreactive-programmingmaterial-ui

How to override the width of a TextField component with Material UI?


I'm trying to reduce the width of the TextField component :

Here is the render method:

  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>
    );
  }
}

enter image description here


Solution

  • You also can look at fullWidth property to make sure it is set properly.

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