增加材料ui的选择下拉菜单的宽度

Question

• 我正在尝试将下拉菜单的宽度增加到400px。
• 所以我给出了内联样式，但仍然没有改变。
• 当我调试时，发现宽度是来自此类的。
• 不确定如何覆盖。
• 你能告诉我如何解决它吗？
• 在下面提供我的代码段。

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

我认为应该是：

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

结果：