# Customizing components

You can easily customize the appearance of a Material-UI component.

As components can be used in different contexts, there are several approaches to this. Going from the narrowest use-case to the broadest, these are: 1. [Specific variation for a one-time situation](#1-specific-variation-for-a-one-time-situation) 1. [Dynamic variation for a one-time situation](#2-dynamic-variation-for-a-one-time-situation) 1. [Specific variation of a component](#3-specific-variation-of-a-component) re-used in different contexts 1. [Material Design variations](#4-material-design-variations) such as with the button component 1. [Global theme variation](#5-global-theme-variation) ## 1. Specific variation for a one-time situation You might need to change the style of a component for a specific implementation, for which you have the following solutions available: ### Overriding styles with class names The first way to override the style of a component is to use **class names**. Every component provides a `className` property which is always applied to the root element. This example uses the [`withStyles()`](/styles/basics/#higher-order-component-api) higher-order component to inject custom styles into the DOM, and to pass the class name to the `ClassNames` component via its `classes` property. You can choose [any other styling solution](/guides/interoperability/), or even plain CSS to create the styles, but be sure to consider the [CSS injection order](/styles/advanced/#css-injection-order), as the CSS injected into the DOM by Material-UI to style a component has the highest specificity possible, since the `` is injected at the bottom of the `` to ensure the components always render correctly. {{"demo": "pages/customization/components/ClassNames.js"}} ### Overriding styles with classes When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component. The list of classes for each component is documented in the component API page, you should refer to the **CSS section** and **rule name column**. For instance, you can have a look at the [Button CSS API](/api/button/#css). Alternatively, you can use the [browser dev tools](#using-the-dev-tools). This example also uses `withStyles()` (see above), but here, `ClassesNesting` is using `Button`'s `classes` prop to provide an object that maps the **names of classes to override** (style rules) to the **CSS class names to apply** (values). The component's existing classes will continue to be injected, so it is only necessary to provide the specific styles you wish to add or override. Notice that in addition to the button styling, the button label's capitalization has been changed: {{"demo": "pages/customization/components/ClassesNesting.js"}} ### Overriding styles with global class names [Follow this section](/styles/advanced/#with-material-ui-core). ### Using the dev tools The browser dev tools can save you a lot of time. Material-UI's class names [follow a simple pattern](/styles/advanced/#class-names) in development mode: `Mui[component name]-[style rule name]-[UUID]`. Let's go back to the above demo. How can you override the button label? ![dev-tools](/static/images/customization/dev-tools.png) Using the dev tools, you know that you need to target the `Button` component and the `label` style rule: ```jsx