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

【问题标题】：How can I center-align Material-ui TextField text and also set a min number value?如何将 Material-ui TextField 文本居中对齐并设置最小数值？
【发布时间】：2019-06-07 19:28:58
【问题描述】：

我正在尝试将内部文本居中对齐并将最小数值设置为 0。但这并没有发生。我可以做任何一个，但不能同时做两个。我查看了TextField上的material-ui页面，但没有任何帮助--> here

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

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案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 的一部分。

您需要在inputProps 中将其用作style: {}，与之前的InputStyle 相同。

【讨论】：

感谢您的帮助！您能否给我发一个链接，指向您发现 API 更改的地方？
我自己看源代码的时候想出来的。
我收到一条警告说：失败的道具类型：无效的道具InputProps 类型为string 提供给TextField，预计object。你知道为什么会这样吗？
该字段本身看起来如预期。但发出警告。我可以忽略它，但最好不要用于生产。
看起来他们忘记更新PropTypes。它发生在像这样的大项目中。只要它有效，我们就可以忽略它。

【解决方案2】：

更新材质 UI 5

使用新版本的 Material UI，inputProps 更深了一层。

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

【讨论】：

在这方面，这似乎也是在 Material UI 4 中进行右对齐的唯一方法。（例如，您可以在不使用 sub-inputProps 的情况下使文本变为粗体，但不能使用 textAlign。）示例：codesandbox.io/s/textfield-align-right-2jv00?file=/demo.js

【解决方案3】：

对于 MUI v5：

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

【讨论】：

【解决方案4】：

右对齐

    import { styled } from '@mui/material/styles';
    const useStyles = makeStyles({
    input: {
      "& .css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input": {
        textAlign: 'right',
      },
       "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
           textAlign: 'right'
       },

       "& .css-1kty9di-MuiFormLabel-root-MuiInputLabel-root": {
           transformOrigin: 'top left' ,
           left: 'auto',
           right: 8,
       },

       "& .css-14s5rfu-MuiFormLabel-root-MuiInputLabel-root" :{
           left: 'auto',
           right: 20,
       }
    }
  })

然后

    function ComponentNam (){ 
        const classes = useStyles();
        return(
         <TextField className={classes.input} fullWidth label="کلمه را وارد
          کنید" id="fullWidth" /> 
        )
     }

【讨论】：