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

【问题标题】：Material-UI Core TextField globally set InputLabelProps shrinkMaterial-UI Core TextField 全局设置 InputLabelProps 收缩
【发布时间】：2018-09-20 16:28:45
【问题描述】：

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

我不想到处添加这个：

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

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

我已尝试在此处添加shrink: true

overrides: {
    MuiInput: { ...

这里

overrides: {
    MuiInputLabel: { ...

但我无法让它工作。

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

谢谢

【问题讨论】：

您找到解决方案了吗？有同样的问题。我不想使用标签，只想使用常规占位符。但是，如果默认情况下输入不是“缩小”。占位符在获得焦点之前不会显示。
我没有。我不再使用 Material UI（不是我的选择），但在我改变之前，我最终创建了自己的组件并在任何地方使用它。

标签： reactjs material-ui

【解决方案1】：

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

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

按照 Alireza 的建议，最好的解决方案是创建组件的自定义变体。这是一个例子：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

+1 这是我唯一的其他选择，但使用 MUI 0 版很容易做到这一点，而且他们似乎不会删除它。不过谢谢

【解决方案3】：

如果您真的不想费心创建自定义组件，可以使用主题覆盖来关闭它。只需将收缩 css 属性复制到 MuiInputLabel。像这样的：

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

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

此外，如果您不使用“轮廓”，则不需要填充或背景属性，并且它应该与带有“收缩”的其他字段看起来相同。

【讨论】：