我正在尝试使用 Material UI Select深色背景上的组件:

但我无法将下拉图标和下划线边框的颜色更改为白色。我研究过使用类覆盖样式，并且可以使用以下内容更改颜色:

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>    
        ) 
    } 
} 

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

请您参考如下方法:

在 Jan-Philipp 的帮助下当组件保持焦点时，我将所有内容都设置为白色:

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>    
        ) 
    } 
} 

对于获得正确的对比度来说，这不是一个非常漂亮的解决方案，但它确实可以完成任务。

编辑 正如 @Sara Cheatham 所建议的，上面的答案缺少一些代码，并且还缺少悬停颜色。查看更新的基于钩子(Hook)的解决方案:

const useStyles = makeStyles({ 
    select: { 
        '&:before': { 
            borderColor: 'white', 
        }, 
        '&:after': { 
            borderColor: 'white', 
        }, 
        '&:not(.Mui-disabled):hover::before': { 
            borderColor: 'white', 
        }, 
    }, 
    icon: { 
        fill: 'white', 
    }, 
    root: { 
        color: 'white', 
    }, 
}) 
 
export const MyComponent = () => { 
    const classes = useStyles() 
    return ( 
        <Select 
            className={classes.select} 
            inputProps={{ 
                classes: { 
                    icon: classes.icon, 
                    root: classes.root, 
                }, 
            }} 
            value='1' 
        > 
            <MenuItem value='1'> Foo 1</MenuItem> 
            <MenuItem value='2'> Foo 2</MenuItem> 
        </Select> 
    ) 
}