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

时间:2019-06-07 19:28:58

标签: javascript reactjs material-ui

我正在尝试使文本内部居中对齐并将最小数值设置为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',
}

1 个答案:

答案 0 :(得分:1)

稍微更改JSX:

Book.title.like('%' + str(query.lower()) + '%')

原因

<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} /> 不再是API的一部分。

您需要像以前InputStyle一样在style: {}内部将其用作inputProps