```
-> **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
element is rarely eno
Next.js has [a custom Link component](https://nextjs.org/docs/api-reference/next/link). Next.js has [a custom Link component](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.
-- The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui-org/material-ui/tree/HEAD/examples/nextjs-with-typescript/src/Link.tsx) component. This component is unstyled and only responsible for handling the navigation. The prop `href` was renamed `to` to avoid a naming conflict. This is similar to react-router's Link component. This component is unstyled and only responsible for handling the navigation. 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. This component is unstyled and only responsible for handling the navigation. 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/styled-engine/styled-engine-zh.md b/docs/src/pages/guides/styled-engine/styled-engine-zh.md
index 6b2b65a2170b90..0500232cb993a9 100644
--- a/docs/src/pages/guides/styled-engine/styled-engine-zh.md
+++ b/docs/src/pages/guides/styled-engine/styled-engine-zh.md
@@ -79,7 +79,7 @@ These two packages implement the same interface, which makes it makes possible t
如果您正在使用 create-react-app,示例项目中有一个开箱即用的模板。
-If you already have [styled-components](https://github.com/styled-components/styled-components) installed, it's possible to use it exclusively. There are currently two packages available to choose from:
+如果您已经安装了 `styled-components` , 单独使用它是可行的。 目前有两种方式可供选择:
@@ -89,4 +89,4 @@ If you already have [styled-components](https://github.com/styled-components/sty
> **注意**: `@emotion/react`, `@emotion/styled`, 和 `styled-components` 是 `@mui/materials` 的可选对等依赖,所以您需要自己安装它们。 更多信息请访问 [安装指南](/getting-started/installation/)。
-> **注意:** 这个 package-swap 方法与替换 React 的 [Preact](https://github.com/preactjs/preact) 完全相同。 Preact 开发团队记录了大量安装配置。 如果您被 MUI + styled-components,请不要犹豫,直接查看他们是如何解决问题的,因为您可能会在里面找到解决思路。
+> **注意:** 这个 package-swap 方法与替换 React 的 [Preact](https://github.com/preactjs/preact) 完全相同。 Preact 开发团队记录了大量安装配置。 如果您被 MUI + styled-components 卡住,请不要犹豫,直接查看他们是如何解决问题的,因为您可能会在里面找到解决思路。
diff --git a/docs/translations/api-docs/fade/fade-zh.json b/docs/translations/api-docs/fade/fade-zh.json
index f6bad1f583b7fa..0cf83f8eed3514 100644
--- a/docs/translations/api-docs/fade/fade-zh.json
+++ b/docs/translations/api-docs/fade/fade-zh.json
@@ -1,11 +1,11 @@
{
- "componentDescription": "The Fade transition is used by the [Modal](/components/modal/) component.\nIt uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.",
+ "componentDescription": "Fade 淡入淡出被用于 [Modal](/components/modal/) 组件。\n该组件的动画效果是来源于底层的 [react-transition-group](https://github.com/reactjs/react-transition-group)。",
"propDescriptions": {
"addEndListener": "Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine grained transition end logic. Note: Timeouts are still used as a fallback if provided.",
"appear": "Perform the enter transition when it first mounts if 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": "博客"
}