React阻止MUI Select更改MUI网格中的宽度

Question

我有一个具有可变列数的MUI网格设置。目前，如果用户为"选择"框选择了一个长字符串，则"选择"会增加，从而增加整个列的大小。但是，无论选择了什么，我都希望每个列保持相同的大小(并截断"选择"框中的内容(。

请参阅下面的图片以更好地理解。在这些例子中，有8列：

未填充：空字段

填充：字段已填充，选择框中的长文本清楚地调整了整列的大小

代码：

{this.state.sampleData.map((obj, idx) => {
return (
<Grid item xs={true}> //Ensures the columns are the correct size (more columns = smaller widths).
<Grid container spacing={1}>
<Grid item xs={12}>
<Typography>#{obj["#"]}</Typography>
</Grid>

<Grid item xs={12}>
<TextField
className={classes.smallTextField}
inputProps={{
...
}}
variant="outlined"
label="Name"
name="name"
value={
this.state.sampleData[idx].name || ""
}
onChange={(event) => {
this.handleChange(
event.target.value,
idx,
"name"
);
}}
/>
</Grid>
<Grid item xs={12}>
<FormControl
variant="filled"
fullwidth
size="small"
className={classes.selectFieldFormControl}
>
<InputLabel
sx={{ ... }}
>
Position
</InputLabel>
<Select
sx={...}
name="position"
value={
this.state.sampleData[idx].position || ""
}
onChange={(event) => {
this.handleChange(
event.target.value,
idx,
"position"
);
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={"manager"}>
manager
</MenuItem>
<MenuItem value={"factory"}>
factory
</MenuItem>
<MenuItem value={"assistant to the regional manager"}>
assistant to the regional manager
</MenuItem>
</Select>
</FormControl>
</Grid>
</Grid>
);})}

如何使框截断其中的文本，从而不调整列的大小？我想我需要在"选择"框本身或父网格项中添加一些样式。

谢谢！

Answer 1

我也遇到了同样的问题，在包含select的网格项中添加了100%的maxWidth，并使select的宽度100%为我解决了这个问题：

<Grid item xs={12} lg={4} sx={{ maxWidth: "100% !important" }}>
<h3 id="select-theme-label">Themes</h3>
<Select
id="select-theme"
sx={{ width: "100%" }}
></Select>
</Grid>

或者可能更现实一点，添加正确的maxWidth作为响应：

sx={{ maxWidth: { xs: "100% !important", md: "28% !important" } }}