标签收缩时material-ui TextField的宽度变化答案

【问题标题】：Width changes in material-ui TextField when label shrinks标签收缩时material-ui TextField的宽度变化
【发布时间】：2021-10-02 06:29:42
【问题描述】：

我有一个 material-ui 文本字段的组件，带有一些自定义项。在这个codesandbox 中就是一个例子。

问题是当我在 TextField 的 InputLabelProps 中传递 shrink: true 时。组件覆盖指定的最大宽度。像这样：

宽度应该像浅蓝色部分。绿色的元素是缩小后的标签。

当shrink: false没有问题时，组件保持正确的宽度。

我曾尝试在组件中的多个元素上设置 max-width，但没有任何效果，我进行了搜索，但找不到有关此特定问题的任何信息。有人可以指出我在正确元素上强制这个最大宽度的方向吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

一个选项是您可以选择fieldset 元素来控制/应用自定义宽度到整个组件。例如。使用makeStyles 中的wrapper 类应用样式。

wrapper: {
  maxWidth: "45px",
  width: "45", //for testing
  "& fieldset": {
    minWidth: 44,
    paddingRight: 0,
    marginRight: 0,
    paddingLeft: 0,
    marginLeft: 0
  }
},

Updated sandbox.

【讨论】：

谢谢！这有效并帮助我发现在该字段集上设置 min-inline-size: auto; 也使其具有我需要的宽度。
太好了……

【解决方案2】：

由于您使用的是 mui，因此最好使用网格而不是组件包装器。例如，您可以将文本字段插入到网格容器中，并通过提供 xs、md 和 xl 为其提供简单的样式。查看文档了解更多信息。

    <Grid container spacing={2}>
      <Grid item md={6} xs={12} xl={6}>
        <TextField.../>
      </Grid>
    </Grid>

然后，您可以在容器中添加额外的文本字段，方法是使用网格项和样式道具包装它们。

【讨论】：