[Chip] Custom color other than "primary" or "secondary"

[lukefisklennon]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Currently, the Chip component only supports "default", "primary" or "secondary" for the color value. To use custom colors (i.e. arbitrary hex), I can hack this with the background-color CSS for the default chip style. However, for the outlined variant, this is more difficult because it requires styling the text, border and icons in the chip. It would be better if the color value supported any chip colors.

Motivation 🔦

I'm using this in the autocomplete component, where selected items are color-coded (there's an arbitrary number of these colors).

Thanks in advance!

[oliviertassinari]

Duplicate of #13875

[nico-medina]

For those trying to get this previous to the v5 (which would need to add a new color to the palette) a simple wrapper will get the job done:

import React from 'react';
import PropTypes from 'prop-types';
import MaterialChip from '@material-ui/core/Chip';
import { withStyles } from '@material-ui/core/styles';

const Chip = (props) => {
    const StyledChip = withStyles({
        root: {
            'color': 'white',
            'backgroundColor': `${props.color} !important`,
            '&:hover': {
                backgroundColor: props.color,
                filter: 'brightness(120%)',
            },
            '&:active': {
                boxShadow: 'none',
                backgroundColor: props.color,
                borderColor: props.color,
            },
        },
        outlined: {
            color: props.color,
            border: `1px solid ${props.color}`,
            backgroundColor: `transparent !important`,
        },
        icon: {
            color: props.variant === 'outlined' ? props.color : 'white',
        },
        deleteIcon: {
            color: props.variant === 'outlined' ? props.color : 'white',
        },
    })(MaterialChip);

    return <StyledChip {...props} />;
};

Chip.propTypes = {
    color: PropTypes.string,
    variant: PropTypes.oneOf(['regular, outlined']),
};

export default Chip;