Material UI - 为输入占位符文本设置样式答案

【问题标题】：MaterialUI - Styling an Input's placeholder textMaterial UI - 为输入占位符文本设置样式
【发布时间】：2018-12-04 22:59:06
【问题描述】：

对于一些类似的 Material UI 问题，我尝试了一些堆栈溢出答案，但似乎没有一个解决方案适合我的情况。

我有一个带有占位符文本的 Input 组件。我想设置占位符文本的大小和字体系列。现在我只是通过组件上的 inputProps 进行内联样式设置。这是我的代码：

<Input
          inputProps={{
            classes: {
              fullWidth: {fontFamily: 'Open Sans', fontSize: 18.9}
            }
          }}
          fullWidth={true}
          placeholder="Business Email Address"
          onChange={this._onChange}
        />

【问题讨论】：

标签： css material-ui

【解决方案1】：

在 es6 中你可以使用样式化组件，用样式创建常量

//this out side the class
const inputStyle = {
  fontFamily: 'Open Sans', 
  fontSize: 18.9px
};

<Input
   style={inputStyle}
   fullWidth={true}
   placeholder="Business Email Address"
   onChange={this._onChange}
/>

我希望这对你有用

【讨论】：

谢谢，我试图遵循 Material-UI 文档并忽略了这个简单的解决方案

【解决方案2】：

我知道我在回答一个老问题，但是...

另一种选择是在您的样式中使用“&”选择器。

'& ::placeholder': {
   //Styles go here...
}

这将直接影响占位符文本。

【讨论】：