设置 MUI 选择宽度？

Question

我正在尝试设置 MUI Select 组件的宽度。为此，我必须为 FormControl 组件提供一个类，例如 mw-120 它链接到定义 min-width 的 120px 的 CSS 类。

材质 UI 选择组件：

 <FormControl className='mw-120'>
    <InputLabel htmlFor='selected-language'>Language</InputLabel>
    <Select value={this.state.selectedLanguage}
            onChange={(e) => this.onLanguageChange(e.target.value)}
            inputProps={{
                name: 'language',
                id: 'selected-language',
            }}>
        {menuItems}
    </Select>
</FormControl>

CSS类：

 .mw-120 {
    min-width: 120px;
}

虽然我希望 Select 组件的大小现在最小为 120 像素，但组件在渲染后保持完全相同，如下图所示。换句话说，就是缩小。宽度不够大。宽度应大于标签 Language 。

Chrome 开发人员工具中的元素分析表明，该组件的主要 DIV 元素有一个类 .MuiFormControl-root-234 包含 min-width: 0; ，它的位置/排名高于我的 .mw-120 类。我想这会覆盖我的 .mw-120 课程，对吧？有没有其他方法可以影响 Material UI Select 组件的宽度？在 Material UI Select 组件页面 上没有影响该组件宽度的有用示例。

原文由 Socrates 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你正在做一些一次性的样式，你可以使用 inline style ，它对我有用。

 <FormControl style={{minWidth: 120}}> // this line
    <InputLabel htmlFor='selected-language'>Language</InputLabel>
    <Select value={this.state.selectedLanguage}
            onChange={(e) => this.onLanguageChange(e.target.value)}
            inputProps={{
                name: 'language',
                id: 'selected-language',
            }}>
        {menuItems}
    </Select>
</FormControl>

如果您想在更多代码中重用它并希望避免代码重复，您可能希望使用 主题

原文由 Pedro Vieira 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于潜在的重用， 官方文档示例 使用 makeStyles 完成此操作，如下所示：

 import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

然后 useStyles 生成这样的类名：

 const classes = useStyles();

然后像这样添加到您的 FormControl 组件中：

 <FormControl className={classes.formControl}>

堆栈片段中的演示

 const { FormControl, InputLabel, Select, MenuItem, makeStyles } = MaterialUI;

const App = function () {

  const useStyles = makeStyles((theme) => ({
    formControl: {
      margin: theme.spacing(1),
      minWidth: 120,
    },
  }));

  const classes = useStyles();

  return (
    <div className="App">
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={''}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  )
}

ReactDOM.render(
   <App />,
   document.getElementById('root')
);

 <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@4.11.3/umd/material-ui.development.js"></script>

<div id="root"></div>

原文由 KyleMit 发布，翻译遵循 CC BY-SA 4.0 许可协议