Change color of Select component's border and arrow icon Material UI

问题

I'm trying to use a Material UI Select component on a dark background:

But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:

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

However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.

回答1:

With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:

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

Not a very pretty solution to getting the right contrast, but it does the job.

回答2:

You can change the bottom border color with the following code. Hope this helps you.

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

Example in CodeSandbox

回答3:

You can access input (and the underline) like so:

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

回答4:

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

<Select
   className={classes.select}
   value={selected}
   onChange={this.handleChange}
>

来源：https://stackoverflow.com/questions/51387085/change-color-of-select-components-border-and-arrow-icon-material-ui

标签

css

reactjs

material-ui