更改“选择”组件的边框和箭头图标“材质”用户界面的颜色

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

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

Answer 1

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

文本颜色：白色 边框：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>

Answer 2

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

不是获得正确对比度的非常漂亮的解决方案，但是它可以完成工作。

Answer 3

<Select>您可以使用以下声明更改 MUI 组件的边框颜色和 SVG 图标颜色：

<Select
    sx={{
        height: '2.5rem',
        color: 'white',
        '& .MuiOutlinedInput-notchedOutline': {
            borderColor: 'white'
        },
        '& .MuiSvgIcon-root': {
            color: 'white'
        }
    }}
>