Chips are handy components that quickly convey information. From the Material-UI docs: “Chips are compact elements that represent an input, attribute, or action.”
Chips commonly are a circle or a horizontally-shaped oval. However, I want to code a challenging chip design so that we are have to stretch MUI to the limits. We’ll build the vertical chip below.
View a YouTube video version of this article here or watch below:
Material-UI Chip JSX
The JSX can vary depending on what customizations are needed in your Material-UI Chip component.
In this chip, I use avatar and deleteIcon (deleteIcon might not have anything to do with actually deleting).
<Chip
className={classes.root}
variant="outlined"
size="small"
avatar={<Avatar>M</Avatar>}
label={
<div>
Vertical
<br />!
</div>
}
clickable
color="primary"
onDelete={handleDelete}
deleteIcon={<DoneIcon />}
/>
The avatar creates the ‘M’ image at the top of the chip, and the deleteIcon gives us the checkmark at the bottom.
Learn more about MUI Avatar Styling here.
Material-UI Vertical Chip Styling
Most of the unique code for creating the vertical chip is found in the styling:
root: {
display: "flex",
flexDirection: "column",
height: "100%",
"& .MuiAvatar-root": {
margin: "4px 0px"
},
"& .MuiChip-label": {
wordWrap: "break-word",
whiteSpace: "normal",
textOverflow: "clip",
textAlign: "center",
fontSize: 16,
width: 12
},
"& .MuiChip-deleteIcon": {
margin: "8px 0px"
}
}
First, we add flexDirection: column in the chip root. This stacks the child elements vertically. height: “100%” is needed to stretch the outermost div of the chip so that it grows to an appropriate height to show all children.
“& .MuiAvatar-root” targets the “avatar” div generated by Material-UI. All I added was a bit of margin to override the default margin on the avatar. Take a look at the dev tools screenshot below to get an understanding of what that generated code looks like (and how the Material-UI styling API works).
“& .MuiChip-label” required a little more creativity. wordWrap: “break-word”, whiteSpace: “normal”, textOverflow: “clip”, textAlign: “center” were all required in order to get a nice vertical look to for the chip text. For example, by default MUI had textOverflow: “ellipsis”, which needed to be overridden. The wordWrap: “break-word” was required to get word breaks in the middle of the word, even where there wasn’t a space.
Finally, we have “& .MuiChip-deleteIcon” to override default icon margin.
That’s really all there is to it. The most challenging thing may be finding a use case for this nifty component ?. However, a common use case for traditional chips is in the AppBar, which you can read about here.
Here’s how I oriented the MUI Progress Bar vertically using only CSS.
MUI Chip Custom Color
You may have noticed in the Chip JSX I set the color prop to “primary”. If you want to style the chip with colors outside the theme palette, add the following code to your styling class. If you are using MUI v5, take the vertical styling code above and this code, remove the root name, and add it in the Chip’s sx prop.
root: {
color: "green",
borderColor: "green",
"& .MuiAvatar-root": {
backgroundColor: "green"
}
}The color property inside of root sets the text color and the delete icon color. The Avatar was not affected by this and needed to be more precisely target with a nested selector. Depending on how you have your Avatar styled, you may need to use color or background color to achieve your desired styling.
Finally I added border color in the root class. You may also want to add background color or other stylings here.
Resources
Expand your JavaScript knowledge with these 50 difficult JavaScript questions!
Looking to do more with Chips? Here’s a great “Chip Input” component with Autocomplete.
Another handy MUI component is the Rating component, learn more here.
