ReactJS：如何将 Material-UI 的 <DatePicker/> 的占位符和文本居中？答案

【问题标题】：ReactJS: How can I center the placeholder and text for Material-UI's <DatePicker/>?ReactJS：如何将 Material-UI 的 <DatePicker/> 的占位符和文本居中？
【发布时间】：2017-02-08 09:48:14
【问题描述】：

我在我的 ReactJS 项目中使用来自 http://www.material-ui.com/#/components/date-picker 的 <DatePicker/>，并且希望居中对齐占位符和输入文本。所以我尝试了 textAlign:'center' 到 textFieldStyle 和常规的 style 属性，但仍然没有工作。

有没有办法实现居中对齐？

谢谢

编辑

//So inside tried style={{textAlign: 'center'}} and textFieldStyle={{textAlign: 'center}} but neither worked
<DatePicker hintText="Choose Date" container="inline" />

【问题讨论】：

你能分享你的代码吗？

标签： javascript css reactjs datepicker

【解决方案1】：

尝试使用“inputStyle”。这是 TextField 使用的属性。查看 DatePicker 的源代码，它看起来应该通过 JSX 的传播属性将该属性逐字传递到封闭的 TextField 中。所以，试试这个...

<DatePicker
    hintText="Choose Date"
    container="inline"
    inputStyle={{ textAlign: 'center' }}
/>

【讨论】：

【解决方案2】：

部分问题在于 Material-UI（无论好坏）决定内联他们所有的样式，其中许多都位于内部 div 中，不会被 JSX 样式覆盖。

如果您不以编程方式执行此操作，只需在 CSS 表中编写样式并将其添加到您的项目中，不幸的是，使用 !important 可能是最简单的方法。

如果它必须是程序化的（如在您的业务逻辑中规定您的 CSS 应该是什么），您可以尝试在 JavaScript 中编写样式表并将其附加到 DOM。

【讨论】：

抱歉，为了更清楚起见，您能否举例说明您的第一个建议？