How to Add Linear-Gradient Color to Mui Chip Background

How to add linear-gradient color to MUI Chip background?

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.

Gradient border on MUI component

This is how you add a gradient border to the button component:

V5

const options = {
  shouldForwardProp: (prop) => prop !== 'gradientColors',
};

const GradientButton = styled(
  Button,
  options,
)(({ theme, gradientColors }) => ({
  border: '5px solid',
  borderImageSlice: 1,
  borderImageSource: `linear-gradient(to left, ${gradientColors.join(',')})`,
}));

If you want a round button with gradient border, you can't use the code above since borderImage doesn't have a radius. A workaround is to create a gradient background in the child element :after because the background can be clipped using borderRadius:

const borderRadius = 15;
const RoundGradientButton = styled(
  Button,
  options,
)(({ theme, gradientColors }) => ({
  position: 'relative',
  border: '5px solid transparent',
  backgroundClip: 'padding-box',
  borderRadius,

  '&:after': {
    position: 'absolute',
    top: -5,
    left: -5,
    right: -5,
    bottom: -5,
    background: `linear-gradient(to left, ${gradientColors.join(',')})`,
    content: '""',
    zIndex: -1,
    borderRadius,
  },
}));

Usage

<GradientButton gradientColors={['red', 'yellow']} variant="contained">
  Default
</GradientButton>
<RoundGradientButton gradientColors={['red', 'yellow']} variant="contained">
  Default
</RoundGradientButton>

Live Demo

V4

const useStyles = makeStyles((theme: Theme) => ({
  button: {
    border: "6px solid",
    borderImageSlice: 1,
    borderImageSource: "linear-gradient(to left, red, orange)"
  }
}));

export default function ContainedButtons() {
  const classes = useStyles();

  return (
    <Button className={classes.button} variant="contained">
      Default
    </Button>
  );
}

Live Demo

Related Answer

• How to add linear-gradient color to MUI Chip background?

Using props to set '&:hover' background-color

You can achieve this by creating your own custom chip component. In order to be able to use props to control the styling, you can use the makeStyles. The makeStyles function returns a hook that can accept an object parameter for providing variables to your styles.

Here's a possible CustomChip implementaton:

import React from "react";
import Chip from "@material-ui/core/Chip";
import { makeStyles } from "@material-ui/core/styles";
import { emphasize } from "@material-ui/core/styles/colorManipulator";

const useChipStyles = makeStyles({
  chip: {
    color: ({ color }) => color,
    backgroundColor: ({ backgroundColor }) => backgroundColor,
    "&:hover, &:focus": {
      backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
        hoverBackgroundColor
          ? hoverBackgroundColor
          : emphasize(backgroundColor, 0.08)
    },
    "&:active": {
      backgroundColor: ({ hoverBackgroundColor, backgroundColor }) =>
        emphasize(
          hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
          0.12
        )
    }
  }
});
const CustomChip = ({
  color,
  backgroundColor,
  hoverBackgroundColor,
  ...rest
}) => {
  const classes = useChipStyles({
    color,
    backgroundColor,
    hoverBackgroundColor
  });
  return <Chip className={classes.chip} {...rest} />;
};
export default CustomChip;

The styling approach (including the use of the emphasize function to generate the hover and active colors) is based on the approach used internally for Chip.

This can then be used like this:

      <CustomChip
        label="Custom Chip 1"
        color="green"
        backgroundColor="#ccf"
        onClick={() => {
          console.log("clicked 1");
        }}
      />
      <CustomChip
        label="Custom Chip 2"
        color="#f0f"
        backgroundColor="#fcc"
        hoverBackgroundColor="#afa"
        onClick={() => {
          console.log("clicked 2");
        }}
      />

Here's a CodeSandbox demonstrating this:

---

Here's a Material-UI v5 version of the example:

import Chip from "@material-ui/core/Chip";
import { styled } from "@material-ui/core/styles";
import { emphasize } from "@material-ui/core/styles";
import { shouldForwardProp } from "@material-ui/system";
function customShouldForwardProp(prop) {
  return (
    prop !== "color" &&
    prop !== "backgroundColor" &&
    prop !== "hoverBackgroundColor" &&
    shouldForwardProp(prop)
  );
}
const CustomChip = styled(Chip, { shouldForwardProp: customShouldForwardProp })(
  ({ color, backgroundColor, hoverBackgroundColor }) => ({
    color: color,
    backgroundColor: backgroundColor,
    "&:hover, &:focus": {
      backgroundColor: hoverBackgroundColor
        ? hoverBackgroundColor
        : emphasize(backgroundColor, 0.08)
    },
    "&:active": {
      backgroundColor: emphasize(
        hoverBackgroundColor ? hoverBackgroundColor : backgroundColor,
        0.12
      )
    }
  })
);

export default CustomChip;

MUI - Change Button text color in theme

Solved it! This finally did the trick:

const theme = createMuiTheme({
  palette: {
    primary: lightBlue,
  },
  overrides: {
    MuiButton: {
      raisedPrimary: {
        color: 'white',
      },
    },
  }
});

So, you just have to use "overrides" and be explicit about the exact type of component you want to change.

Is there a way to increase the border thickness of outlined buttons in material-ui?

Try: style={{ border: '2px solid' }} or throught makeStyles

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
    border: '2px solid'
  }
}));

function ThickerButton() {
  return (
    <>
      <Button
        variant="outlined"
        color="primary"
        style={{ border: '2px solid' }}
      >
        style
      </Button>
      <Button className={useStyles().button} variant="outlined" color="primary">
        makeStyles
      </Button>
    </>
  );
}

Demo:

---

Related Topics