---
title: "Creating a Custom Material UI Theme Part 3: Customizing Individual Components"
description: Many of the components for Material UI are easy to customize.
image: https://info.keylimeinteractive.com/hubfs/Screen%20Shot%202019-11-15%20at%2010.59.23%20AM.png
---

[![Key Lime Logo](https://info.keylimeinteractive.com/hs-fs/hubfs/Key%20Lime%20Logo.png?width=200&height=39&name=Key%20Lime%20Logo.png "Key Lime Logo")](https://keylimeinteractive.com/)

- SERVICES 
    - [All Services](https://keylimeinteractive.com/services)
    - [UX Strategy](https://keylimeinteractive.com/ux-strategy-design/)
    - [User Research](https://keylimeinteractive.com/user-research/)
    - [UX/UI Design](https://keylimeinteractive.com/ux-design-strategy/)
    - [EmTech Strategy](https://keylimeinteractive.com/emerging-technology/)
- OUR WORK 
    - [Our Approach](https://dev.keylimeinteractive.com/our-approach/)
    - [Enterprise Clients](https://keylimeinteractive.com/work/)
    - [Public Sector](https://keylimeinteractive.com/public-sector-gsa-schedule/)
- [ABOUT US](https://keylimeinteractive.com/about-us/) 
    - [Who We Are](https://keylimeinteractive.com/about-us/)
    - [People](https://keylimeinteractive.com/our-team/)
    - [Careers](https://workforcenow.adp.com/mascsr/default/mdf/recruitment/recruitment.html?cid=1eb079d3-bb50-438a-a731-eaa18a982193&ccId=19000101_000001&lang=en_US)
- INSIGHTS 
    - [CX Blog](https://info.keylimeinteractive.com)
    - [Events](https://keylimeinteractive.com/upcoming-events/)
    - [Competitive Indexes](https://keylimeinteractive.com/reports/#rankings)
    - [White Papers](https://keylimeinteractive.com/reports/)
- [CONTACT US](https://keylimeinteractive.com/contact/)

[![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg)](https://info.keylimeinteractive.com/)

- [What We Do](https://keylimeinteractive.com/ux-research-services/) 
    - [Proven Process](https://keylimeinteractive.com/proven-process/)
- [About Us](https://keylimeinteractive.com/about-us/) 
    - [Meet Our Team](https://keylimeinteractive.com/our-team/)
    - [Careers](https://keylimeinteractive.com/careers/)
    - [News](https://keylimeinteractive.com/news/)
- [Blog](https://info.keylimeinteractive.com/)
- Resources 
    - [Case Studies](https://keylimeinteractive.com/case-studies/)
    - [Events](https://info.keylimeinteractive.com/events)

- [What We Do](https://keylimeinteractive.com/ux-research-services/) 
    - [Proven Process](https://keylimeinteractive.com/proven-process/)
- [About Us](https://keylimeinteractive.com/about-us/) 
    - [Meet Our Team](https://keylimeinteractive.com/our-team/)
    - [Careers](https://keylimeinteractive.com/careers/)
    - [News](https://keylimeinteractive.com/news/)
- [Blog](https://info.keylimeinteractive.com/)
- Resources 
    - [Case Studies](https://keylimeinteractive.com/case-studies/)
    - [Events](https://info.keylimeinteractive.com/events)

[Contact us](https://info.keylimeinteractive.com/contact)

[![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg)](https://info.keylimeinteractive.com/)

- [What We Do](https://keylimeinteractive.com/ux-research-services/) 
    - [Proven Process](https://keylimeinteractive.com/proven-process/)
- [About Us](https://keylimeinteractive.com/about-us/) 
    - [Meet Our Team](https://keylimeinteractive.com/our-team/)
    - [Careers](https://keylimeinteractive.com/careers/)
    - [News](https://keylimeinteractive.com/news/)
- [Blog](https://info.keylimeinteractive.com/)
- Resources 
    - [Case Studies](https://keylimeinteractive.com/case-studies/)
    - [Events](https://info.keylimeinteractive.com/events)

- [What We Do](https://keylimeinteractive.com/ux-research-services/) 
    - [Proven Process](https://keylimeinteractive.com/proven-process/)
- [About Us](https://keylimeinteractive.com/about-us/) 
    - [Meet Our Team](https://keylimeinteractive.com/our-team/)
    - [Careers](https://keylimeinteractive.com/careers/)
    - [News](https://keylimeinteractive.com/news/)
- [Blog](https://info.keylimeinteractive.com/)
- Resources 
    - [Case Studies](https://keylimeinteractive.com/case-studies/)
    - [Events](https://info.keylimeinteractive.com/events)

[Contact us](https://info.keylimeinteractive.com/contact)

- <https://twitter.com/intent/tweet?url={url}&text={title}>
- <https://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}>
- <https://www.facebook.com/sharer.php?u={url}>

# Creating a Custom Material UI Theme Part 3: Customizing Individual Components

[By Key Lime Interactive](https://info.keylimeinteractive.com/author/key-lime-interactive)

 November 15, 2019

[User Interface](https://info.keylimeinteractive.com/topic/user-interface)

- [Tweet](https://twitter.com/share)

![Screen Shot 2019-11-15 at 10.59.23 AM](https://info.keylimeinteractive.com/hubfs/Screen%20Shot%202019-11-15%20at%2010.59.23%20AM.png)

![Screen Shot 2019-11-15 at 10.59.23 AM](https://info.keylimeinteractive.com/hs-fs/hubfs/Screen%20Shot%202019-11-15%20at%2010.59.23%20AM.png?width=1025&name=Screen%20Shot%202019-11-15%20at%2010.59.23%20AM.png)      Many of the components for Material UI are easy to customize. For components such as Badges and Circular Progress, you can add color options by adding an additional variant to the theme. For instance, when calling a badge using a primary color, you would use \<Badge color=”primary” /\>. In order to use an info color, you could use \<Badge color=”info” /\>, and add under MuiBadge : { colorInfo: {…}} to the theme. You can interchange “info” with any color name you choose.

      However, two components in particular are more difficult to add additional color options: Chips and Linear Progress. If you attempt the method above to add a color option, it will break the whole theme when you try to use it. The solution I’ve found is to create a const that has all of the variants and state options included. The base of the customized chip is:

const InfoChip = withStyles({

       root: {…},

})(Chip);

      The … section is JSX, which basically modified CSS. Instead of using dashes between words, use camel case. For instance, instead of background-color: #775643, use backgroundColor: “#775643” or, better yet, call colors from your theme, and use backgroundColor: teal\[700\].

      After the root styles, you can add variants and states. If the Chip is clickable, you can add a clickable section under the root section simply by adding clickable: {…}. In order to add a state option to the clickable section, add “&:hover”: {…}. In order to add a deletable and clickable chip, inside the clickable section, add “$deletable”:{…}. Adding a variant and state is simple: add “$deletable&:hover”:{…}.

     It’s also very easy to add any CSS class you would like. For instance, if you wanted to add a class to any div inside a clickable badge, you would add “&MuiBadge \> div”: {…}.

     Without any further ado, here’s all of the code for the custom Chips and Linear Progress. This encompasses all of the variants and states of each. As you can see, I’m using color references from the previously created custom colors. To make it your own, simply modify or replace the JSX in the code.

### Custom CHIPS

import {withStyles} from "@material-ui/core/styles";  
import Chip from "@material-ui/core/Chip";  
import {teal, common} from "../colors";

const InfoChip = withStyles({

    root: {

      backgroundColor: teal\[700\]

    },

    clickable: {

    backgroundColor: teal\[700\],

     "&:hover, $deletable&:hover": {

        backgroundColor: teal\[800\]

    },

     "&:focus, $deletable&:focus": {

       backgroundColor: teal\[900\]

    }},

    avatar: {

      color: "inherit",

      backgroundColor: "rgba(255,255,255,0)",

    },

    avatarOutlined: {

      color: "inherit"

    },

    deletable: {

      backgroundColor: teal\[700\],

      "&:hover": { backgroundColor: teal\[800\] },

      "&:focus": { backgroundColor: teal\[900\] },

      "&:active": { backgroundColor: teal\[900\] }

    },

    outlined: {

      color: teal\[700\],

      backgroundColor: common.white,

      border: "1px solid " + teal\[700\],

      "$clickable&:hover": {

        backgroundColor: teal\[700\],

        color: common.white

      },

      "$deletable&:hover": {

        backgroundColor: teal\[700\],

        color: common.white

      },

      "$clickable&:focus, $deletable&:focus": {

        backgroundColor:teal\[800\],

        color: common.white

      }

    },

  })(Chip); 

export default InfoChip;

### Custom Linear Progress

import LinearProgress from "@material-ui/core/LinearProgress";  
import { lighten, withStyles } from '@material-ui/core/styles';  
import {teal } from "../colors";

const InfoLinearProgress = withStyles({

  root: {

    backgroundColor: lighten(teal\[700\], 0.6),

  },

  dashed: {

    backgroundImage: \`radial-gradient(${lighten(teal\[700\], 0.6)} 0%, ${lighten(

      teal\[700\],

      0.6,

    )} 16%, transparent 42%)\`,

    backgroundSize: '10px 10px',

    backgroundPosition: '0px -23px',

  },

  bar: {

    backgroundColor: teal\[700\],

  },

  buffer: {

    backgroundColor: 'transparent',

  },

  bar2Buffer: {

    backgroundColor: lighten(teal\[700\], 0.4),

  },

})(LinearProgress);

export default InfoLinearProgress;

       Best practice is to include each custom Chip or Linear Progress in your theme files. In order to call a custom Chip or Linear Progress in your React project, first include import InfoChip from “../\[file location and name here\]”; Then use \<InfoChip /\> the same as you would any other Chip component. For instance, \<InfoChip deletable /\> adds a deletable Chip in the Info color.

 

Be sure to check out Part One and Two of this series!  
              [    Creating a Custom Material UI Theme Part 1: Customizing a Color Scheme](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme)  
                  [Creating a Custom Material UI Theme Part 2: Setting Up Your Customized Theme](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme-part-2)

**READ MORE:  **[UI Trend: Motion-Based Design](https://info.keylimeinteractive.com/motion-based-design), [When to Use Zero UI: A Researcher's Perspective](https://info.keylimeinteractive.com/when-to-use-zero-ui-a-researchers-perspective), [Conversational UIs and Hybrid Interfaces](https://info.keylimeinteractive.com/conversational-uis-and-hybrid-interfaces),  [The UX of Color](https://info.keylimeinteractive.com/the-ux-of-color)

###### More by this Author

[Key Lime Interactive](https://info.keylimeinteractive.com/author/key-lime-interactive)

##### You might also like

![Gender Bias in User Interface Design](https://info.keylimeinteractive.com/hubfs/Gender%20Bias%20-%20pexels-magda-ehlers.jpg)

[Gender Bias in User Interface Design](https://info.keylimeinteractive.com/gender-bias-in-user-interface-design)

 November 15, 2019

![What To Know When Considering Dark Mode](https://info.keylimeinteractive.com/hubfs/dark-mode-Pabitra%20Kaity%20-%20Pixabay.png)

[What To Know When Considering Dark Mode](https://info.keylimeinteractive.com/what-to-know-when-considering-dark-mode)

 November 15, 2019

![A Review Of Svelte: Improving UI Development](https://info.keylimeinteractive.com/hubfs/roman-synkevych-vXInUOv1n84-unsplash.jpg)

[A Review Of Svelte: Improving UI Development](https://info.keylimeinteractive.com/a-review-of-svelte-improving-ui-development)

 November 15, 2019

#### Comments

[Add Comment](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme-part-3-customizing-individual-components#comment-form)

ABOUT KLI

[Key Lime Interactive](https://keylimeinteractive.com/about-us)is a user experience research and service design agency, with a sweet spot for emerging technology. As UX experts, our goal is to make your life easier, optimize user experiences, and make the world a better place.

- [Recent](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme-part-3-customizing-individual-components#tabs-0)
- [Popular](https://info.keylimeinteractive.com/creating-a-custom-material-ui-theme-part-3-customizing-individual-components#tabs-1)

![Upsell with Purpose: Fueling SaaS Growth Through User Insight](https://info.keylimeinteractive.com/hubfs/Multiethnic%20group%20of%20young%20people%20sitting%20in%20conference%20room%20and%20brainstorming%20on%20business%20meeting.jpeg)

[Upsell with Purpose: Fueling SaaS Growth Through User Insight](https://info.keylimeinteractive.com/upselling-in-a-saas-environment-with-a-user-centric-approach)

Aug 22, 2024

![5 Ways to Get the Most Out of Working with a UX Research Consultant](https://info.keylimeinteractive.com/hubfs/Attractive%20businessman%20speaking%20with%20fellow%20coworkers.jpeg)

[5 Ways to Get the Most Out of Working with a UX Research Consultant](https://info.keylimeinteractive.com/5-ways-to-get-the-most-out-of-working-with-a-ux-research-consultant)

Aug 22, 2024

![Designing Engagement Through Micro-Interactions](https://info.keylimeinteractive.com/hubfs/AI-Generated%20Media/Images/A%20closeup%20shot%20of%20a%20finger%20gently%20tapping%20a%20digital%20button%20on%20a%20sleek%2c%20modern%20interface.jpeg)

[Designing Engagement Through Micro-Interactions](https://info.keylimeinteractive.com/the-significance-of-micro-interactions-in-shaping-user-engagement-and-experience)

Aug 22, 2024

![What is the Keystroke-Level Model?](https://info.keylimeinteractive.com/hubfs/Keystroke.jpg)

[What is the Keystroke-Level Model?](https://info.keylimeinteractive.com/what-is-the-keystroke-level-model)

Aug 22, 2024

![Current-State vs. Future-State Journey Mapping](https://info.keylimeinteractive.com/hubfs/destination-2386255_1280.jpg)

[Current-State vs. Future-State Journey Mapping](https://info.keylimeinteractive.com/current-state-vs.-future-state-journey-mapping)

Aug 22, 2024

![A History of Voice Technology](https://info.keylimeinteractive.com/hubfs/Screen%20Shot%202020-08-11%20at%2012.18.34%20PM.png)

[A History of Voice Technology](https://info.keylimeinteractive.com/history-of-voice-technology)

Aug 22, 2024

Create a UX Strategy

[![key-lime-interactive-ux](https://info.keylimeinteractive.com/hs-fs/hubfs/key-lime-interactive-ux.png?width=635&height=634&name=key-lime-interactive-ux.png)](https://keylimeinteractive.com/ux-strategy-design)

### Post By Topics

- [Research Methods](https://info.keylimeinteractive.com/topic/research-methods)
- [UX Strategy](https://info.keylimeinteractive.com/topic/ux-strategy)
- [Events & News](https://info.keylimeinteractive.com/topic/events-news)
- [UX Research](https://info.keylimeinteractive.com/topic/ux-research)
- [User Experience](https://info.keylimeinteractive.com/topic/user-experience)
- [User Interface](https://info.keylimeinteractive.com/topic/user-interface)
- [UX](https://info.keylimeinteractive.com/topic/ux)
- [News](https://info.keylimeinteractive.com/topic/news)
- [Mobile UX](https://info.keylimeinteractive.com/topic/mobile-ux)
- [Usability Testing](https://info.keylimeinteractive.com/topic/usability-testing)
- [Competitive Research](https://info.keylimeinteractive.com/topic/competitive-research)
- [UX Design](https://info.keylimeinteractive.com/topic/ux-design)
- [Eye tracking & Biometrics](https://info.keylimeinteractive.com/topic/eye-tracking-biometrics)
- [Qualitative Research](https://info.keylimeinteractive.com/topic/qualitative-research)
- [Customer Experience](https://info.keylimeinteractive.com/topic/customer-experience)
- [Journey Mapping](https://info.keylimeinteractive.com/topic/journey-mapping)
- [DEI](https://info.keylimeinteractive.com/topic/dei)
- [Remote Testing](https://info.keylimeinteractive.com/topic/remote-testing)
- [User Experience Consultant](https://info.keylimeinteractive.com/topic/user-experience-consultant)
- [VR](https://info.keylimeinteractive.com/topic/vr)
- [XR](https://info.keylimeinteractive.com/topic/xr)
- [Multicultural UX](https://info.keylimeinteractive.com/topic/multicultural-ux)
- [Mobile Banking](https://info.keylimeinteractive.com/topic/mobile-banking)
- [Quantitative Research](https://info.keylimeinteractive.com/topic/quantitative-research)
- [App Development](https://info.keylimeinteractive.com/topic/app-development)
- [User Experience Research Studies](https://info.keylimeinteractive.com/topic/user-experience-research-studies)
- [Diversity Equity Inclusion](https://info.keylimeinteractive.com/topic/diversity-equity-inclusion)
- [UI](https://info.keylimeinteractive.com/topic/ui)
- [Voice Technology](https://info.keylimeinteractive.com/topic/voice-technology)
- [Accessibility](https://info.keylimeinteractive.com/topic/accessibility)
- [Behavioral Personas](https://info.keylimeinteractive.com/topic/behavioral-personas)
- [Diary Study & Ethnography](https://info.keylimeinteractive.com/topic/diary-study-ethnography)
- [Global Research](https://info.keylimeinteractive.com/topic/global-research)
- [Inclusivity Index](https://info.keylimeinteractive.com/topic/inclusivity-index)
- [User Testing](https://info.keylimeinteractive.com/topic/user-testing)
- [Card Sort & Tree Test](https://info.keylimeinteractive.com/topic/card-sort-tree-test)
- [Human-first Approach](https://info.keylimeinteractive.com/topic/human-first-approach)
- [Personalization](https://info.keylimeinteractive.com/topic/personalization)
- [CX](https://info.keylimeinteractive.com/topic/cx)
- [Diary Study](https://info.keylimeinteractive.com/topic/diary-study)
- [In-Depth Interviews](https://info.keylimeinteractive.com/topic/in-depth-interviews)
- [Inclusivity](https://info.keylimeinteractive.com/topic/inclusivity)
- [A/B Testing](https://info.keylimeinteractive.com/topic/a-b-testing)
- [CX Research](https://info.keylimeinteractive.com/topic/cx-research)
- [IDIs](https://info.keylimeinteractive.com/topic/idis)
- [Bias](https://info.keylimeinteractive.com/topic/bias)
- [Personas](https://info.keylimeinteractive.com/topic/personas)
- [Research Participant Recruitment](https://info.keylimeinteractive.com/topic/research-participant-recruitment)
- [Usability](https://info.keylimeinteractive.com/topic/usability)
- [Women in UX](https://info.keylimeinteractive.com/topic/women-in-ux)
- [Workshops](https://info.keylimeinteractive.com/topic/workshops)
- [Customer Journey Mapping](https://info.keylimeinteractive.com/topic/customer-journey-mapping)
- [Remote Research](https://info.keylimeinteractive.com/topic/remote-research)
- [Research Analysis](https://info.keylimeinteractive.com/topic/research-analysis)
- [UX Methods](https://info.keylimeinteractive.com/topic/ux-methods)
- [Webinars](https://info.keylimeinteractive.com/topic/webinars)
- [Anthropology](https://info.keylimeinteractive.com/topic/anthropology)
- [Competitive Benchmarking](https://info.keylimeinteractive.com/topic/competitive-benchmarking)
- [Competitive Insights](https://info.keylimeinteractive.com/topic/competitive-insights)
- [Competitive Intelligence](https://info.keylimeinteractive.com/topic/competitive-intelligence)
- [Confirmation Bias](https://info.keylimeinteractive.com/topic/confirmation-bias)
- [Ethnography](https://info.keylimeinteractive.com/topic/ethnography)
- [Gaming](https://info.keylimeinteractive.com/topic/gaming)
- [Healthcare CX Design](https://info.keylimeinteractive.com/topic/healthcare-cx-design)
- [Healthcare Customer Experience Design](https://info.keylimeinteractive.com/topic/healthcare-customer-experience-design)
- [Heuristics](https://info.keylimeinteractive.com/topic/heuristics)
- [Unmoderated](https://info.keylimeinteractive.com/topic/unmoderated)
- [sample size calculation](https://info.keylimeinteractive.com/topic/sample-size-calculation)
- [AI development](https://info.keylimeinteractive.com/topic/ai-development)
- [Biometrics](https://info.keylimeinteractive.com/topic/biometrics)
- [Communication](https://info.keylimeinteractive.com/topic/communication)
- [Competitive Intelligence Analysis](https://info.keylimeinteractive.com/topic/competitive-intelligence-analysis)
- [Concept Testing](https://info.keylimeinteractive.com/topic/concept-testing)
- [Consultant](https://info.keylimeinteractive.com/topic/consultant)
- [Custom Projects](https://info.keylimeinteractive.com/topic/custom-projects)
- [Dedicated Services](https://info.keylimeinteractive.com/topic/dedicated-services)
- [Digital Divide](https://info.keylimeinteractive.com/topic/digital-divide)
- [Impact](https://info.keylimeinteractive.com/topic/impact)
- [Keystroke Level Model](https://info.keylimeinteractive.com/topic/keystroke-level-model)
- [Literature Review](https://info.keylimeinteractive.com/topic/literature-review)
- [Negotiation in UX](https://info.keylimeinteractive.com/topic/negotiation-in-ux)
- [Nonprofit UX](https://info.keylimeinteractive.com/topic/nonprofit-ux)
- [Presentation](https://info.keylimeinteractive.com/topic/presentation)
- [Rapid Research](https://info.keylimeinteractive.com/topic/rapid-research)
- [Report](https://info.keylimeinteractive.com/topic/report)
- [SaaS](https://info.keylimeinteractive.com/topic/saas)
- [UX Templates](https://info.keylimeinteractive.com/topic/ux-templates)
- [World Usability Day](https://info.keylimeinteractive.com/topic/world-usability-day)
- [digital design](https://info.keylimeinteractive.com/topic/digital-design)
- [persona](https://info.keylimeinteractive.com/topic/persona)
- [user engagement](https://info.keylimeinteractive.com/topic/user-engagement)

![ ](https://keylimeinteractive.com/wp-content/uploads/2024/05/aicpa-soc-certified.png)

![Logo of the National Minority Supplier Development Council with colorful abstract shapes and text.](https://keylimeinteractive.com/wp-content/uploads/2024/05/NMSDC-Logo-NATIONAL-1024x716.jpg)

![Logo with the text "Insights Association" and colorful squares forming a pattern above the text.](https://keylimeinteractive.com/wp-content/uploads/2024/02/insights-association-logo-v2.png)

![](https://keylimeinteractive.com/wp-content/uploads/2024/02/key-lime-interactive.svg)

Your Trusted Partner for UX Research

Key Lime Interactive

- [What We Do](https://keylimeinteractive.com/ux-research-services/)
- [Proven Process](https://keylimeinteractive.com/proven-process/)

Resources

- [Case Studies](https://info.keylimeinteractive.com/case-studies)
- [Events + Workshops](https://info.keylimeinteractive.com/events)
- [Blog](https://info.keylimeinteractive.com/)

Company

- [About Us](https://keylimeinteractive.com/about-us/)
- [Meet Our Team](https://keylimeinteractive.com/our-team/)
- [Careers](https://keylimeinteractive.com/careers/)
- [News](https://keylimeinteractive.com/news/)
- [Security & Compliance](https://app.vanta.com/keylimeinteractive.com/trust/cylnxu23wx6pzvej7bloh9)
- [Public Sector GSA](https://keylimeinteractive.com/public-sector-gsa-schedule/)

Get in touch

- [Contact Us](https://keylimeinteractive.com/contact)

<https://www.linkedin.com/company/key-lime-interactive/mycompany> <https://www.facebook.com/pages/Key-Lime-Interactive-LLC/247944346084> <https://www.youtube.com/channel/UC_2BwK4p_KTJCj85NGtee3Q>

© 2025 All Rights Reserved.

- [Privacy Policy](https://keylimeinteractive.com/privacy-policy/)

- [Terms of Use](https://keylimeinteractive.com/terms/)