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

Question

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

我不想到处添加这个：

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

但我似乎无法找出正确的覆盖createMuiTheme。

我试过shrink: true在这里添加

overrides: {
    MuiInput: { ...

和这里

overrides: {
    MuiInputLabel: { ...

但我无法让它工作。

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

谢谢

标签： reactjsmaterial-ui

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}
    />
  );
}