首页 > 解决方案 > MaterialUI如何将输入内的文本向右或居中对齐?

问题描述

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

标签: cssreactjsmaterial-ui

解决方案


您只需要使用(样式覆盖):

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

希望这会帮助你。


推荐阅读