7

How to align text of a Material UI input text? Following does not seem to work. Im using version 1.x

import {Input} from 'material-ui';

//didn't work
<Input
   className="max-w-128 inline-block"
   style = {{textAlign: 'center'}}
   id="input-quantity"
   inputStyle={{ textAlign: 'center' }}
   //tried hintStyle as suggested in a bug
   hintStyle={{ width: '600px', textAlign: 'center' }}
   value={this.state.currentRecord.quantity}
   onChange={this.handleCurrentRecordTextChange('quantity')}
/>
2
  • is it even possible? couldn't find any material regarding this.
    – hdk
    Commented Jun 16, 2018 at 7:48
  • codesandbox.io/s/n4xm59xovj
    – hdk
    Commented Jun 16, 2018 at 8:36

2 Answers 2

8

you just need to use (with styles overriding) :

classes={{
 input: classes.inputCenter
}}

and the styles should be:

const styles = theme => ({
  inputCenter: {
    textAlign: "center",
    color: "red"
  }
});

go through the documentation from here: https://material-ui.com/api/input/#css-api

here is a working example: https://codesandbox.io/s/n9nr9x8xo0

hope this will help you.

2
  • Thank u! Helped me a lot
    – Zkk
    Commented Mar 29, 2019 at 17:11
  • Thank you very much for pointing out. I fixed the dependency issues. please check.
    – Nadun
    Commented Jun 18, 2020 at 2:06
5

Please Use

<Typography align="centre|right" />

If you have specific font already set then use above solution with withStyle HOC

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.