React material-ui TextField text align and hide cursor

Question

I'd like to make Material-ui TextField read-only (not disabled) with text aligned to center and hidden cursos. I use

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

but this doesn't have effect.

Thank you for solutions.

Answer 1

InputStyle is indeed not part of the API anymore, but it seems you can supply the props to the input element for example for text align using:

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

I suspect this will allow you do to the same as inputStyle used to.

Answer 2

I was struggling with the same problem. The centering is the hardest part. What finally worked for me was the following combination of inline styles:

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

If you want to make the text field disabled, you can simply add disabled flag to it, i.e.

<TextField disabled />

Answer 3

To style the actual HTML input element, use the inputStyle property instead of style.

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

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

To make it read only, you just need to set the "value" property to the desired text. If you don't handle the onChange event, TextField won't let you modify the text.

Answer 4

With MUI version 5 - If you want to remove the blinking cursor you can do it like this:

<TextField
  InputProps={{ readOnly: true }}
/>