Los componentes Material-UI pueden ser personalizados de forma sencilla.
Como los componentes pueden ser utilizados en diferentes contextos, hay varios enfoques acerca de esto. Yendo desde el caso de uso más especifico hasta aquellos más amplios, tenemos:
1. [Variación específica para una situación única](#1-specific-variation-for-a-one-time-situation)
2. [Variación dinámica para una situación única](#2-dynamic-variation-for-a-one-time-situation)
3. [Variación específica de un componente](#3-specific-variation-of-a-component) reutilizado en diferentes contextos
4. [variaciones de Diseño Material](#4-material-design-variations) tal como el componente del botón
5. [Variación global del tema](#5-global-theme-variation)
## 1. Variación específica para una situación única
Tal vez necesitara cambiar el estilo de un componente para una implementación especifica, para lo cual tendrá estas soluciones a su disposición:
### Sobre-escribir estilos con class names
La forma mas natural de sobre-escribir el estilo de un componente es usando **class names**. Cada componente proporciona la propiedad `className` la cual es siempre aplicada al elemento raíz.
El siguiente ejemplo usa [`withStyles`](/styles/basics/#higher-order-component-api) como un componente HOC,(high-order component), para inyectar estilos customizados en el DOM, y para pasar el class name al componente `ClassNames` mediante su propiedad `classes`. Puedes elegir [cualquier otra solución de estilo](/guides/interoperability/), o incluso CSS para crear los estilos, pero asegúrate de considerar el [orden de inyección CSS](/styles/advanced/#css-injection-order), como el CSS inyectado en el DOM por Material-UI para diseñar un componente tiene la mayor especificidad posible, ya que el `` se inyecta en la parte inferior del `
` para asegurar que los componentes siempre se renderizan correctamente.
{{"demo": "pages/customization/components/ClassNames.js"}}
### Overriding styles with classes
Cuando la propiedad `className` no es suficiente, y necesitas acceder a elementos más profundos, puedes aprovechar la propiedad de objetos `clases` para personalizar todo el CSS inyectado por Material-UI para un componente determinado.
La lista de clases para cada componente está documentada en la página API del componente, debes referirte a la sección **CSS** y a la columna **nombre de regla**. Por ejemplo, puedes echar un vistazo a la [API CSS de Button](/api/button/#css). Como alternativa, puedes utilizar las [herramientas de desarrollo del navegador](#using-the-dev-tools).
Este ejemplo también utiliza `withStyles()` (ver arriba), pero aquí, `ClassesNesting` está usando `Button`'s `classes` prop a proporcionar un objeto que mapea los **nombres de clases para anular** (reglas de estilo) a los nombres de la clase **CSS para aplicar** (valores). 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).
### Usando las herramientas de dev
Las herramientas de desarrollo del navegador pueden ahorrarte mucho tiempo. Material-UI's class names [follow a simple pattern](/styles/advanced/#class-names) in development mode: `Mui[component name]-[style rule name]-[UUID]`.
Volvamos a la demo anterior. ¿Cómo puedes reemplazar la etiqueta del botón?
Using the dev tools, you know that you need to target the `Button` component and the `label` style rule:
```jsx