[英]How can I center-align Material-ui TextField text and also set a min number value?
I am trying to both center align the text inside and set a min number value to 0. But that is not occurring.我正在尝试将文本居中对齐并将最小数值设置为 0。但这并没有发生。 I can do either or but not both at the same time.
我可以同时做其中一个,但不能同时做两个。 I looked at the material-ui page on TextField but it was no help --> here
我查看了 TextField 上的 material-ui 页面,但没有帮助 -->这里
<TextField type="number"
id={cells.id}
inputProps={{min: 0}}
InputProps={classes.inputText}
className={classes.inputComponent}
disabled={cells.disabled}
defaultValue={cells.text} />
I need to set a style for the text field itself and style for the text inside.我需要为文本字段本身和里面的文本设置样式。
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',
}
Change JSX a little:稍微改变 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} />
Reason原因
InputStyle
is not part of the API anymore. InputStyle
不再是 API 的一部分。
You need to use it as style: {}
inside inputProps
the same way as InputStyle
before.您需要将其用作
style: {}
在inputProps
中与之前的InputStyle
相同。
For MUI v5:对于 MUI v5:
<TextField
sx={{input: {textAlign: "center"}}}
/>
UPDATE Material UI 5更新材质 UI 5
With the new version of Material UI, the inputProps is one level deeper.使用新版本的 Material UI,inputProps 更深一层。
<TextField
InputProps={{
inputProps: {
style: { textAlign: "right" },
}
}}
/>
for right-align右对齐
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,
}
}
})
and then进而
function ComponentNam (){
const classes = useStyles();
return(
<TextField className={classes.input} fullWidth label="کلمه را وارد
کنید" id="fullWidth" />
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.