Menu
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> ); } } 
484
Set MUI Width and Height with 'InputProps' Another method for setting Material-UI TextField width and height is a combination of sx at the TextField root and passing sx styling values to the composing Input component via InputProps . The width is set with TextField prop sx={{width: 300}} .
To override the width of a TextField component with React Material UI, we can add the fullWidth prop to it. We set the fullWidth prop to true to make the TextField fill the parent container.
To set a value for TextField from Material UI with React, we set the value prop of the TextField to a state value. And we set the onChange prop to a function that sets the state to a the value that's inputted. We call the useState hook to create the value state and the setValue function to set the value state's value.
To clear the Material UI text field Value in React, we can set the value property of the input to an empty string. to add a button and a text field. We assigned the textInput ref to the TextField so we can its input value to an empty string when we click on the Button .
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 /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
