如何更改Material-UI选择字段HR元素的颜色？

您好我有我从材料的UI使用在我的网站这个选择字段组成。我试图重写样式来更改它生成的hr，默认情况下为浅灰色。它与我的背景融合太多，很难看清楚。 http://www.material-ui.com/#/components/select-field哪个属性可以用来实现这个功能？我已经尝试了几乎所有与造型有关的方面，我无法弄清楚如何改变Select Field的这一个特定部分。我已经通过加入如下代码更改图标阵营：

iconStyle: { 
    fill: '#000000' 
    } 

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

但我不能为我的生活弄清楚如何我可以覆盖hr元素，它是创造。

来源

2016-08-09 Dan

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

试试这个，将此样式添加到您的<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%;">

<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%;">

来源

2016-08-09 14:22:51 frnt

这将工作。我可以通过Chrome测试它，只有使用React和Material-UI的问题我不能以这种方式直接编辑任何HTML，因为它是生成的。所以我需要一种基本覆盖由组件创建的样式的方法。 – Dan

@丹根据该网站上提供的文档underlineStyle是一个应该工作。 – frnt

这不是material-ui的工作原理。它必须通过SelectField组件的参数。 – Laker

而不是设置iconStyle的，试试这个：基于它看起来像你应该能够使用underlineStyle属性docs

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

来源

2016-08-09 14:29:47 Cameron

这不作任何更改... – Dan

。指定您正在覆盖的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来定位该类。

来源

2016-08-09 14:39:38 user3366016

这将改变文本的颜色，所有的人的图标（下拉指标）和下划线颜色相同：

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

这是JSX所以在纯JS/CSS这不是骆驼情况。而不是borderColor它是border-color

来源

2016-11-15 09:35:55 Laker

我们可以将多种样式应用于iconstyle吗？ –

是的，ofc，它是包含骆驼情况下css属性的对象，即'iconStyle = {{fill：'＃ff0000'，paddingLeft：'15px'，fontWeight：'800'}}''。但我不知道哪些与图标有关。这是一个** SVG **，如果这能帮助你 – Laker

如何更改Material-UI选择字段HR元素的颜色？

回答

相关问题