# 自定义的组件
您可以轻松地自定义一个 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. 一次性使用的特定变体
您可能需要为实现特定的组件而更改样式，以下有几种解决方案：
### 用类名（class names）覆盖样式
覆盖组件样式的第一种方法是使用**类名（class names）** 。 每个组件都提供一个` className `属性，它通常作用于 root 元素。
此示例使用一个高阶组件[` withStyles() `](/styles/basics/#higher-order-component-api)将自定义样式注入 DOM 之中，并通过它的` classes `属性将类名传递给 `ClassNames` 组件。 您可以选择[任何其他的样式解决方案](/guides/interoperability/)，或使用纯 CSS 来创建样式，但一定要 考虑[ CSS 的注入顺序](/styles/advanced/#css-injection-order) ，当通过 Material-UI 将 CSS 注入 DOM 中而来实现组件的样式时，这些 CSS 将具有最高的优先级，因为``被注入到` ` 的底部，这样的话始终正确地渲染组件。
{{"demo": "pages/customization/components/ClassNames.js"}}
### 用类覆盖样式
当 `className` 属性不足够时，你需要访问更深层的元素，这时则可使用`classes` 对象属性，这样就能够自定义该组件中所有由 Material-UI 注入的 CSS。
每一个组件的类列表已记录在组件 API 页面中， 请参阅 **CSS 部分**以及**规则名称栏**来获取更多信息。 例如，您可以查看 [Button CSS API](/api/button/#css)。 或者，您也可以使用[浏览器的 dev tools](#using-the-dev-tools)。
这个例子也使用了 `withStyles()` （见上文），但在这里， `ClassesNesting` 使用 `Button` 的 `classes` 属性来提供一个对象，该对象将 **要覆盖的 classes 子项名** （样式规则）映射到 **对应的CSS属性名称** （值）当中。 组件的现有类将继续被注入，因此只需要提供你想要添加或覆盖的特定样式。
请注意，除按钮样式外，按钮标签的大小写也已更改：
{{"demo": "pages/customization/components/ClassesNesting.js"}}
### 使用全局的类名（ global class names）覆盖样式
[请参考这个章节](/styles/advanced/#with-material-ui-core)。
### 使用开发工具（dev tools）
使用浏览器中的 dev tools，您可以节省大量的时间。 在开发环境中：Material-UI 的 class 名称[遵循一个简单的模式](/styles/advanced/#class-names)：`Mui[组件名称]-[样式规则名称]-[UUID]` 。
让我们回到上面的演示。 你是如何能覆盖按钮标签的样式？
使用开发工具，您则知道您需要定位到`按钮`组件以及其`标签`样式规则：
```jsx