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.