increasing the width of select dropdown for material ui

Question

• I am trying to increase the width of drop down to 400px.
• so I gave inline styles but still its not changing.
• when I debugged I found the width is coming from this class.
• not sure how to overwrite.
• can you tell me how to fix it.
• providing my code snippet below.

https://stackblitz.com/edit/react-4xmiuz?file=demo.js

<div style={{ width: '400', border: '1px solid green' }}
          className={classes.root}>

        <FormControl style={{ width: '400', border: '1px solid green' }}
            variant="outlined" className={classes.formControl}>
          <InputLabel
            ref={ref => {
              this.InputLabelRef = ref;
            }}
            htmlFor="outlined-age-native-simple"
            style={{ width: '400', border: '1px solid green' }}

          >
            Age
          </InputLabel>
          <Select
            native
            value={this.state.age}
            onChange={this.handleChange('age')}
            style={{ width: '400 !important', border: '1px solid red' }}
            input={
              <OutlinedInput
                name="age"
                labelWidth={this.state.labelWidth}
                id="outlined-age-native-simple"
                style={{ width: '400', border: '1px solid green' }}

              />
            }
          >
            <option style={{ width: '400', border: '1px solid green' }}
              value="" />
            <option style={{ width: '400', border: '1px solid green' }}
              value={10}>Ten</option>
            <option style={{ width: '400', border: '1px solid green' }}
              value={20}>Twenty</option>
            <option style={{ width: '400', border: '1px solid green' }}
              value={30}>Thirty</option>
          </Select>
        </FormControl>

      </div>

Answer 1

I think it should be:

<Select
  style={{ width: 400, border: '1px solid red' }}
  ...
/>

Result: