CODEWITHSUNDEEP
cssreactjsmaterial-ui
hdk
hdk

Reputation: 900

MaterialUI how to align text inside an Input to the right or center?

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')}
/>

Upvotes: 7

Views: 20317

Answers (3)

George Munyoro
George Munyoro

Reputation: 1

In v6.4.5, the latest version currently. The accepted solution no longer works, this does:

<TextField
  slotProps={{
    htmlInput: {
      sx: {
        textAlign: "right",
      },
    },
  }}
/>

Note that the styling here is set on htmlInput, not input

Upvotes: 0

Pawan Gangwani
Pawan Gangwani

Reputation: 182

Please Use 

<Typography align="centre|right" />

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

Upvotes: 5

Nadun
Nadun

Reputation: 7863

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.

Upvotes: 8

Related Questions