Html 设置材质界面选择宽度？

我正在尝试设置材质UI选择组件的宽度。为此，我必须为FormControl组件提供一个类，例如

mw-120

，它链接到定义120px的

minwidth

的CSS类

物料界面选择组件：

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

虽然我希望Select组件的大小现在最小宽度为120px，但渲染后该组件保持完全相同，如下图所示。换言之，这是为了缩小范围。宽度不够大。宽度应大于标签

语言

---

Chrome Developer工具中的元素分析表明，该组件的主DIV元素具有一个类

。MuiFormControl-root-234

，该类包含

最小宽度：0，并且它的位置/排名高于my
.mw-120
类。我想这会覆盖我的
.mw-120
类，对吗？是否有其他方式影响材质UI选择组件的宽度？没有影响组件宽度的有用示例。
如果要进行一次性样式设置，可以使用内联样式，这对我很有用

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

//这一行
语言
this.onLanguageChange（e.target.value）}
输入道具={{
名称：'语言'，
id:“所选语言”，
}}>
{menuItems}


如果您想在更多代码中重复使用它，并希望避免代码重复，您可能会希望使用
进行潜在的重复使用，您可以通过以下方式完成此操作：

<FormControl className={classes.formControl}>

从'@materialui/core/styles'导入{makeStyles}；
const useStyles=makeStyles（（主题）=>({
表单控制：{
边距：主题。间距（1），
最小宽度：120，
},
}));

然后
useStyles
生成如下类名：

<FormControl className={classes.formControl}>

const classes=useStyles（）；

然后向
FormControl
组件添加如下内容：

<FormControl className={classes.formControl}>



堆栈片段中的演示

const{FormControl，InputLabel，Select，MenuItem，makeStyles}=MaterialUI；
常量App=函数（）{
const useStyles=makeStyles（（主题）=>({
表单控制：{
边距：主题。间距（1），
最小宽度：120，
},
}));
const classes=useStyles（）；
返回(
年龄
十
二十
三十
)
}
ReactDOM.render(
,
document.getElementById（'root'））
);
在我们的案例中，选择器
.MuiFormControl root
和
.mv-120
具有相同的特异性，因此它们的声明顺序很重要。生成的样式最后注入页面的
部分，当自定义样式也放置在此部分时，它们的优先级较低：


const{FormControl，InputLabel，Select，MenuItem}=MaterialUI
常量App=函数（）{
返回(
语言
英语
德国的
俄语
)
}
ReactDOM.render（，document.getElementById（'root'））
.mw-120{
最小宽度：120px；
}

您的类无法工作，因为它在已编译的css文件中较高。正确的解决方案是确保新类在该文件中的位置较低。或者使用内联样式和
！重要信息
如果您不关心您的项目。您可能想阅读mui文档的这一部分@佩德罗维拉：谢谢，
风格
参数确实起到了作用。关于代码复制，你是对的。我对所有样式都使用SASS，我相信材质UI也添加了一些CSS。这就引出了一个问题，我的CSS将始终位于Material UI one下，因此会被覆盖。@Socrates我开发的应用程序非常简单，所以我从未经历过这一点，但正如我所说，也许你可以减少主题的重复，但我不知道你的CSS是否不会以这种方式被覆盖。现在，如果我想使用%而不是固定长度，该怎么办？''style={{width:'33%'}}没有效果，我的项目总是有一个
xs={4}
atribute