在MUI网格中防止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>
                        );})}

如何才能使方框截断其中的文本，这样就不会调整列的大小？我想，我需要在Select本身或父网格项中添加一些样式。

谢谢!

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