html - 设置 MUI 选择宽度？

Question

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

Material 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 组件的大小现在最小宽度为 120px，但组件在渲染后保持完全相同，如下图所示。换句话说，就是缩小范围。宽度不够大。宽度应大于标签 Language。

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

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