web-dev-qa-db-fra.com

Changer la couleur de l'icône de bordure et de flèche du composant Sélectionner l'interface utilisateur du matériau

J'essaie d'utiliser une interface utilisateur matérielle Sélectionner sur un fond sombre:

enter image description here

Mais je ne peux pas changer la couleur de l'icône déroulante et souligner la bordure en blanc. J'ai cherché à remplacer les styles à l'aide de classes, et je suis en mesure de changer de couleur avec les éléments suivants:

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

Cependant, je n'arrive pas à définir la couleur du soulignement lorsque le composant Select est au point, c'est-à-dire qu'avec le code ci-dessus, j'obtiens le soulignement et l'icône blancs, mais pendant que le focus est sur le composant, le soulignement reste noir.

cssreactjsmaterial-ui
6
simen-andresen

Avec l'aide de Jan-Philipp J'ai tout obtenu en blanc, même si le composant reste au point:

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

Pas une très jolie solution pour obtenir le bon contraste, mais ça fait l'affaire.

2
simen-andresen

Vous pouvez modifier la couleur de la bordure inférieure avec le code suivant. J'espère que cela vous aidera.

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

Exemple dans CodeSandbox

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

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