[chip] it should accept a custom color

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The Chip component accepts a color attribute, but it can only refer to a color from the theme:

<Chip label="primary" color="primary" />

A custom color can be provided by a wrapping ThemeProvider, e.g.:

export const ColorChip: React.FunctionComponent<ColorChipProps> = (props) => {
  return (
    <ThemeProvider
      theme={(theme: Theme) =>
        createTheme({
          ...theme,
          palette: {
            ...theme.palette,
            primary: {
              main: props.color.color,
            },
          },
        })
      }
    >
      <Chip
        color="primary"
        label={props.color.name}
        onClick={() => props.onSelectedChange(!props.isSelected)}
        variant={props.isSelected ? 'filled' : 'outlined'}
        sx={{
          border: props.isSelected ? `1px solid ${props.color.color}` : undefined,
        }}
      />
    </ThemeProvider>
  )
}

This works fine, until multiple of those chips get changed at once - re-inserting the ThemeProvider components is really slow (38 chips takes over 5 seconds, with the UI freezing in the meantime).

Another approach would be to override the background color, e.g.:

export const ColorChip: React.FunctionComponent<ColorChipProps> = (props) => {
  const styleOverride = props.isSelected ? {backgroundColor: props.color.color} : {}
  return (
    <Chip
      color="primary"
      label={props.color.name}
      onClick={() => props.onSelectedChange(!props.isSelected)}
      variant={props.isSelected ? 'filled' : 'outlined'}
      sx={{
        border: props.isSelected ? `1px solid ${props.color.color}` : undefined,
      }}
      style={styleOverride}
    />
  )
}

The problem with this option is that it requires some knowledge about the implementation of the component - e.g. not overriding the primary color means MUI is unable to determine whether it should use a dark or light text color, the hover effect breaks...

Allowing to use a custom color directly would likely not be a complex change in the component itself, but would solve both of those problems.

Examples 🌈

This could be used like this:

<Chip
  color="#123abc"
  label='label'
/>

Motivation 🔦

As outlined above, this is to make the component more flexible.