close

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

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to override the width of a TextField component with react Material UI? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

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

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

    to override the width of a TextField component with react Material UI 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 /

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

    to override the width of a TextField component with react Material UI 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 /

Method 1

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
/>

Method 2

You could either specify inline style on element like below

  <TextField
        hintText="Email"
        ref="email"
        style = {{width: 100}} //assign the width as your requirement
   />

Or you could do as below.

Declare a styles variable with css properties.

var styles = StyleSheet.create({
    textFld: { width: 100, height: 40}   //assign the width as your requirement
});

Assign it to style in your render code.

<TextField
              hintText="Email"
              ref="email"
              style = {styles.textFld}
            />

Give it try let me know if it works for you. I am new to react js as well.

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment