reactjs - 将react-text-mask与Material-UI输入一起使用时渲染 "outlined"输入

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