How to add linear-gradient color to Material UI Chip background?

Question

I want to add linear-gradient below color to Material UI Chip as a background color. Is it possible?

linear-gradient(to right bottom, #430089, #82ffa1)

I am using Material UI v0.18.7.

<Chip backgroundColor={indigo400} style={{width: 120}}>
     <Avatar size={32} color={white} backgroundColor={indigo900}>A</Avatar>
     This is a Chip
</Chip>

Constantino

Answer 1

Just set the background to the desired gradient in your styles:

<Chip style={{width: 120, background: 'linear-gradient(to right bottom, #430089, #82ffa1)'}}>
     <Avatar size={32} color={white} backgroundColor={indigo900}>A</Avatar>
     This is a Chip
</Chip>

Note that linear-gradient is a CSS function that returns an image, not a color. So, you have to set the background property (which takes an image) rather than the backgroundColor property (which takes just a color). Here's a quote from the Mozilla docs explaining this more thoroughly:

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the <color> data type.

Instructive

Great Jules! Silly one I should've tried on my own. Thank you :) – Constantino

Glad I could help, Hemadri! Always a pleasure. – Instructive

Answer 2

You can override any component in material-ui using classes. Instead of backgroundColor try this code.

//After imports statements
const style={
  chip:{
    background: 'linear-gradient(to right bottom, #430089, #82ffa1)',
  }
}
class Chips extends ...{
  render(){
const classes=this.props.classes;
  return(
    <Chip className={classes.chip}>
      <!--Content-->
     </Chip>
  );
  }
  }

Fatwitted

Thanks for the answer – Constantino

Answer 3

In Material UI v5, you can use either sx or styled():

sx prop

<Chip
  label="Chip Filled"
  sx={{
    color: 'white',
    background: 'linear-gradient(to right bottom, #36EAEF, #6B0AC9)',
  }}
/>

styled()

type GradientChipProps = {
  colors?: string[];
};
const GradientChip = styled(Chip)<GradientChipProps>(({ colors }) => ({
  color: 'white',
  ...(colors && {
    background: `linear-gradient(to right bottom, ${colors.join(',')})`,
  }),
}));

<GradientChip
  label="Chip Outlined"
  variant="outlined"
  colors={['red', 'pink', 'purple']}
/>

Live Demo

Related Answer

• Gradient border on Material UI component

Macegan