如何增加 Material UI 下拉菜单的宽度答案

【问题标题】：How to increase the width of Material UI dropdown如何增加 Material UI 下拉菜单的宽度
【发布时间】：2019-12-10 04:49:27
【问题描述】：

我在 ReactJs 中使用 Material UI 下拉菜单，需要增加其宽度。试图提供像style={{minWidth:300}} 这样的属性，但它没有增加宽度。下面是我的代码

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

这里是 codeSandbox https://codesandbox.io/s/material-demo-t4cvv 的链接。如何增加宽度？

【问题讨论】：

标签： css reactjs material-design

【解决方案1】：

用户属性style={{ width: value}}设置宽度

你可以找到你的小提琴here的更新版本。

示例：

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

【讨论】：

【解决方案2】：

你可以添加类似的 CSS，

.MuiSelect-root {
    min-width: 300px;
}

如果您在同一个组件中有多个下拉菜单，那么您必须将此 CSS 与它的父类一起使用。

我希望它的工作！

【讨论】：