Material UI 如何将输入中的文本向右或居中对齐？

【问题标题】：MaterialUI how to align text inside an Input to the right or center?Material UI 如何将输入中的文本向右或居中对齐？
【发布时间】：2018-06-16 07:31:23
【问题描述】：

如何对齐 Material UI 输入文本的文本？以下似乎不起作用。我使用的是 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')}
/>

【问题讨论】：

有可能吗？找不到任何有关此的材料。
codesandbox.io/s/n4xm59xovj

标签： css reactjs material-ui

【解决方案1】：

你只需要使用（覆盖样式）：

classes={{
 input: classes.inputCenter
}}

样式应该是：

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

从这里浏览文档：https://material-ui.com/api/input/#css-api

这是一个工作示例：https://codesandbox.io/s/n9nr9x8xo0

希望这会对你有所帮助。

【讨论】：

谢谢你！帮了我很多
非常感谢您的指出。我修复了依赖问题。请检查。

【解决方案2】：

请使用

<Typography align="centre|right" />

如果你已经设置了特定的字体，那么将上述解决方案与 withStyle HOC 一起使用

【讨论】：