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')}
/>
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.
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.
textAlign: TextAlign. center will align the text horizontally. To vertically align, you need to use textAlignVertical: TextAlignVertical. center property.
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.
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.
Please Use
<Typography align="centre|right" />
If you have specific font already set then use above solution with withStyle HOC
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With