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>
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 onbackground-colorand 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']}
/>
