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

Question

有人知道如何全局覆盖使用Material-UI Textfield（或Input，如果需要）时标签的缩小吗？

我不想在每个地方都添加这个：

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

但是我似乎无法弄清在createMuiTheme中正确的覆盖设置。

我已经尝试在这里添加shrink: true。

overrides: {
    MuiInput: { ...

并在这里

overrides: {
    MuiInputLabel: { ...

但我无法让它正常工作。

如果有人能够指导我查找文档或代码，找到他们解决问题的方法，那将是太棒了！

谢谢。

- Kurtis

---

你找到解决方案了吗？我也遇到了同样的问题。我不想使用标签，只想使用普通的占位符。但是如果输入框默认情况下没有“收缩”，则占位符直到聚焦才会显示出来。 - MLyck

我没有。我不再使用Material UI（这不是我的选择），但在更改之前，我最终创建了自己的组件并在各处使用它。 - Kurtis

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

- Luke Peavey

Answer 2

你可以尝试这个：

 MuiTextField: {
  defaultProps: {
    variant: 'outlined',
    margin: 'dense',
    size: 'small',
    fullWidth: true,
    InputLabelProps: { shrink: true },  <----
  },
},

- Andrey Patseiko

---

这应该是被接受的答案。可能需要添加一些有关 MUI 主题的上下文。 - ravi

Answer 3

如果你想要覆盖基本组件的某些方法，在我看来，最好的方式是创建自定义组件并更改你需要的任何内容，然后在项目中使用你自己的组件。为此，React提供了一切你需要的东西。

- Alireza Yadegari

---

+1 这是我唯一的另一个选项，但在 MUI 0 版本中，这很容易做到，而且似乎他们不会移除这个功能。谢谢。 - Kurtis

Answer 4

我们可以使用InputLabelProps属性来启用收缩选项。

const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink
}) => {
    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }} // we can mention this way to shrink the label
            required={required}
            onChange={handleChange}
            InputProps={{
                endAdornment: (
                    (value.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool.isRequired,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    required: PropTypes.bool.isRequired,
    value: PropTypes.string.isRequired,
}

- KARTHIKEYAN.A

Answer 5

如果您真的不想费心创建自定义组件，可以使用主题覆盖来接近它。只需将缩小的 CSS 属性复制到 MuiInputLabel 中即可。类似于这样：

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

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

此外，如果您没有使用“outlined”，则不需要填充或背景属性，它应该与具有“shrink”的其他字段完全相同。

- sornman