如何更改Material-UI Select Field HR元素的颜色？

Question

您好，我的网站上有这个选择字段组件，我在Material-UI中使用。我试图覆盖样式以更改它生成的hr，默认情况下为浅灰色。它与我的背景融为一体，很难看到。我可以使用http://www.material-ui.com/#/components/select-field中的哪个属性来实现此目的？我尝试了几乎所有与样式相关的内容，但我无法弄清楚如何更改选择字段的这一特定部分。我已经通过在React中添加以下代码来更改图标：

  iconStyle: {
    fill: '#000000'
  }

  <SelectField value={this.state.selectedvalues.priority}
  onChange={this.priorityHandleChange} floatingLabelText="Priority"
  iconStyle={this.props.iconStyle}>

但我不能为我的生活找出如何覆盖它正在创建的hr元素。

Answer 1

这会将所有文本的颜色，图标（下拉指示符）和下划线更改为相同的颜色：

<SelectField
  underlineStyle={{ borderColor: '#ff0000' }}
  iconStyle={{ fill: '#ff0000' }}
  labelStyle={{ color: '#ff0000' }}
>....</SelectField>

这是JSX所以在普通的js / css中它不是驼峰的情况。而不是borderColor它是border-color

Answer 2

不要设置iconStyle，请尝试：

<SelectField value={this.state.selectedvalues.priority}
  onChange={this.priorityHandleChange} floatingLabelText="Priority"
  underlineStyle={{fill: '#000000'}}>

Answer 3

试试这个，将此样式添加到<hr>代码并尝试。要更改它的颜色，请更改border-bottom color。

<hr style="border-top: none rgb(224, 224, 224);border-right: none rgb(224, 224, 224);border-bottom: 1px solid #0086b3;border-left: none rgb(224, 224, 224);bottom: 8px;box-sizing: content-box;margin: 0px;position: absolute;width: 100%;">

＆＃13;

＆＃13;

<hr style="border-top: none rgb(224, 224, 224);border-right: none rgb(224, 224, 224);border-bottom: 1px solid #0086b3;border-left: none rgb(224, 224, 224);bottom: 8px;box-sizing: content-box;margin: 0px;position: absolute;width: 100%;">

＆＃13;

＆＃13;

＆＃13;

Answer 4

组件方法

根据docs看起来您应该可以使用underlineStyle属性。指定您要覆盖的css样式。

<SelectField value={this.state.selectedvalues.priority}
  onChange={this.priorityHandleChange} floatingLabelText="Priority"
  underlineStyle={{'border-color': 'red'}}>

样式表方法

在查看示例文档之后，看起来通常有一个div包装生成的选择，然后包含水平规则的div。如果你总是想要这个并且不想用javascript来定位它，你可以为你的css添加一个样式来覆盖样式。

要覆盖的键是!important。但这将覆盖一切。

div div > hr {
  border-bottom-width: 1px;
  border-style: none none solid;
  border-color: red !important;
  bottom: 8px;box-sizing: content-box;
  margin: 0px;position: absolute;width: 100%;
}

如果您可以将自己的类添加到选择字段，那么您可以更新css以定位该类。