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

【问题标题】：How can I change the color of Material-UI Select Field HR element?如何更改 Material-UI Select Field HR 元素的颜色？
【发布时间】：2016-08-09 14:13:10
【问题描述】：

您好，我在 Material-UI 中使用的网站上有这个 Select Field 组件。我正在尝试覆盖样式以更改它生成的 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 元素。

【问题讨论】：

您是否尝试过更改 underlineStyle 属性？

标签： javascript css reactjs material-ui

【解决方案1】：

这会将文本、图标（下拉指示器）和下划线的颜色全部更改为相同的颜色：

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

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

【讨论】：

我们可以为 iconstyle 应用多种样式吗？
是的，ofc，它是一个包含驼峰式 css 属性的对象，即iconStyle={{ fill: '#ff0000', paddingLeft: '15px', fontWeight: '800' }}。但我不知道哪些与图标相关。这是一个 SVG，如果对你有帮助的话

【解决方案2】：

不要设置 iconStyle，试试这个：

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

【讨论】：

【解决方案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%;">

&lt;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%;"&gt;

【讨论】：

这行得通。我可以通过 Chrome 对其进行测试，唯一的问题是使用 React 和 Material-UI 我不能以这种方式直接编辑任何 HTML，因为它是生成的。所以我需要一种基本上覆盖组件创建的样式的方法。
@Dan 根据该网站上提供的文档，underlineStyle 应该可以工作。
material-ui 不是这样工作的。它必须通过 SelectField 组件的参数。

【解决方案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 以定位该类。

【讨论】：