React 阻止 MUI Select 在 MUI Grid 中改變寬度

Question

我有一個列數可變的 MUI 網格設置。 目前，如果用戶為 Select 框選擇一個長字符串，則 Select 會增長，從而增加整個列的大小。 但是，我希望每一列都保持相同的大小，無論選擇什么（並截斷 Select 框中的內容）。

請查看下面的圖片以便更好地理解。 在這些示例中，有 8 列：

未填充：空字段

Filled：字段填充，清楚select框中的長文本resized the whole column

代碼：

{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

我有同樣的問題，將 100% 的最大寬度添加到包含 select 的網格項，並使 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" } }}