How to customize Chip in Material UI?

In this article, we are going to learn how to customize chips in Material UI. Chips are small components that stand in for input, an attribute, or an action. With the aid of chips, users can input data, select options, filter content, or start processes.

The chip can also be customized in the MUI in React. Customization of the chip may include, changing chip colors, custom deleting icons, adding avatars, or creating a chip using its root property. We will see everything in this article.

To work with chip in MUI, we need to understand their API and its related props.

Chip API

The Chip API is utilized to add a chip to the React MUI. It comes with props −

• avatar − To display the avatar on the chip we make use of the avatar property.

• classes − In order to customize the styles of the component, we can utilize the classes property.

• color − If you want to personalize the chip colors, you can do so with the color property.

• component − The component attribute renders the root component within the chip.

• clickable − By using this property, we can make the chip clickable. Raise it when pressed.

• deleteIcon − If you wish to change the icon in a chip component, you can modify it using deleteIcon.

• disabled − To disable a chip, simply use disabled.

• icon − You have an option to add an icon to your chip by utilizing the icon property.

• label − The label attribute is used for adding content to a component.

• onDelete − To show the delete icon, we use the onDelete prop.

• size − To adjust the size of your chip make use of this size prop.

• skipFocusWhenDisabled − To skip focus on a chip utilize prop accordingly.

• sx − For adding custom styles for chip component use thesx prop.

• variant − If you want different variations of chips available make use of prop.

Steps Required to Customize The Chip

To make a custom chip component in Material UI, see the given steps −

Step 1: Create a react application

Before we proceed with the customization of the chip component in MUI, we need to create a react application. To create a new React app, run the below commands in your terminal −

npx create react app chipcompproject

Once the project is created, navigate to its directory by running −

cd chipcompproject

Step 2: Add MUI to React

Once you have created the react app, it's time to install the Material UI into the react application. To install MUI, run the following command −

npm install @mui/material @emotion/react @emotion/styled

Step 3: Create the Chip

To add or create a chip, we use the <Chip> API component as shown in the below syntax −

const CopyChip = styled(Chip)(() => ({
   //add custom CSS styles below this
   …
})
<Chip label="Click label" />

That's all for the steps to using chip actions.

Example

In this example, we have customized the filled variant of the chip component. Here, we have defined multiple CSS properties like border, border radius, color, etc., to change the variant to filled. Also, we have added the delete icon with custom CSS specifications like color and size.

import Chip from "@mui/material/Chip";
import { styled } from "@mui/material/styles"

//Create a custom chip using styled
const MuiChipCustom = styled(Chip)(() => ({
   width: 150, //adding custom css styles
   height: 50,
   backgroundColor: 'lightblue',
   borderRadius: 2,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'blue', //using the MUI chip label properties
      fontSize: 20
   },

   '& .MuiChip-deleteIcon': {
      color: 'blue',
      fontSize: 20
   },
}));

function App() {

   const deleteHandler = () => {
      alert('You just deleted the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom label="delete chip" variant="filled" onDelete={deleteHandler} />
         <MuiChipCustom label="delete chip" variant="filled" onDelete={deleteHandler} />
      </div>
   );
};
export default App;

Output

Example

In this example, we have customized the outlined variant of the chip component. Here, we have defined multiple CSS properties like border, border radius, color, etc to change the variant to outlined and here we may also remove the variant prop from the chip component as it will work still also.

import React from "react";
import { Chip } from "@mui/material";
import { styled } from "@mui/material/styles"

const MuiChipCustom = styled(Chip)(() => ({
   border: '2px solid lightblue',
   borderRadius: 25,
   width: 150,
   height: 50,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'lightblue',
      fontSize: 20
   },
}));

const App = () => {
   const handleClick = () => {
      alert('You just clicked the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom label="click me" variant="outlined" onClick={handleClick} />
      </div>
   );
};
export default App;

Output

Example

In this example, we have customized the icons in the chip component. Here, we have used the &.MuiChip-icon CSS property to change the color and font size of the icons that are added at the start of the chip to make it custom.

import React from "react";
import { Chip } from "@mui/material";
import { styled } from "@mui/material/styles"
import { Clear, Delete, DeleteForever, Done } from "@mui/icons-material";

const MuiChipCustom = styled(Chip)(() => ({
   border: '2px solid green',
   borderRadius: 25,
   width: 150,
   height: 50,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'green',
      fontSize: 20,
   },

   '& .MuiChip-icon': {
      color: 'green',
      fontSize: 30
   },
}));

function App() {

   const handleClick = () => {
      alert('You just clicked the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom icon={<Done />} label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom icon={<Delete />} label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom icon={<DeleteForever />} label="click me" variant="outlined" onClick={handleClick} />
         <MuiChipCustom icon={<Clear />} label="click me" variant="outlined" onClick={handleClick} />
      </div>
   );
};

export default App;

Output

Example

In this example, we've made some changes, to the avatar in the chip component. We utilized the &.MuiChip avatar CSS property to adjust the size of the avatar in the chip and give it an appearance.

import React from "react";
import { Avatar, Chip } from "@mui/material";
import { styled } from "@mui/material/styles"

const MuiChipCustom = styled(Chip)(() => ({
   border: '2px solid green',
   borderRadius: 25,
   width: 200,
   height: 50,
   color: 'white',   

   '& .MuiChip-label': {
      color: 'green',
      fontSize: 20,
   },

   '& .MuiChip-avatar': {
      width: 40,
      height: 40
   },

}));

function App() {

   const handleClick = () => {
      alert('You just clicked the chip!')
   };

   return (
      <div
         style={{
            padding: 40,
            gap: 10,
            display: 'flex',
            flexDirection: 'row'
         }}>
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
         <MuiChipCustom avatar={<Avatar alt="tp" src="https://play-lh.googleusercontent.com/F10OOHNkeNbOf5x9DYpoihAIkLRlSMxCsPHyCErXgm0oM2gZtJwVymJIZoN59v4JJWBZ" />} label="tutorialspoint" variant="outlined" onClick={handleClick} />
      </div>
   );
};
export default App;

Output

Conclusion

To sum up, throughout this article, we've explored how to personalize the chip component in React MUI. We've covered all the steps for implementing these customizations, including examples like modifying the deleted icons, background colors, and different variants.