React material-ui TextField文本对齐并隐藏光标

时间:2016-10-06 09:08:09

标签: reactjs material-ui

我想将Material-ui TextField设为只读(未禁用),文本与中心和隐藏的cursos对齐。 我用

style={{ textAlign: 'center', cursor: 'none' }}

但这并没有效果。

感谢您提供解决方案。

3 个答案:

答案 0 :(得分:4)

要设置实际HTML输入元素的样式,请使用inputStyle属性而不是样式。

inputStyle = {{textAlign:' center',cursor:' none' }}

参考:http://www.material-ui.com/#/components/text-field

要将其设为只读,您只需设置"值"属性到所需的文本。如果您不处理onChange事件,则TextField不允许您修改文本。

答案 1 :(得分:3)

我正在努力解决同样的问题。居中是最难的部分。 最终对我有用的是以下内联样式的组合:

<TextField
  inputStyle={{ textAlign: 'center' }}
  hintStyle={{ textAlign: 'center', width: '100%' }}
  floatingLabelStyle={{ textAlign: 'center', width: '100%', transformOrigin: 'center top 0px' }}
  {...otherProps}
/>

如果您想禁用文本字段,只需向其添加disabled标记,即

<TextField disabled />

答案 2 :(得分:0)

InputStyle确实不再是API的一部分,但是您似乎可以使用以下方式为输入元素提供道具,例如使用

进行文本对齐:

inputProps={{ style: {textAlign: 'center'} }}

我怀疑这将允许您执行与inputStyle相同的操作。