MaterialUI how to align text inside an Input to the right or center?
14,632
Solution 1
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.
Solution 2
Please Use
<Typography align="centre|right" />
If you have specific font already set then use above solution with withStyle HOC
Related videos on Youtube
Author by
hdk
Updated on May 21, 2022Comments
-
hdk almost 2 years
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')} />
-
Zkk about 5 yearsThank u! Helped me a lot
-
Nadun almost 4 yearsThank you very much for pointing out. I fixed the dependency issues. please check.