将react-text-mask与Material-UI输入一起使用时渲染“轮廓”输入

Question

我无法弄清楚如何渲染轮廓输入类型（与文本蒙版一起使用时的标准 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>

Answer 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'
  }