Material-UI Core TextField 全局设置 InputLabelProps 收缩

Question

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

我不想在任何地方添加这个：

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

但我似乎无法弄清楚createMuiTheme.

我试过shrink: true在这里添加

overrides: {
    MuiInput: { ...

和这里

overrides: {
    MuiInputLabel: { ...

但我无法让它工作。

如果有人可以将我的文档/代码指向他们发现这一点的地方，那就太棒了！

谢谢

Answer 1

澄清一下，在版本 1（及更高版本）中，主题覆盖允许您自定义组件的样式，而不是道具。这种方法更强大，因为它使您可以完全控制所有 Material UI 样式。

在这种情况下，您需要修改每个 TextField 变体的样式，以便默认情况下应用收缩样式（请参阅实现）

正如 Alireza 建议的那样，最好的解决方案是创建组件的自定义变体。下面是一个例子：

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

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

Answer 2

如果您想覆盖基本组件的某些方法，在我看来，最好的方法是创建自定义组件并更改您需要的任何内容，然后在项目中使用您自己的组件。因为这个反应可以给你任何你想要的东西