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

Question

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

I've looked at the parameters, inputStyle etc...

Nicolas Henin
– Nicolas Henin

2016-01-29 20:37:51 +00:00
Commented Jan 29, 2016 at 20:37 — Nicolas Henin
– Nicolas Henin, Commented Jan 29, 2016 at 20:37

barshopen · Accepted Answer · 2021-07-29 10:00:11Z

90

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

edited Jul 29, 2021 at 10:00

barshopen

1,3612 gold badges17 silver badges33 bronze badges

answered Dec 29, 2017 at 16:36

Anton Pelykh

2,4401 gold badge21 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jordan Over a year ago

This does not "reduce" the width of the component as OP had asked. This actually will increase the width in certain cases.

Community · Accepted Answer · 2017-05-23 10:30:49Z

51

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.

You could refer to documentations and other similar question on SO for clarity. http://facebook.github.io/react-native/docs/style.html#content

http://facebook.github.io/react-native/

http://facebook.github.io/react-native/docs/flexbox.html#content

React.js inline style best practices

edited May 23, 2017 at 10:30

CommunityBot

11 silver badge

answered Jan 29, 2016 at 22:43

pratikpawar

2,0982 gold badges17 silver badges20 bronze badges

2 Comments

Muneem Habib Over a year ago

is it working? My text field is working correct if width is 250 px but for smaller width it is not working

Embedded_Mugs Over a year ago

@MuneemHabib Same, the width on my TextField doesn't go below 220px. Edit: the solution is to set the minWidth and width. eg: sx={{ minWidth: 100, width:100}}

NearHuscarl · Accepted Answer · 2021-10-26 02:12:46Z

11

If you want to make the TextField's width expanded as much as the parent's width (width: 100%):

<TextField label="Full width" fullWidth />

If you want to set the TextField's width to the exact value:

<Box width={350}>
  <TextField label="width: 350px" fullWidth />
</Box>

You can also set the style of the TextField directly if you don't want to add a wrapper component:

V5

<TextField label="width: 350px" sx={{ width: 350 }} />

V4

const useStyles = makeStyles({
  root: {
    width: 350
  }
});

function App() {
  const classes = useStyles();
  return <TextField label="width: 350px" className={classes.root} />;
}

I'd advice you against using inline styles as suggested in other answers since inline styles are harder to override. You should by default use Material-UI styles because it's more flexible and better integrated with Material-UI components. For example, you can cherry-pick the sub-components to override in a larger components, or style psuedo classes and elements, which can't be done with inline style.

Live Demo

edited Oct 26, 2021 at 2:12

answered Oct 26, 2020 at 3:10

NearHuscarl

83.1k24 gold badges321 silver badges291 bronze badges

1 Comment

machineghost Over a year ago

The sx part of the answer should work; it doesn't :(

vsync · Accepted Answer · 2024-06-13 12:09:34Z

0

In "modern" MUI the width of the <TextField> component can be set through the sx prop:

The sx prop is the best option for adding style overrides to a single instance of a component in most cases. It can be used with all Material UI components.

<TextField sx={{width: 200}}/>

This will override the default width style of the component to 200px

https://mui.com/material-ui/api/text-field/#props

answered Jun 13, 2024 at 12:09

vsync

133k61 gold badges345 silver badges430 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

Live Demo

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Live Demo

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related