更改“选择”组件的边框和箭头图标“材质”用户界面的颜色 [英] Change color of Select component's border and arrow icon Material UI

问题描述

我正在尝试在深色背景上使用Material UI

但是我无法更改下拉图标，并在边框下划线为白色。我已经看过使用类覆盖样式，并且可以通过以下方式更改颜色：

  const styles = theme => {
 root：{
 borderBottom：'1px solid white'，
}，
 icon：{
 fill：'white'，
}，
} 
 
类MyComponent扩展了React.Component {
 
 render（）{
 const {classes} = this.props; 
 return（
< Select 
 value = {this.props.value} 
 inputProps = {{
 classes：{
 root：classes.border ，
图标：classes.icon，
}，
}} 
> 
< MenuItem 
 value = {this.props.value} 
> 
 Foo 
< / MenuItem> 
< / Select> 
）
} 
} 
  

但是，当选择组件处于焦点位置时，我似乎无法设置下划线的颜色，即使用上面的代码，我得到白色下划线和图标，但是当焦点位于组件上时，下划线保持黑色。

解决方案

在 Jan-Philipp 我得到了每一个ng也是白色，同时组件仍然处于焦点状态：

  const styles = theme => （{{
 select：{
'&：before'：{
 borderColor：color，
}，
'&：after'：{
 borderColor：color，
} 
}，
图标：{
 fill：color，
}，
}）; 
 
 
类MyComponent扩展了React.Component {
 
 render（）{
 const {classes} = this.props; 
 return（
< Select 
 value = 1 
 className = {{classes.select}} 
 inputProps = {{
 classes：{ 
图标：classes.icon，
}，
}} 
> 
< MenuItem value = 1> Foo 1< / MenuItem> 
< MenuItem value = 2> Foo 2< / MenuItem> 
< / Select> 
）
} 
} 
  

不是一种获得正确对比度的非常漂亮的解决方案，但确实可以。

I'm trying to use a Material UI Select component on a dark background:

But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:

const styles = theme => {
    root: {
       borderBottom: '1px solid white',
    },
    icon: {
       fill: 'white',
    },
}

class MyComponent extends React.Component {

    render() {
        const {classes} = this.props;
        return (
            <Select
                value={this.props.value}
                inputProps={{
                    classes: {
                        root: classes.border,
                        icon: classes.icon,
                    },
                }}
            >
                <MenuItem
                    value={this.props.value}
                >
                    Foo
                </MenuItem>
            </Select>   
        )
    }
}

However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.

解决方案

With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:

const styles = theme => ({
    select: {
        '&:before': {
            borderColor: color,
        },
        '&:after': {
            borderColor: color,
        }
    },
    icon: {
        fill: color,
    },
});


class MyComponent extends React.Component {

    render() {
        const {classes} = this.props;
        return (
            <Select
                value="1"
                className={{classes.select}}
                inputProps={{
                    classes: {
                        icon: classes.icon,
                    },
                }}
            >
                <MenuItem value="1"> Foo 1</MenuItem>
                <MenuItem value="2"> Foo 2</MenuItem>
            </Select>   
        )
    }
}

Not a very pretty solution to getting the right contrast, but it does the job.

这篇关于更改“选择”组件的边框和箭头图标“材质”用户界面的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！