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

IT技术 css reactjs material-ui
2021-05-14 04:25:25

我正在尝试在深色背景上使用 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 组件处于焦点时，我似乎无法设置下划线的颜色，即使用上面的代码，我得到白色下划线和图标，但是当焦点在组件上时，下划线保持黑色。

4个回答

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

您可以使用以下代码更改底部边框颜色。希望这对你有帮助。

const styles = theme => ({
  select: {
    "&:before": {
      borderColor: "red"
    }
  }
});

const MySelect = ({ classes }) => (
  <Select value="1" className={classes.select}>
    <MenuItem value="1">Option 1</MenuItem>
    <MenuItem value="2">Option 2</MenuItem>
    <MenuItem value="3">Option 3</MenuItem>
  </Select>
);

CodeSandbox 中的示例

您可以像这样访问输入（和下划线）：

<Select
  autoWidth
  classes={{
    root: styles.root,
    select: styles.select
  }}
  displayEmpty
  input={
    <Input
      classes={{
        underline: styles.underline
      }}
    />
  }
  onChange={this.onChange}
  value=""
>

select: {
   '&:before': {
        borderColor: 'var(--galaxy-blue)',
    },
    '&:hover:not(.Mui-disabled):before': {
        borderColor: 'var(--galaxy-blue)',
    }
},

<Select
   className={classes.select}
   value={selected}
   onChange={this.handleChange}
>
其它你可能感兴趣的问题
上一篇如何配置 Marlin 以使用双挤出机启用自动风扇 下一篇Monoprice Select Mini 上的“神奇数字”是什么？