# Personnaliser les composants

Vous pouvez facilement personnaliser l'apparence d'un composant Material-UI.

As components can be used in different contexts, there are several approaches to this. Du plus étroit cas d'utilisation au plus large, il s'agit des suivants : 1. [Variation spécifique pour une situation ponctuelle](#1-specific-variation-for-a-one-time-situation) 2. [Variation dynamique pour une situation ponctuelle](#2-dynamic-variation-for-a-one-time-situation) 3. [Variation spécifique d'un composant](#3-specific-variation-of-a-component) réutilisé dans différents contextes 4. [Variations de Material Design](#4-material-design-variations) comme avec le composant bouton 5. [Variation globale du thème](#5-global-theme-variation) ## 1. Variation spécifique pour une situation ponctuelle Vous devrez peut-être modifier le style d'un composant pour un cas particulier. Vous disposez des solutions suivantes : ### Remplacement de styles avec des noms de classe La première façon de remplacer le style d'un composant consiste à utiliser des **noms de classes** . Chaque composant fournit une propriété `className` qui est toujours appliquée à l'élément racine. 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). ### Utiliser les outils de développement 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