在选择下拉菜单中更改占位符的文本颜色 - Material-ui答案

【问题标题】：Change text colour of placeholder in select drop down - Material-ui在选择下拉菜单中更改占位符的文本颜色 - Material-ui
【发布时间】：2019-06-14 20:06:21
【问题描述】：

我有一个 material-ui 选择组件，它向用户显示下拉选项。占位符文本显示为“选择选项”，告诉用户选择他们想要的选项。这以浅灰色文本显示，但由于文本颜色太浅，色盲者可能难以阅读。因此，我想让文本颜色更深，但不知道如何。如果可能的话，我不想让占位符成为下拉列表中的选项之一。

选择组件的代码是：

<Select 
  options = {options}
  isMulti
  placeholder= "Select Options"
  value = {this.selectedOptions"
  onChange={this.changeH}
  className = SelectOptionsDropDown
/>

.css 文件中的样式是：

.SelectOptionsDropDown {
  text-align: center;
  margin: 10px;
 }

这种样式完全有效

【问题讨论】：

请贴出整个代码
@ThanveerShah codesandbox.io/s/xp2jz5k3ow
您提供的代码框不是有效的Select（例如，当我单击它时没有显示任何选项）。

标签： javascript material-ui

【解决方案1】：

您可以使用::placeholder，如下所示：

.SelectOptionsDropDown::placeholder{
    color: red;
  }

请注意，IE不支持，请查看here。

【讨论】：

嗨，我添加了这个，但它实际上并没有应用更改，我现在的样式很好，虽然这很奇怪
完整代码太长，无法放在某个地方，但我可以尝试将这个功能复制到代码沙箱或其他东西中
我认为，您以错误的方式实现了 @material-ui 的 Select。请检查此演示是否相同：codesandbox.io/s/6y86ywjmy3

【解决方案2】：

你可以试试这个方法吗？

<Select
fullWidth
size="small"
displayEmpty
inputProps={{ 'aria-label': 'select' }}
value={age}
onChange={handleChange}/>
 <MenuItem value="" disabled>
    <em style={{color:"#9E9E9E"}}>Placeholder</em>
 </MenuItem>
 <MenuItem value={'A'}>Option A</MenuItem>
 <MenuItem value={'B'}>Option B</MenuItem>
 <MenuItem value={'C'}>Option C</MenuItem>
</Select>

【讨论】：