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 所建议的那样。查看更新的基于钩子的解决方案：
 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>
原文由 simen-andresen 发布，翻译遵循 CC BY-SA 4.0 许可协议