[FIXED] How to increase the width of Material UI dropdown

Issue

I am using Material UI dropdown in ReactJs and need to increase the width of the same. Tried to provide properties like style={{minWidth:300}} but its not increasing the width. Below is my code

 <form  className={classes.root} autoComplete="off">
  <TextField
    select
    variant="outlined"
    value={values.age}
    onChange={handleChange}
    inputProps={{ name: "age", id: "outlined-age-simple" }}
  >
    <MenuItem value="">
      <em>None</em>
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </TextField>
</form>

and here is link of codeSandbox https://codesandbox.io/s/material-demo-t4cvv. How to increase the width?

Solution

User property style={{ width: value}} to set width

You can find the updated version of your fiddle here.

example:

<TextField
  select
  variant="outlined"
  value={values.age}
  onChange={handleChange}
  style={{ width: 400}}
  inputProps={{ name: "age", id: "outlined-age-simple" }}
>
  <MenuItem value="">
    <em>None</em>
  </MenuItem>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</TextField>

Answered By - Nitheesh
Answer Checked By - - Terry (ReactFix Volunteer)