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

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>

3 Answers

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.

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

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