reactjs - Material-UI:如何去除 InputLabel 的转换？

Question

试图删除 FormControl 中 InputLabel 的一些默认转换，我想知道是否有办法删除它而不用一个一个地覆盖每个属性？

例如以下工作但必须提供覆盖值并保留其他默认值:

createMuiTheme({
    overrides: {
        MuiInputLabel: {
            formControl: {
                position: "unset",
                transform: "none"

我正在寻找一种完全删除属性的方法:

createMuiTheme({
    overrides: {
        MuiInputLabel: {
            formControl: {} <-- as in nothing in formControl, but this does not work

这可以做到吗？

Answer 1

您可以在InputLabelProps中将shr​​ink设置为false，以在编辑时移除输入标签的转换。

<TextField InputLabelProps={{ shrink: false }} />

但问题是如果你有任何值，它会与标签重叠，因为没有转换。解决方案是如果值不为空，则移除标签:

function App() {
  const [value, setValue] = useState("");

  return (
    <TextField
      variant="outlined"
      label={value ? " " : "my label"}
      InputLabelProps={{ shrink: false }}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

现场演示