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:
2Because
<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']} /> Live Demo
