如何将 Material-ui TextField 文本居中对齐并设置最小数值？

Question

我试图将里面的文本居中对齐并将最小数值设置为 0。但这并没有发生。我可以同时做，也可以做，但不能同时做。我查看了 TextField 上的 material-ui 页面，但没有帮助 -->此处

<TextField type="number" 
    id={cells.id} 
    inputProps={{min: 0}} 
    InputProps={classes.inputText}  
    className={classes.inputComponent} 
    disabled={cells.disabled} 
    defaultValue={cells.text} />

我需要为文本字段本身设置样式并为里面的文本设置样式。

inputComponent: {
    height: '30px',
    width:  '71px',
    border: '1px solid #D3D4D0',
    borderRadius: '5px',
    backgroundColor: '#FFFFFF',
    boxShadow: '0 1px 0 0 rgba(170,170,170,0.01)'
}

inputText: {
    color: 'rgba(0,0,0,0.87)',
    fontSize: '16px',
    letterSpacing: '0.5px',
    lineHeight: '28px',
    textAlign: 'center',
}

Answer 1

稍微改变 JSX：

<TextField type="number" 
    id={cells.id} 
    inputProps={{min: 0, style: { textAlign: 'center' }}} // the change is here
    InputProps={classes.inputText}  
    className={classes.inputComponent} 
    disabled={cells.disabled} 
    defaultValue={cells.text} />

原因

InputStyle 不再是 API 的一部分。

您需要像以前一样style: {}在内部使用它。inputPropsInputStyle

Answer 2

更新材质 UI 5

在新版本的 Material UI 中，inputProps 更深了一层。

<TextField 
    InputProps={{
        inputProps: {
            style: { textAlign: "right" },
        }
    }}
/>

Answer 3

对于 MUI v5：

<TextField
  sx={{input: {textAlign: "center"}}}
/>