更改 Select 组件的边框和箭头图标 Material UI 的颜色

Question

我正在尝试在深色背景上使用 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>
        )
    }
}

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

原文由 simen-andresen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 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 所建议的那样。查看更新的基于钩子的解决方案：

 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 许可协议

Answer 2

我不知道为什么设置边框和图标的颜色变得如此复杂。无论如何，上面的答案并没有帮助我设置图标颜色。最终，我通过这段代码找到了解决方案：

文字颜色：白色 边框：rgba(228, 219, 233, 0.25) 图标（箭头）：白色

  <Select
          // IconComponent={() => <ArrowDropDownIcon style={{marginRight:10,pointerEvents:'none'}}/>}
          labelStyle={{ color: '#ff0000' }}
          sx={{
            color: "white",
            '.MuiOutlinedInput-notchedOutline': {
              borderColor: 'rgba(228, 219, 233, 0.25)',
            },
            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
              borderColor: 'rgba(228, 219, 233, 0.25)',
            },
            '&:hover .MuiOutlinedInput-notchedOutline': {
              borderColor: 'rgba(228, 219, 233, 0.25)',
            },
            '.MuiSvgIcon-root ': {
              fill: "white !important",
            }
          }}
          labelId="select-filter-by-field-labe;"
          id="select-filter-by-field"
          value={'some value'}
        >

        </Select>

原文由 Oded Regev 发布，翻译遵循 CC BY-SA 4.0 许可协议