# Customizando componentes

Você pode customizar facilmente a aparência de um componente do Material-UI.

Como os componentes podem ser usados em diferentes contextos, existem várias abordagens para isso. Indo da abordagem mais precisa a mais abrangente, são elas: 1. [Variação específica para uma situação única](#1-specific-variation-for-a-one-time-situation) 2. [Variação dinâmica para uma situação única](#2-dynamic-variation-for-a-one-time-situation) 3. [Variação específica de um componente](#3-specific-variation-of-a-component) reutilizado em contextos diferentes 4. [Variações do Material Design](#4-material-design-variations) tal como com o componente botão 5. [Variação do tema global](#5-global-theme-variation) ## 1. Variação específica para uma situação única Pode ser necessário alterar o estilo de um componente em alguma implementação específica, para a qual você tem as seguintes soluções disponíveis: ### Sobrescrevendo estilos com nomes de classe A primeira maneira de sobrescrever o estilo de um componente é usar **nomes de classe**. Cada componente provê uma propriedade `className` no qual é sempre aplicada ao elemento raiz. Este exemplo usa o [`withStyles()`](/styles/basics/#higher-order-component-api) high-order componente para injetar estilos customizados no DOM, e passar o nome da classe para o componente `ClassNames` através da propriedade `classes`. Você pode escolher [qualquer outra solução de estilo](/guides/interoperability/), ou até mesmo CSS puro para criar os estilos, mas certifique-se de considerar a [ordem de injeção do CSS](/styles/advanced/#css-injection-order), como o CSS é injetado no DOM pelo Material-UI para estilizar o componente, ele tem a maior especificidade possível, uma vez que o `` é injetado na parte inferior do `` para garantir que os componentes sejam sempre renderizados. {{"demo": "pages/customization/components/ClassNames.js"}} ### Sobrescrevendo estilos com classes Quando a propriedade `className` não é suficiente, e você precisa acessar elementos mais profundos, você pode tirar proveito da propriedade do tipo objeto `classes`, com ela podemos customizar todo o CSS injetado pelo Material-UI para um determinado componente. A lista de classes para cada componente está documentada na página da API do componente, você deve consultar a coluna **seção CSS** e **coluna rule name**. Por exemplo, você pode dar uma olhada na [API CSS do botão](/api/button/#css). Como alternativa, você pode usar as [ferramentas de desenvolvimento do navegador](#using-the-dev-tools). Este exemplo também usa `withStyles()` (como acima), mas aqui, `ClassesNesting` está usando a propriedade `classes` do `Botão` para fornecer um objeto que mapeia os **nomes das classes para sobrescrever** (regras de estilo) para **os nomes de classes CSS a serem aplicados** (valores). As classes existentes do componente continuarão a ser injetadas, portanto, é necessário apenas fornecer os estilos específicos que você deseja adicionar ou sobrescrever. Observe que, além do estilo do botão, a capitalização do rótulo do botão foi alterada: {{"demo": "pages/customization/components/ClassesNesting.js"}} ### Sobrescrevendo estilos por nomes de classes globais [Siga esta seção](/styles/advanced/#with-material-ui-core). ### Usando as ferramentas de desenvolvimento As ferramentas de desenvolvimento do navegador podem poupar muito tempo. Os nomes das classes do Material-UI [seguem um padrão simples](/styles/advanced/#class-names) no modo de desenvolvimento: `Mui[component name]-[style rule name]-[UUID]`. Vamos voltar para a demonstração acima. Como você pode substituir o rótulo do botão? ![dev-tools](/static/images/customization/dev-tools.png) Usando as ferramentas de desenvolvimento, você sabe que precisa direcionar a regra de estilo do componente `Button` e `label`: ```jsx