```
-> **Note**: [state classes](/customization/how-to-customize/#state-classes) are **NOT** component names and therefore cannot be changed/removed.
+> **注：** [状态类](/customization/how-to-customize/#state-classes)**不是**组件名称，因此不能更改/删除
-## Caveat
+## 注意事项
- `ClassNameGenerator.configure` must be called before any MUI components import.
-- you should always use `[component]Classes` for theming/customization to get the correct generated class name.
+- 您应该始终使用 `[component]类` 进行主题化/自定义以获得正确的生成类名称。
```diff
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
@@ -105,12 +105,12 @@ Now, the `Mui` class is gone.
});
```
-- This API should only be used at build-time.
-- The configuration is applied to all of the components across the application. You cannot target a specific part of the application.
+- 此 API 只能在构建时使用。
+- 该配置应用于整个程序的所有组件。 您不能针对应用程序的特定部分。
-## Framework example
+## 框架示例
-In some cases, you might need to add `/* eslint-disable import/first */` at the top of `ClassNameGenerator` import.
+在某些情况下，您可能需要在 `ClassNameGenerator` 导入顶部添加 `/* eslint-disable import/first*/` 来解决报错
```js
/* eslint-disable import/first */
@@ -119,7 +119,7 @@ import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material
### Next.js
-Use ClassNameGenerator in `/pages/_app.js`.
+在 `/pages/_app.js` 中使用 ClassNameGenerator。
```diff
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/utils';
@@ -139,9 +139,9 @@ Use ClassNameGenerator in `/pages/_app.js`.
}
```
-### Create React App
+### 创建React应用
-Use ClassNameGenerator in `/src/index.js`.
+在`/src/index.js` 中使用 ClassNameGenerator
```diff
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/utils';
@@ -157,7 +157,7 @@ Use ClassNameGenerator in `/src/index.js`.
### Gatsby
-Use ClassNameGenerator in `gatsby-ssr.js` at the root folder.
+在根文件夹中的 `gatsby-ssr.js` 文件内使用 GlassNameGenerator
```diff
+import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/utils";
diff --git a/docs/src/pages/guides/content-security-policy/content-security-policy-zh.md b/docs/src/pages/guides/content-security-policy/content-security-policy-zh.md
index b33e1d6e8a6f38..d4fd865a685597 100644
--- a/docs/src/pages/guides/content-security-policy/content-security-policy-zh.md
+++ b/docs/src/pages/guides/content-security-policy/content-security-policy-zh.md
@@ -20,7 +20,7 @@ CSP 通过要求开发人员检索其资产的来源并将其列入白名单来
### 服务端渲染（SSR）
-To use CSP with MUI (and emotion), you need to use a nonce. 随机数是一个随机生成的字符串，只使用一次，因此您需要添加服务器中间件以在每个请求上生成一个。
+如果将CSP与MUI（和 emotion）一起使用，你需要使用一个 随机数. 随机数是一个随机生成的字符串，只使用一次，因此您需要添加服务器中间件以在每个请求上生成一个。
CSP nonce 是一个 Base 64 编码的字符串。 你可以生成这样一个：
diff --git a/docs/src/pages/guides/interoperability/interoperability-zh.md b/docs/src/pages/guides/interoperability/interoperability-zh.md
index 1cb8bbdb2738c6..cc004cfa1fd0dd 100644
--- a/docs/src/pages/guides/interoperability/interoperability-zh.md
+++ b/docs/src/pages/guides/interoperability/interoperability-zh.md
@@ -238,7 +238,7 @@ export default function GlobalCssPriority() {
}
```
-**Note:** If you are using styled-components and have `StyleSheetManager` with a custom `target`, make sure that the target is the first element in the HTML ``. If you are curious to see how it can be done, you can take a look on the `StylesProvider` implementation in the `@material-ui/styled-engine-sc` package. If you are curious to see how it can be done, you can take a look on the `StylesProvider` implementation in the `@mui/styled-engine-sc` package.
+**Note:** If you are using styled-components and have `StyleSheetManager` with a custom `target`, make sure that the target is the first element in the HTML ``. If you are curious to see how it can be done, you can take a look on the `StylesProvider` implementation in the `@material-ui/styled-engine-sc` package. 如果您想知道它是如何完成的，您可以查看 `@mui/styled-engine-sc` 包中的 `StylesProvider` 实现。
### 更深层的元素
diff --git a/docs/src/pages/guides/migration-v4/migration-v4-pt.md b/docs/src/pages/guides/migration-v4/migration-v4-pt.md
index 69578aff560e80..0bd25f043a5bf4 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4-pt.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4-pt.md
@@ -245,7 +245,7 @@ O suporte para componentes de classe, sem o encaminhamento de refs, na proprieda
### Ref type specificity
-For some components, you may get a type error when passing `ref`. In order to avoid the error, you should use a specific element type. For example, `Card` expects the type of `ref` to be `HTMLDivElement`, and `ListItem` expects its `ref` type to be `HTMLLIElement`.
+For some components, you may get a type error when passing `ref`. To avoid the error, you should use a specific element type. For example, `Card` expects the type of `ref` to be `HTMLDivElement`, and `ListItem` expects its `ref` type to be `HTMLLIElement`.
Você pode usar o [codemod `moved-lab-modules`](https://github.com/mui-org/material-ui/tree/HEAD/packages/material-ui-codemod#moved-lab-modules) para realizar uma migração automática.
@@ -273,21 +273,21 @@ The list of components that expect a specific element type is as follows:
##### `@mui/material`
-- [Accordion](/components/accordion) - `HTMLDivElement`
-- [Alert](/components/alert) - `HTMLDivElement`
-- [Avatar](/components/avatar) - `HTMLDivElement`
-- [ButtonGroup](/components/button-group) - `HTMLDivElement`
-- [Card](/components/card) - `HTMLDivElement`
-- [Dialog](/components/dialog) - `HTMLDivElement`
-- [ImageList](/components/image-list) - `HTMLUListElement`
-- [List](/components/list) - `HTMLUListElement`
-- [Tab](/components/tabs) - `HTMLDivElement`
-- [Tabs](/components/tabs) - `HTMLDivElement`
-- [ToggleButton](/components/toggle-button) - `HTMLButtonElement`
+- [Accordion](/api/accordion/) - `HTMLDivElement`
+- [Alert](/api/alert/) - `HTMLDivElement`
+- [Avatar](/api/avatar/) - `HTMLDivElement`
+- [ButtonGroup](/api/button-group/) - `HTMLDivElement`
+- [Card](/api/card/) - `HTMLDivElement`
+- [Dialog](/api/dialog/) - `HTMLDivElement`
+- [ImageList](/api/image-list/) - `HTMLUListElement`
+- [List](/api/list/) - `HTMLUListElement`
+- [Tab](/api/tab/) - `HTMLDivElement`
+- [Tabs](/api/tabs/) - `HTMLDivElement`
+- [ToggleButton](/api/toggle-button/) - `HTMLButtonElement`
##### `@mui/lab`
-- [Timeline](/components/timeline) - `HTMLUListElement`
+- [Timeline](/api/timeline/) - `HTMLUListElement`
### Style library
diff --git a/docs/src/pages/guides/migration-v4/migration-v4-zh.md b/docs/src/pages/guides/migration-v4/migration-v4-zh.md
index 20514c81a8529b..1b810ca1ec8d26 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4-zh.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4-zh.md
@@ -222,7 +222,7 @@ npx @mui/codemod v5.0.0/link-underline-hover
### Ref type specificity
-For some components, you may get a type error when passing `ref`. In order to avoid the error, you should use a specific element type. For example, `Card` expects the type of `ref` to be `HTMLDivElement`, and `ListItem` expects its `ref` type to be `HTMLLIElement`.
+For some components, you may get a type error when passing `ref`. To avoid the error, you should use a specific element type. For example, `Card` expects the type of `ref` to be `HTMLDivElement`, and `ListItem` expects its `ref` type to be `HTMLLIElement`.
Here is an example:
@@ -250,21 +250,21 @@ The list of components that expect a specific element type is as follows:
##### `@mui/material`
-- [Accordion](/components/accordion) - `HTMLDivElement`
-- [Alert](/components/alert) - `HTMLDivElement`
-- [Avatar](/components/avatar) - `HTMLDivElement`
-- [ButtonGroup](/components/button-group) - `HTMLDivElement`
-- [Card](/components/card) - `HTMLDivElement`
-- [Dialog](/components/dialog) - `HTMLDivElement`
-- [ImageList](/components/image-list) - `HTMLUListElement`
-- [List](/components/list) - `HTMLUListElement`
-- [Tab](/components/tabs) - `HTMLDivElement`
-- [Tabs](/components/tabs) - `HTMLDivElement`
-- [ToggleButton](/components/toggle-button) - `HTMLButtonElement`
+- [Accordion](/api/accordion/) - `HTMLDivElement`
+- [Alert](/api/alert/) - `HTMLDivElement`
+- [Avatar](/api/avatar/) - `HTMLDivElement`
+- [ButtonGroup](/api/button-group/) - `HTMLDivElement`
+- [Card](/api/card/) - `HTMLDivElement`
+- [Dialog](/api/dialog/) - `HTMLDivElement`
+- [ImageList](/api/image-list/) - `HTMLUListElement`
+- [List](/api/list/) - `HTMLUListElement`
+- [Tab](/api/tab/) - `HTMLDivElement`
+- [Tabs](/api/tabs/) - `HTMLDivElement`
+- [ToggleButton](/api/toggle-button/) - `HTMLButtonElement`
##### `@mui/lab`
-- [Timeline](/components/timeline) - `HTMLUListElement`
+- [Timeline](/api/timeline/) - `HTMLUListElement`
### Style library
@@ -2786,7 +2786,7 @@ or fix it manually like this:
+import { red } from '@mui/material/colors';
```
-### makeStyles - TypeError: Cannot read property 'drawer' of undefined
+### makeStyles - TypeError：无法读取未定义的属性“drawer”
This error occurs when calling `useStyles` (result of `makeStyles`) or `withStyles` outside of `` scope like this:
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md
index 32409a746ae348..b9a6649ce6327d 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md
@@ -8,7 +8,7 @@ O tamanho do pacote do Material-UI é levado muito a sério. Fotos contendo o ta
## Quando e como usar tree-shaking?
-Tree-shaking no Material-UI funciona de uma forma moderna. Material-UI expõe sua API completa na importação de nível superior `material-ui`. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically:
+Tree-shaking no Material-UI funciona de uma forma moderna. MUI exposes its full API on the top-level `@mui` imports. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically:
```js
import { Button, TextField } from '@material-ui/core';
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md
index 01a96366cfff9e..28798cfac95318 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md
@@ -8,7 +8,7 @@ The bundle size of MUI is taken very seriously. 每一次提交代码时，我
## 何时以及如何使用 tree-shaking?
-Tree-shaking of MUI works out of the box in modern frameworks. Material-UI 在导入顶层的 `material-ui` 时会提供出其完整的 API。 If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically:
+Tree-shaking of MUI works out of the box in modern frameworks. MUI exposes its full API on the top-level `@mui` imports. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically:
```js
import { Button, TextField } from '@material-ui/core';
diff --git a/docs/src/pages/guides/routing/routing-pt.md b/docs/src/pages/guides/routing/routing-pt.md
index 2d3a3a8033fcbb..b887081fccf188 100644
--- a/docs/src/pages/guides/routing/routing-pt.md
+++ b/docs/src/pages/guides/routing/routing-pt.md
@@ -82,7 +82,7 @@ const LinkBehavior = React.forwardRef((props, ref) => (
O Next.js tem [um componente Link personalizado](https://nextjs.org/docs/api-reference/next/link). The [example folder](https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript) provides adapters for usage with Material-UI.
-- A primeira versão do adaptador é o componente [`NextLinkComposed`](https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript/src/Link.tsx) Este componente não tem estilo e é o único responsável pelo manuseio da navegação. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component.
+- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui-org/material-ui/blob/HEAD/examples/nextjs-with-typescript/src/Link.tsx) component. Este componente não tem estilo e é o único responsável pelo manuseio da navegação. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component.
```tsx
import Button from '@material-ui/core/Button';
diff --git a/docs/src/pages/guides/routing/routing-zh.md b/docs/src/pages/guides/routing/routing-zh.md
index 1d2ce0255fc111..9abf007670acaa 100644
--- a/docs/src/pages/guides/routing/routing-zh.md
+++ b/docs/src/pages/guides/routing/routing-zh.md
@@ -82,7 +82,7 @@ In real-life applications, using a native in is also true. Set this to false to disable this behavior.",
"children": "A single child content element.
⚠️ Needs to be able to hold a ref.",
"easing": "The transition timing function. You may specify a single easing or a object containing enter and exit values.",
- "in": "If true, the component will transition in.",
+ "in": "如果被设置为 true，那么该组件将进行淡入淡出。",
"timeout": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
},
"classDescriptions": {}
diff --git a/docs/translations/api-docs/svg-icon/svg-icon-pt.json b/docs/translations/api-docs/svg-icon/svg-icon-pt.json
index ea102e6b1068df..b61ab0395cc393 100644
--- a/docs/translations/api-docs/svg-icon/svg-icon-pt.json
+++ b/docs/translations/api-docs/svg-icon/svg-icon-pt.json
@@ -7,6 +7,7 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.",
"htmlColor": "Applies a color attribute to the SVG element.",
+ "inheritViewBox": "Useful when you want to reference a custom component and have SvgIcon pass that component's viewBox to the root node. If true, the root node will inherit the custom component's viewBox and the viewBox prop will be ignored.",
"shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"titleAccess": "Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent",
diff --git a/docs/translations/api-docs/svg-icon/svg-icon-zh.json b/docs/translations/api-docs/svg-icon/svg-icon-zh.json
index 8e2134262b0d7d..8a8b9a06cf37cd 100644
--- a/docs/translations/api-docs/svg-icon/svg-icon-zh.json
+++ b/docs/translations/api-docs/svg-icon/svg-icon-zh.json
@@ -7,6 +7,7 @@
"component": "The component used for the root node. Either a string to use a HTML element or a component.",
"fontSize": "The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.",
"htmlColor": "Applies a color attribute to the SVG element.",
+ "inheritViewBox": "Useful when you want to reference a custom component and have SvgIcon pass that component's viewBox to the root node. If true, the root node will inherit the custom component's viewBox and the viewBox prop will be ignored.",
"shapeRendering": "The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop.",
"sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.",
"titleAccess": "Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent",
diff --git a/docs/translations/translations-pt.json b/docs/translations/translations-pt.json
index 99b679f501269a..f4b05f79c3ac04 100644
--- a/docs/translations/translations-pt.json
+++ b/docs/translations/translations-pt.json
@@ -333,7 +333,7 @@
"/discover-more/changelog": "Histórico de mudanças",
"/discover-more/languages": "Idiomas",
"/about": "Sobre nós",
- "https://material-ui.com/store/": "Temas premium",
+ "https://mui.com/store/": "Templates",
"/versions": "Versões",
"https://medium.com/material-ui": "Blog"
}
diff --git a/docs/translations/translations-zh.json b/docs/translations/translations-zh.json
index 2de618ccf23054..94e800c065522e 100644
--- a/docs/translations/translations-zh.json
+++ b/docs/translations/translations-zh.json
@@ -333,7 +333,7 @@
"/discover-more/changelog": "更新日志",
"/discover-more/languages": "语言",
"/about": "关于我们",
- "https://material-ui.com/store/": "高级版主题",
+ "https://mui.com/store/": "Templates",
"/versions": "版本",
"https://medium.com/material-ui": "博客"
}