Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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')}
/>
like image 309
hashan.abeysinghe Avatar asked Jun 16 '18 07:06

hashan.abeysinghe


People also ask

How do I align text in material UI?

The Typography component of Material UI is used to present your text and content as clearly and efficiently as possible. Import: import Typography from '@material-ui/core/Typography'; // OR import { Typography } from '@material-ui/core'; Syntax: It sets the alignment property.

How do I align text in center right?

Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.

How do you center align text in TextField?

textAlign: TextAlign. center will align the text horizontally. To vertically align, you need to use textAlignVertical: TextAlignVertical. center property.

How do you align items in material UI?

Material-UI Grid Align Right If you need to horizontally align using only CSS, remember that justify-content horizontally aligns using the following values: flex-start: horizontally aligns left. center: horizontally aligns center. flex-end: horizontally aligns right.


2 Answers

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.

like image 94
Nadun Avatar answered Nov 15 '22 03:11

Nadun


Please Use

<Typography align="centre|right" />

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

like image 41
Pawan Gangwani Avatar answered Nov 15 '22 03:11

Pawan Gangwani