# Customizing components

Вы можете легко настроить внешний вид компонента Material-UI.

Поскольку компоненты могут использоваться в разных контекстах, существует несколько подходов к этому. Переходя от самого нераспространённого варианта к самому широко используемому, это: 1. [Конкретное изменение для единичного случая](#1-specific-variation-for-a-one-time-situation) 2. [Динамическое изменение для единичного случая](#2-dynamic-variation-for-a-one-time-situation) 3. [Особый вариант компонента](#3-specific-variation-of-a-component) использумый в различных контекстах 4. [Material Design варианты](#4-material-design-variations) как у компонента кнопка 5. [Глобальное изменение темы](#5-global-theme-variation) ## 1. Конкретное изменение для единичного случая Возможно, вам придется изменить стиль компонента в конкретном месте. Для этого вам предоставляются следующие методы: ### Переопределение стилей через имена классов Первый способ переопределения стиля компонента - использовать **имена классов**. Каждый компонент предоставляет свойство `className` которое всегда применяется к корневому элементу. В этом примере компонент высшего-порядка [`withStyles()`](/styles/basics/#higher-order-component-api) используется для внедрения пользовательских стилей в DOM и передачи имени класса компоненту `ClassNames` через его свойство `classes`. Для создания стилей вы можете воспользоваться [любым доступным стилевым решением](/guides/interoperability/), вплоть до обычного CSS, но вы обязаны принимать во внимание [порядок внедрения CSS](/styles/advanced/#css-injection-order), поскольку CSS внедренный в DOM через Material-UI имеет максимально возможную специфичность, так как `` внедряется в самом конце раздела `` для гарантии корректного отображения компонентов. {{"demo": "pages/customization/components/ClassNames.js"}} ### Overriding styles with classes Когда `className` свойства недостаточно, и вам нужен доступ ко вложенным элементам, вы можете воспользоваться свойством объекта `classes` для настройки всех CSS, внедренных через Material-UI для данного компонента. Иногда вы не можете использовать **псевдо-класс**, так как это состояние в платформе отсутствует. В качестве примера можно привести компонент пункт меню и состояние *выбрано*. Помимо доступа к вложенным элементам, свойство `classes` можно использовать для настройки специальных состояний компонентов Material-UI: В этом примере также используется `withStyles()` (см. выше), но теперь `ClassesNesting` присваивает свойству `classes` компонета `Button` обьект сопоставляющий **имена переопределяемых классов** (стилевые правила) с **именам использумых классов CSS ** (значениями). Существующие классы компонента будут по прежнему внедряться, поэтому необходимо указать только те стили, которые вы хотите добавить или переопределить. Обратите внимание, что в дополнение к стилю кнопки, стиль текста кнопки был изменен на стиль с заглавными буквами: {{"demo": "pages/customization/components/ClassesNesting.js"}} ### Переопределение стилей через глобальные имена классов [Подробности в этом разделе](/styles/advanced/#with-material-ui-core). ### Использование инструментов разработчика Инструменты разработчика браузера могут сэкономить вам много времени. В режиме разработки имена классов Material-UI [следуют простому шаблону](/styles/advanced/#class-names): `Mui[имя компонента]-[имя стилевого правила]-[UUID]`. Вернемся к упомянутому выше примеру. Как вы можете переопределить текст кнопки? ![Инструменты разработчика](/static/images/customization/dev-tools.png) Используя инструменты разработчика, вы знаете, что вам нужно нацелиться на компонент `Button` и стилевое правило `label`: ```jsx