设置材质 UI 选择宽度？

Question

我正在尝试设置 Material UI Select 组件的宽度。为此，我必须为 FormControl 组件提供一个类，例如mw-120哪个链接到定义min-width120px的 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 组件页面上没有影响此组件宽度的有用示例。

Answer 1

如果您正在做一次性样式，则可以使用内联样式，它对我有用。

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

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

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

堆栈片段中的演示

<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')
);

Answer 3

在Material UI v5中，您可以使用sxprop. 请注意，下面的示例使用的选择TextField本质上与 相同，Select只是它可以显示标签和帮助文本。有关工作原理的更多详细信息，请参阅此TextField答案。

<TextField select label="Select" sx={{ minWidth: 130 }}>
  {currencies.map((option) => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>