使用带有 Material-UI 输入的 react-text-mask 时呈现“轮廓”输入

【问题标题】：Render "outlined" input when using react-text-mask with Material-UI inputs使用带有 Material-UI 输入的 react-text-mask 时呈现“轮廓”输入
【发布时间】：2020-07-14 22:10:45
【问题描述】：

我无法弄清楚如何呈现轮廓输入类型（与文本掩码一起使用时的标准 Material-UI 输入样式之一）。

我从这里复制了代码示例：https://material-ui.com/components/text-fields/ 但它只提供了常规（下划线）输入的示例，但没有提供概述。

这是我正在尝试做的，但它不起作用：

const ExpirationMask = props => {
  const { inputRef, ...other } = props

  return <MaskedInput
      {...other}
      ref={ref => {inputRef(ref ? ref.inputElement : null)}}
      mask={[/\d/, /\d/,'/' ,/\d/, /\d/]}
      placeholderChar={'\u2000'}
    />
}

<FormControl
  variant='outlined'                         //this doesnt work
  fullWidth
>
<InputLabel>Expiration</InputLabel>
<Input
  value={ccExpiration}
  onChange={(e, v) => setCCExpiration(e.target.value)}
  placeholder='MM/YY'
  variant='outlined'                         //this doesnt work either
  inputComponent={ExpirationMask}
/>
</FormControl>

【问题讨论】：

AFAIK 变体是组件的属性，您将其用于输入。输入没有变体属性。

标签： reactjs material-ui

【解决方案1】：

我找到了解决方案。我没有意识到TextField 只是Input 的包装。

还有另一个用于输入的包装器，称为OutlinedInput。所以这正是我最终使用的：

<FormControl
  fullWidth
  margin='dense'
>
<InputLabel
  classes={{ root: classes.expInputRoot }}
  error={ccExpiration.trim().length < 5}
  color='primary'>
  Expiration
</InputLabel>
<OutlinedInput
  value={ccExpiration}
  onChange={(e, v) => setCCExpiration(e.target.value)}
  label="Expiration"
  placeholder='MM/YY'
  error={ccExpiration.trim().length < 5}
  inputComponent={ExpirationMask}
/>
</FormControl>

这样做时我遇到了另一个问题，但是 InputLabel 没有正确对齐（不确定是错误还是什么），所以我最终像这样手动更改了它的样式：

 expInputRoot: {
    margin:'-8px 0 0 14px'
  }

【讨论】：