reactjs - 标签缩小时material-ui TextField的宽度变化

Question

我有一个 material-ui TextField 的组件，带有一些自定义项。在这个代码沙盒中就是一个例子。

问题是当我传入shrink: trueTextField 的 InputLabelProps 时。组件覆盖指定的最大宽度。像这样：

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

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

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

标签： reactjsmaterial-ui

Answer 1

一种选择是您可以选择fieldset元素来控制/应用自定义宽度到整个组件。wrapper例如，使用makeStyles.

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

更新沙盒。