Material-UI核心TextField全局设置的InputLabelProps缩小

Question

有人知道如何使用Material-UI文本字段（或输入（如果需要使用此输入））来全局覆盖标签的缩小吗？

我不想在任何地方添加它：

...      
InputLabelProps={{
    shrink: true,
}}

但是我似乎无法找出createMuiTheme中的正确替代。

我尝试在此处添加shrink: true

overrides: {
    MuiInput: { ...

在这里

overrides: {
    MuiInputLabel: { ...

但是我无法使其正常工作。

如果有人也可以将我的文档/代码指向他们想出来的地方，那真是太棒了！

谢谢

Answer 1

如果您想覆盖基本组件的某些方法，我认为最好的方法是创建自定义组件并更改所需内容，然后在项目中使用自己的组件。对于这种反应，您会得到想要的任何东西

Answer 2

仅说明一下，在版本1（及更高版本）中，主题覆盖允许您自定义组件的样式，而不是prop。这种方法功能强大得多，因为它可以让您完全控制所有“材质UI样式”。

在这种情况下，您需要修改每个TextField变体的样式，以便默认应用缩小样式（see implementation）

最好的解决方案是按照Alireza的建议创建组件的自定义版本。这是一个示例：

import TextField from "@material-ui/core/TextField";

function CustomTextField({ InputLabelProps = {}, ...props }) {
  return (
    <TextField
      InputLabelProps={{ ...InputLabelProps, shrink: true }}
      {...props}
    />
  );
}

Answer 3

如果您真的不想打扰创建自定义组件，则可以使用主题替代将其关闭。只需将收缩css属性复制到MuiInputLabel。像这样：

MuiInputLabel: {
  outlined: {
    transform: 'translate(14px, -6px) scale(0.75)',
    transformOrigin: 'top left',
    padding: '0 2px',
    background: '#ffffff',
  },
},

这不是完美的，因为填充同时应用于缩小和覆盖，但是非常接近。

此外，如果您不使用“概述”，则不需要填充或背景属性，并且外观应与带有“收缩”的其他字段相同。

Answer 4

const theme = {
  props: {
    MuiInputLabel: {
      shrink: true,
    },
  },
}