MaterialUI如何将输入框中的文本右对齐或居中对齐？

Question

如何对齐 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')}
/>

- hdk

---

这是否可能？我找不到任何关于此的资料。 - hdk

https://codesandbox.io/s/n4xm59xovj - hdk

Answer 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

希望这可以帮助您。

- Nadun

---

谢谢！帮了我很多。 - Zkk

非常感谢您的指出。我已经修复了依赖问题，请检查。 - Nadun

Answer 2

请使用

标签

。

<Typography align="centre|right" />

如果您已经设置了特定的字体，则使用带有withStyle HOC的上述解决方案。

- Pawan Gangwani