html - 设置 MUI 选择宽度？

Question

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

材质 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 组件页面上没有影响该组件宽度的有用示例。

标签： htmlcssreactjsmaterial-designmaterial-ui

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>

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