` to match the HTML5 specification. 该示例演示了实现此目的的两种方法。
## 内嵌分隔线
diff --git a/docs/src/pages/components/drawers/drawers-aa.md b/docs/src/pages/components/drawers/drawers-aa.md
index a273917af48323..e2909fab6b72c1 100644
--- a/docs/src/pages/components/drawers/drawers-aa.md
+++ b/docs/src/pages/components/drawers/drawers-aa.md
@@ -27,10 +27,10 @@ crwdns90142:0crwdne90142:0 crwdns90144:0crwdne90144:0 crwdns90146:0crwdne90146:0
crwdns90148:0crwdne90148:0
-crwdns90150:0crwdne90150:0
+crwdns101114:0crwdne101114:0
-- crwdns90152:0crwdne90152:0 crwdns90154:0crwdne90154:0 crwdns90156:0crwdne90156:0
-- crwdns90158:0crwdne90158:0 crwdns90160:0crwdne90160:0
+- crwdns90152:0crwdne90152:0 crwdns101116:0crwdne101116:0 crwdns90156:0crwdne90156:0
+- crwdns101118:0crwdne101118:0
```jsx
crwdns90162:0{iOS}crwdne90162:0
diff --git a/docs/src/pages/components/drawers/drawers-de.md b/docs/src/pages/components/drawers/drawers-de.md
index e308f412bde9d1..6a36fc6d17ca94 100644
--- a/docs/src/pages/components/drawers/drawers-de.md
+++ b/docs/src/pages/components/drawers/drawers-de.md
@@ -27,10 +27,10 @@ Diese Komponente ist mit einem 2-kB-gzipped -Overhead ausgestattet. Einige mobil
{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}
-We are using the following set of properties on this documentation website for optimal usability of the component:
+The following properties are used in this documentation website for optimal usability of the component:
-- iOS is hosted on high-end devices. Wir können den Hintergrundübergang aktivieren, ohne einen Einbruch der Bilder pro Sekunde zu sehen. Die Leistung wird gut genug sein.
-- iOS has a "swipe to go back" feature that mess with the discovery feature. Wir müssen es deaktivieren.
+- iOS is hosted on high-end devices. The backdrop transition can be enabled without dropping frames. Die Leistung wird gut genug sein.
+- iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.
```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
diff --git a/docs/src/pages/components/drawers/drawers-es.md b/docs/src/pages/components/drawers/drawers-es.md
index e95225b4e89db7..d81798d810d91f 100644
--- a/docs/src/pages/components/drawers/drawers-es.md
+++ b/docs/src/pages/components/drawers/drawers-es.md
@@ -27,10 +27,10 @@ Este componente viene con una sobrecarga de carga gzipped de 2 kB. Algunos dispo
{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}
-We are using the following set of properties on this documentation website for optimal usability of the component:
+The following properties are used in this documentation website for optimal usability of the component:
-- iOS is hosted on high-end devices. Podemos habilitar la transición de fondo sin dejar caer marcos. El rendimiento será lo suficientemente bueno.
-- iOS has a "swipe to go back" feature that mess with the discovery feature. Tenemos que deshabilitarlo.
+- iOS is hosted on high-end devices. The backdrop transition can be enabled without dropping frames. El rendimiento será lo suficientemente bueno.
+- iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.
```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
diff --git a/docs/src/pages/components/drawers/drawers-fr.md b/docs/src/pages/components/drawers/drawers-fr.md
index 1d5494c27f6d77..f6d51f50e14dc7 100644
--- a/docs/src/pages/components/drawers/drawers-fr.md
+++ b/docs/src/pages/components/drawers/drawers-fr.md
@@ -27,10 +27,10 @@ This component comes with a 2 kB gzipped payload overhead. Some low-end mobile d
{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}
-We are using the following set of properties on this documentation website for optimal usability of the component:
+The following properties are used in this documentation website for optimal usability of the component:
-- iOS is hosted on high-end devices. We can enable the backdrop transition without dropping frames. The performance will be good enough.
-- iOS has a "swipe to go back" feature that mess with the discovery feature. We have to disable it.
+- iOS is hosted on high-end devices. The backdrop transition can be enabled without dropping frames. The performance will be good enough.
+- iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.
```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
diff --git a/docs/src/pages/components/drawers/drawers-ja.md b/docs/src/pages/components/drawers/drawers-ja.md
index 436fa94ef25750..0eb995f6361e5a 100644
--- a/docs/src/pages/components/drawers/drawers-ja.md
+++ b/docs/src/pages/components/drawers/drawers-ja.md
@@ -27,10 +27,10 @@ components: Drawer, SwipeableDrawer
{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}
-コンポーネントの使いやすさを最適化するために、このドキュメントWebサイトの次のプロパティセットを使用しています。
+The following properties are used in this documentation website for optimal usability of the component:
-- iOSはハイエンドデバイスでホストされています。 フレームを落とさずに背景遷移を有効にすることができます。 性能は十分良いでしょう。
-- iOSには、検出機能に を設定する「戻るスワイプ」機能があります。 無効にする必要があります。
+- iOSはハイエンドデバイスでホストされています。 The backdrop transition can be enabled without dropping frames. 性能は十分良いでしょう。
+- iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.
```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
diff --git a/docs/src/pages/components/drawers/drawers-pt.md b/docs/src/pages/components/drawers/drawers-pt.md
index 0d8ea7af672378..f87e3fee39fda2 100644
--- a/docs/src/pages/components/drawers/drawers-pt.md
+++ b/docs/src/pages/components/drawers/drawers-pt.md
@@ -27,10 +27,10 @@ Este componente vem sobrecarregado com 2 kB gzipped de utilidades. Alguns dispos
{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}
-Estamos usando o seguinte conjunto de propriedades neste site de documentação para otimizar a usabilidade do componente:
+The following properties are used in this documentation website for optimal usability of the component:
-- iOS está hospedado em dispositivos de última geração. Podemos ativar a transição backdrop sem perder quadros. O desempenho será suficientemente bom.
-- O iOS tem um recurso "deslizar para trás" que bagunça com o recurso de descoberta. Tivemos que desativá-lo.
+- iOS está hospedado em dispositivos de última geração. The backdrop transition can be enabled without dropping frames. O desempenho será suficientemente bom.
+- iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.
```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
diff --git a/docs/src/pages/components/drawers/drawers-ru.md b/docs/src/pages/components/drawers/drawers-ru.md
index ae5b1c811f22a8..d0afc24bca4f6f 100644
--- a/docs/src/pages/components/drawers/drawers-ru.md
+++ b/docs/src/pages/components/drawers/drawers-ru.md
@@ -27,10 +27,10 @@ The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It
{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}
-We are using the following set of properties on this documentation website for optimal usability of the component:
+The following properties are used in this documentation website for optimal usability of the component:
-- iOS is hosted on high-end devices. Поэтому использование backdrop transition не вызывает пропуска кадров. Производительность достаточно хороша.
-- iOS has a "swipe to go back" feature that mess with the discovery feature. Данный жест должен быть отключен.
+- iOS is hosted on high-end devices. The backdrop transition can be enabled without dropping frames. Производительность достаточно хороша.
+- iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.
```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
diff --git a/docs/src/pages/components/drawers/drawers-zh.md b/docs/src/pages/components/drawers/drawers-zh.md
index e58bb49607b4d6..5bbbf4b7c1bb21 100644
--- a/docs/src/pages/components/drawers/drawers-zh.md
+++ b/docs/src/pages/components/drawers/drawers-zh.md
@@ -27,10 +27,10 @@ The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It
{{"demo": "pages/components/drawers/SwipeableTemporaryDrawer.js"}}
-We are using the following set of properties on this documentation website for optimal usability of the component:
+The following properties are used in this documentation website for optimal usability of the component:
-- iOS is hosted on high-end devices. 我们可以在不丢帧的情况下启用背景转换。 这样展示令人足够满意了。
-- iOS has a "swipe to go back" feature that mess with the discovery feature. 我们必须禁用它。
+- iOS is hosted on high-end devices. The backdrop transition can be enabled without dropping frames. 这样展示令人足够满意了。
+- iOS has a "swipe to go back" feature that interferes with the discovery feature, so discovery has to be disabled.
```jsx
const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
diff --git a/docs/src/pages/components/hidden/hidden-aa.md b/docs/src/pages/components/hidden/hidden-aa.md
index 0accbdf636c438..661b8aef0050c9 100644
--- a/docs/src/pages/components/hidden/hidden-aa.md
+++ b/docs/src/pages/components/hidden/hidden-aa.md
@@ -5,9 +5,9 @@ components: crwdns90474:0crwdne90474:0
# crwdns90476:0crwdne90476:0
-crwdns90478:0crwdne90478:0
+crwdns101120:0crwdne101120:0
-crwdns90480:0crwdne90480:0 crwdns90482:0crwdne90482:0
+crwdns90480:0crwdne90480:0 crwdns101122:0crwdne101122:0
## crwdns90484:0crwdne90484:0
diff --git a/docs/src/pages/components/hidden/hidden-de.md b/docs/src/pages/components/hidden/hidden-de.md
index 8613d0b854e13f..46f7eb146f872f 100644
--- a/docs/src/pages/components/hidden/hidden-de.md
+++ b/docs/src/pages/components/hidden/hidden-de.md
@@ -5,9 +5,9 @@ components: Hidden
# Hidden
-Wechseln Sie mit unseren versteckten Komponenten schnell und ansprechend den Sichtbarkeitswert von Komponenten und mehr.
+Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
-Alle Elemente sind sichtbar, außer **sie explizit versteckt**. Um die Integration mit Material-UI [responsiven Haltepunkten](/customization/breakpoints/) zu vereinfachen, können Sie mit dieser Komponente jeden Inhalt ausblenden oder Sie können ihn zusammen mit unserer [`Grid`](/components/grid/) Komponente verwenden.
+Alle Elemente sind sichtbar, außer **sie explizit versteckt**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component.
## So funktioniert es
diff --git a/docs/src/pages/components/hidden/hidden-es.md b/docs/src/pages/components/hidden/hidden-es.md
index eeb5900c6b0964..7c6909d052271f 100644
--- a/docs/src/pages/components/hidden/hidden-es.md
+++ b/docs/src/pages/components/hidden/hidden-es.md
@@ -5,9 +5,9 @@ components: Hidden
# Hidden
-Quickly and responsively toggle the visibility value of components and more with our hidden utilities.
+Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
-All elements are visible unless **they are explicitly hidden**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with our [`Grid`](/components/grid/) component.
+All elements are visible unless **they are explicitly hidden**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component.
## Cómo funciona
diff --git a/docs/src/pages/components/hidden/hidden-fr.md b/docs/src/pages/components/hidden/hidden-fr.md
index 5ca4ec9cfaec3a..877e9ea1b03710 100644
--- a/docs/src/pages/components/hidden/hidden-fr.md
+++ b/docs/src/pages/components/hidden/hidden-fr.md
@@ -5,9 +5,9 @@ components: Hidden
# Hidden
-Changer rapidement et de manière réactive la valeur de visibilité des composants et bien plus encore grâce à nos utilitaires cachés.
+Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
-Tous les éléments sont visibles à moins **qu'ils soient explicitement cachés**. Pour faciliter l'intégration avec [ les points d'arrêt responsive](/customization/breakpoints/) de Material-UI, ce composant peut être utilisé pour cacher n'importe quel contenu, ou vous pouvez l'utiliser en conjonction avec notre composant [`Grid`](/components/grid/).
+Tous les éléments sont visibles à moins **qu'ils soient explicitement cachés**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component.
## Comment ça marche
diff --git a/docs/src/pages/components/hidden/hidden-ja.md b/docs/src/pages/components/hidden/hidden-ja.md
index 301074b9d85005..5bb74b6f0e464b 100644
--- a/docs/src/pages/components/hidden/hidden-ja.md
+++ b/docs/src/pages/components/hidden/hidden-ja.md
@@ -5,9 +5,9 @@ components: Hidden
# Hidden
-非表示のユーティリティを使用して、コンポーネントの表示/非表示の値などをすばやくすばやく切り替えることができます。
+Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
-**明示的に非表示にしない限り**、すべての要素が表示されます。 Materialized UIの [responsive breakpoints](/customization/breakpoints/) との統合を容易にするには、次の手順に従います。 このコンポーネントを使用して任意のコンテンツを非表示にできます。 また、[`Grid`](/components/grid/)コンポーネントと組み合わせて使用することもできます。
+**明示的に非表示にしない限り**、すべての要素が表示されます。 To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component.
## 仕組み
diff --git a/docs/src/pages/components/hidden/hidden-pt.md b/docs/src/pages/components/hidden/hidden-pt.md
index dfcd9912a71683..2f4c297b45469a 100644
--- a/docs/src/pages/components/hidden/hidden-pt.md
+++ b/docs/src/pages/components/hidden/hidden-pt.md
@@ -5,9 +5,9 @@ components: Hidden
# Hidden
-Modifique rapidamente e de forma responsiva a visibilidade dos componentes e muito mais com nosso utilitário hidden.
+Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
-Todos os elementos são visíveis a menos que **estejam explicitamente ocultos**. Para facilitar a integração com [pontos de quebra (breakpoint) responsivos](/customization/breakpoints/) do Material-UI's, este componente pode ser utilizado, ou você pode usa-lo de forma conjunta com um componente [`Grid`](/components/grid/).
+Todos os elementos são visíveis a menos que **estejam explicitamente ocultos**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component.
## Como funciona
diff --git a/docs/src/pages/components/hidden/hidden-ru.md b/docs/src/pages/components/hidden/hidden-ru.md
index cd1b63437a4299..69aba5c41331ec 100644
--- a/docs/src/pages/components/hidden/hidden-ru.md
+++ b/docs/src/pages/components/hidden/hidden-ru.md
@@ -5,9 +5,9 @@ components: Hidden
# Hidden
-Быстро и оперативно переключайте значения видимости компонентов и многое другое с помощью наших утилит для скрытия.
+Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
-Все элементы видны, если **они явно не скрыты**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with our [`Grid`](/components/grid/) component.
+Все элементы видны, если **они явно не скрыты**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component.
## Как это работает
diff --git a/docs/src/pages/components/hidden/hidden-zh.md b/docs/src/pages/components/hidden/hidden-zh.md
index 66eaa498624953..fbc990c27c7527 100644
--- a/docs/src/pages/components/hidden/hidden-zh.md
+++ b/docs/src/pages/components/hidden/hidden-zh.md
@@ -5,9 +5,9 @@ components: Hidden
# Hidden
-您可以使用我们的隐藏组件来实现快速并响应式地控制元素的显隐。
+Quickly and responsively toggle the visibility value of components and more with the hidden utilities.
-除非**明确指定是隐藏的**，所有元素都是可见的。 为了简化与[响应式断点](/customization/breakpoints/)的集成， 此组件可用于隐藏任何内容，或者您可以将它与我们的[`栅格`](/components/grid/)组件结合使用。
+除非**明确指定是隐藏的**，所有元素都是可见的。 To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component.
## 它是如何工作的
diff --git a/docs/src/pages/components/icons/icons-aa.md b/docs/src/pages/components/icons/icons-aa.md
index 97653ee5265ad7..315b32bb5b7e7c 100644
--- a/docs/src/pages/components/icons/icons-aa.md
+++ b/docs/src/pages/components/icons/icons-aa.md
@@ -29,7 +29,7 @@ crwdns90568:0crwdne90568:0 crwdns100266:0crwdne100266:0
#### crwdns90578:0crwdne90578:0
-crwdns100270:0crwdne100270:0 crwdns90582:0crwdne90582:0
+crwdns101124:0crwdne101124:0 crwdns90582:0crwdne90582:0
- crwdns90584:0crwdne90584:0
- crwdns90586:0crwdne90586:0
@@ -53,12 +53,12 @@ crwdns90608:0crwdne90608:0
crwdns100274:0crwdne100274:0
-- crwdns100276:0crwdne100276:0
+- crwdns100534:0crwdne100534:0
```jsx
- crwdns100278:0{ AccessAlarm, ThreeDRotation }crwdne100278:0
-crwdns100280:0crwdne100280:0
-crwdns100282:0crwdne100282:0
+ crwdns100536:0{ AccessAlarm, ThreeDRotation }crwdne100536:0
+crwdns101126:0crwdne101126:0
+crwdns101128:0crwdne101128:0
crwdns100284:0crwdne100284:0 crwdns100286:0crwdne100286:0
crwdns100288:0[mdi-material-ui]crwdne100288:0
@@ -102,11 +102,11 @@ crwdns100328:0crwdne100328:0 crwdns100330:0crwdne100330:0
### crwdns100340:0crwdne100340:0
-crwdns100342:0crwdne100342:0 crwdns100344:0crwdne100344:0
+crwdns100342:0crwdne100342:0 crwdns101130:0crwdne101130:0
### crwdns100346:0crwdne100346:0
-crwdns100348:0crwdne100348:0 crwdns100350:0crwdne100350:0
+crwdns100348:0crwdne100348:0 crwdns101132:0crwdne101132:0
crwdns100352:0crwdne100352:0
@@ -118,7 +118,7 @@ crwdns100356:0crwdne100356:0
### crwdns100358:0crwdne100358:0
-crwdns100360:0crwdne100360:0 crwdns100362:0crwdne100362:0
+crwdns100360:0crwdne100360:0 crwdns101134:0crwdne101134:0
### crwdns100364:0crwdne100364:0
diff --git a/docs/src/pages/components/icons/icons-de.md b/docs/src/pages/components/icons/icons-de.md
index b2fe4718cbecd0..f461df6c8b0883 100644
--- a/docs/src/pages/components/icons/icons-de.md
+++ b/docs/src/pages/components/icons/icons-de.md
@@ -29,7 +29,7 @@ Es ist interessant, über die Bausteine zu verfügen, die zum Implementieren von
#### Nutzung
-You can use our [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. Beachten Sie beim Importieren eines Symbols, dass die Namen der Symbole `PascalCase` sind, zum Beispiel:
+You can use the [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. Beachten Sie beim Importieren eines Symbols, dass die Namen der Symbole `PascalCase` sind, zum Beispiel:
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) ist unter `@material-ui/icons/Delete` bereitgestellt
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) ist unter `@material-ui/icons/DeleteForever` bereitgestellt
@@ -53,21 +53,22 @@ Hier gibt es drei Ausnahmen:
You can import the icons with one of these two options:
-- Option n°1:
+- Option 1:
```jsx
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
```
-- Option n2:
+
+- Option 2:
```jsx
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
```
-The safest option is n°1 but option n°2 can yield the best experience.
-Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
-We encourage the configuration of a Babel plugin.
+The safest is option 1 but option 2 can yield the best experience.
+Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
+The configuration of a Babel plugin is encouraged.
### More SVG icons
@@ -122,11 +123,11 @@ Icons can convey all sorts of meaningful information, so it’s important that t
### Decorative SVG Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic SVG Icons
-If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. We add the `role="img"` attribute and the `` element so that your icons are properly accessible.
+If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. The `role="img"` attribute and the `<title>` element are added so that your icons are properly accessible.
In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property:
@@ -145,7 +146,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic Font Icons
diff --git a/docs/src/pages/components/icons/icons-es.md b/docs/src/pages/components/icons/icons-es.md
index 8786d48dc07116..4fcf04f2dd81d4 100644
--- a/docs/src/pages/components/icons/icons-es.md
+++ b/docs/src/pages/components/icons/icons-es.md
@@ -29,7 +29,7 @@ Es interesante tener los cimientos para implementar iconos personalizados, pero
#### Implementación
-You can use our [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. Al importar un icono, sa ha de tener presente que los nombres de los iconos son en forma `PascalCase`, por ejemplo:
+You can use the [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. Al importar un icono, sa ha de tener presente que los nombres de los iconos son en forma `PascalCase`, por ejemplo:
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) está disponible como `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) está disponible como `@material-ui/icons/DeleteForever`
@@ -53,21 +53,22 @@ Hay tres excepciones a esta regla:
You can import the icons with one of these two options:
-- Option n°1:
+- Option 1:
```jsx
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
```
-- Option n2:
+
+- Option 2:
```jsx
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
```
-The safest option is n°1 but option n°2 can yield the best experience.
-Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
-We encourage the configuration of a Babel plugin.
+The safest is option 1 but option 2 can yield the best experience.
+Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
+The configuration of a Babel plugin is encouraged.
### More SVG icons
@@ -122,11 +123,11 @@ Icons can convey all sorts of meaningful information, so it’s important that t
### Decorative SVG Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic SVG Icons
-If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. We add the `role="img"` attribute and the `<title>` element so that your icons are properly accessible.
+If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. The `role="img"` attribute and the `<title>` element are added so that your icons are properly accessible.
In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property:
@@ -145,7 +146,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic Font Icons
diff --git a/docs/src/pages/components/icons/icons-fr.md b/docs/src/pages/components/icons/icons-fr.md
index 7f0db9d59ba60f..44f569a2d42c65 100644
--- a/docs/src/pages/components/icons/icons-fr.md
+++ b/docs/src/pages/components/icons/icons-fr.md
@@ -29,7 +29,7 @@ Il est intéressant de disposer des éléments nécessaires à la mise en œuvre
#### Utilisation
-You can use our [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. Lors de l'importation d'une icône, n'oubliez pas que les noms des icônes sont `PascalCase`, par exemple:
+You can use the [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. Lors de l'importation d'une icône, n'oubliez pas que les noms des icônes sont `PascalCase`, par exemple:
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) est exposé en tant que `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) est exposé en tant que `@material-ui/icons/DeleteForever`
@@ -53,21 +53,22 @@ Il y a trois exceptions à cette règle:
You can import the icons with one of these two options:
-- Option n°1:
+- Option 1:
```jsx
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
```
-- Option n2:
+
+- Option 2:
```jsx
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
```
-The safest option is n°1 but option n°2 can yield the best experience.
-Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
-We encourage the configuration of a Babel plugin.
+The safest is option 1 but option 2 can yield the best experience.
+Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
+The configuration of a Babel plugin is encouraged.
### More SVG icons
@@ -122,11 +123,11 @@ Icons can convey all sorts of meaningful information, so it’s important that t
### Decorative SVG Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic SVG Icons
-If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. We add the `role="img"` attribute and the `<title>` element so that your icons are properly accessible.
+If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. The `role="img"` attribute and the `<title>` element are added so that your icons are properly accessible.
In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property:
@@ -145,7 +146,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic Font Icons
diff --git a/docs/src/pages/components/icons/icons-ja.md b/docs/src/pages/components/icons/icons-ja.md
index 98b58c6b255d0c..f6bafa6af4b371 100644
--- a/docs/src/pages/components/icons/icons-ja.md
+++ b/docs/src/pages/components/icons/icons-ja.md
@@ -29,7 +29,7 @@ Material-UIは、System iconsをレンダリングするための2つのコン
#### 使い方
-アイコンを探すのに [内部検索](/components/material-icons/)もしくは[material.io/tools/icons](https://material.io/tools/icons/?style=baseline)ページを利用できます。 アイコンをインポートするときは、アイコンの名前が `PascalCase`であることに注意してください。
+You can use the [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. アイコンをインポートするときは、アイコンの名前が `PascalCase`であることに注意してください。
- [` delete `](https://material.io/tools/icons/?icon=delete&style=baseline) は `@material-ui/icons/Delete`として公開されています。
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) は `@material-ui/icons/DeleteForever`として公開されます。
@@ -53,20 +53,22 @@ For "themed" icons, append the theme name to the icon name. たとえば
アイコンのインポートは下記の2つの方法で可能です
-- オプションn°1:
+- Option 1:
```jsx
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
```
-- オプションn2:
+
+- Option 2:
```jsx
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
```
-最も安全なのはオプションn°1ですが、オプションn°2も同様に動きます。
-Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
-We encourage the configuration of a Babel plugin.
+
+The safest is option 1 but option 2 can yield the best experience.
+Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
+The configuration of a Babel plugin is encouraged.
### More SVG icons
@@ -121,11 +123,11 @@ Icons can convey all sorts of meaningful information, so it’s important that t
### Decorative SVG Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic SVG Icons
-If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. We add the `role="img"` attribute and the `<title>` element so that your icons are properly accessible.
+If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. The `role="img"` attribute and the `<title>` element are added so that your icons are properly accessible.
In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property:
@@ -144,7 +146,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic Font Icons
@@ -160,6 +162,6 @@ import Typography from '@material-ui/core/Typography';
<Typography variant="srOnly">Create a user</Typography>
```
-### Reference
+### リファレンス
- https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/
\ No newline at end of file
diff --git a/docs/src/pages/components/icons/icons-pt.md b/docs/src/pages/components/icons/icons-pt.md
index ff8f32b9deae1a..8ddbba5fd721aa 100644
--- a/docs/src/pages/components/icons/icons-pt.md
+++ b/docs/src/pages/components/icons/icons-pt.md
@@ -29,7 +29,7 @@ O ícone resultante pode ser usado como está, ou incluído como filho para outr
#### Uso
-Você pode usar nossa [procura interna](/components/material-icons/) ou [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) para encontrar um ícone específico. Ao importar um ícone, tenha em mente que os nomes dos ícones são `PascalCase`, por exemplo:
+You can use the [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. Ao importar um ícone, tenha em mente que os nomes dos ícones são `PascalCase`, por exemplo:
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) é exposto como `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) é exposto como `@material-ui/icons/DeleteForever`
@@ -53,21 +53,22 @@ Há três exceções para esta regra:
Você pode importar os ícones com uma destas duas opções:
-- Opção n ° 1:
+- Opção 1:
```jsx
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
```
-- Opção n2:
+
+- Option 2:
```jsx
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
```
-A opção mais segura é n° 1, mas a opção n° 2 pode proporcionar a melhor experiência.
-Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
-We encourage the configuration of a Babel plugin.
+The safest is option 1 but option 2 can yield the best experience.
+Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
+The configuration of a Babel plugin is encouraged.
### More SVG icons
@@ -122,11 +123,11 @@ Icons can convey all sorts of meaningful information, so it’s important that t
### Decorative SVG Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic SVG Icons
-If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. We add the `role="img"` attribute and the `<title>` element so that your icons are properly accessible.
+If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. The `role="img"` attribute and the `<title>` element are added so that your icons are properly accessible.
In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property:
@@ -145,7 +146,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic Font Icons
@@ -158,9 +159,9 @@ import Typography from '@material-ui/core/Typography';
// ...
<Icon>add_circle</Icon>
-<Typography variant="srOnly">Create a user</Typography>
+<Typography variant="srOnly">Criar usuário</Typography>
```
-### Reference
+### Referência
- https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/
\ No newline at end of file
diff --git a/docs/src/pages/components/icons/icons-ru.md b/docs/src/pages/components/icons/icons-ru.md
index 52af754d354551..d4471a82f12c7a 100644
--- a/docs/src/pages/components/icons/icons-ru.md
+++ b/docs/src/pages/components/icons/icons-ru.md
@@ -29,7 +29,7 @@ Material-UI предоставляет два компонента для ото
#### Использование
-You can use our [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. При импорте имейте в виду, что для названий иконок используется написание `PascalCase`, например:
+You can use the [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. При импорте имейте в виду, что для названий иконок используется написание `PascalCase`, например:
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) представлена как `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) представлена как `@material-ui/icons/DeleteForever`
@@ -53,21 +53,22 @@ For "themed" icons, append the theme name to the icon name. For instance with th
You can import the icons with one of these two options:
-- Option n°1:
+- Option 1:
```jsx
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
```
-- Option n2:
+
+- Option 2:
```jsx
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
```
-The safest option is n°1 but option n°2 can yield the best experience.
-Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
-We encourage the configuration of a Babel plugin.
+The safest is option 1 but option 2 can yield the best experience.
+Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
+The configuration of a Babel plugin is encouraged.
### More SVG icons
@@ -122,11 +123,11 @@ Icons can convey all sorts of meaningful information, so it’s important that t
### Decorative SVG Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic SVG Icons
-If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. We add the `role="img"` attribute and the `<title>` element so that your icons are properly accessible.
+If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. The `role="img"` attribute and the `<title>` element are added so that your icons are properly accessible.
In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property:
@@ -145,7 +146,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic Font Icons
diff --git a/docs/src/pages/components/icons/icons-zh.md b/docs/src/pages/components/icons/icons-zh.md
index 3d49dad17119e5..13a82e2991add5 100644
--- a/docs/src/pages/components/icons/icons-zh.md
+++ b/docs/src/pages/components/icons/icons-zh.md
@@ -21,7 +21,7 @@ Material-UI 提供了两个组件来渲染系统图标：`SvgIcon` 来渲染 SVG
### SVG Material 图标
-拥有实现自定义图标所需的构成模块很令人感兴趣，但如何实现预设图标呢？ [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) is an npm package that includes the 1,000+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to `SvgIcon` components.
+拥有实现自定义图标所需的构成模块很令人感兴趣，但如何实现预设图标呢？ 我们提供[@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons)这样一个单独的 npm 包，其中包含了1000多个已转换为 `SvgIcon` 组件的 [Material 图标](https://material.io/tools/icons/?style=baseline)。
<a href="/components/material-icons/">
<img src="/static/images/icons/icons.png" alt="官方 material 图标" style="width: 566px" />
@@ -29,12 +29,12 @@ Material-UI 提供了两个组件来渲染系统图标：`SvgIcon` 来渲染 SVG
#### 使用
-You can use our [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. 当您导入图标时, 请记住图标的名称使用了 `PascalCase（帕斯卡命名规则）`，例如：
+You can use the [internal search](/components/material-icons/) or [material.io/tools/icons](https://material.io/tools/icons/?style=baseline) to find a specific icon. 当您导入图标时, 请记住图标的名称使用了 `PascalCase（帕斯卡命名规则）`，例如：
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) 暴露为 `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) 暴露为 `@material-ui/icons/DeleteForever`
-For "themed" icons, append the theme name to the icon name. For instance with the
+对于“主题化”图标，是将主题名称附加到图标名称后面。 例如：
- 描边的 [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) 图标由 `@material-ui/icons/DeleteOutlined` 暴露
- 圆角的 [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) 图标由 `@material-ui/icons/DeleteRounded` 暴露
@@ -51,33 +51,34 @@ For "themed" icons, append the theme name to the icon name. For instance with th
#### 导入
-You can import the icons with one of these two options:
+导入图标有以下两种方法：
-- Option n°1:
+- 方法 1:
```jsx
- import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
- import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
- ```
-- Option n2:
+ ```jsx
+import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
+import ThreeDRotation from '@material-ui/icons/ThreeDRotation';
+```
+
+- 方法 2:
```jsx
import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
```
-The safest option is n°1 but option n°2 can yield the best experience.
-Make sure you follow our [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the approach n°2.
-We encourage the configuration of a Babel plugin.
+最安全的方法是“方法1”，不过“方法2”用户体验更佳。
+Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach.
+The configuration of a Babel plugin is encouraged.
-### More SVG icons
+### 更多SVG图标
-Looking for even more SVG icons? There are a lot of projects out there,
-but [https://materialdesignicons.com](https://materialdesignicons.com/) provides over 2,000 official and community provided icons.
-[mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) packages these icons as Material-UI SvgIcons in much the same way as [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) does for the official icons.
+正在寻找更多SVG图标？ 即使已经有许多项目存在，不过 [https://materialdesignicons.com](https://materialdesignicons.com/) 仍然提供了超过 2,000 种由官方和我们的社区提供的图标。
+[mdi-material-ui](https://github.com/TeamWertarbyte/mdi-material-ui) 将这些图标打包为Material-UI SvgIcons，其方式与[@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons)打包官方图标的方式大致相同。
-## Font Icons
+## 字体图标
-The `Icon` component will display an icon from any icon font that supports ligatures.
+通过 使用`Icon` 组件，任何支持连字的图标字体都将正常显示为一个图标。
As a prerequisite, you must include one, such as the
[Material icon font](https://google.github.io/material-design-icons/#icon-font-for-the-web) in your project, for instance, via Google Web Fonts:
@@ -122,11 +123,11 @@ Icons can convey all sorts of meaningful information, so it’s important that t
### Decorative SVG Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic SVG Icons
-If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. We add the `role="img"` attribute and the `<title>` element so that your icons are properly accessible.
+If your icon has semantic meaning, all you need to do is throw in a `titleAccess="meaning"` property. The `role="img"` attribute and the `<title>` element are added so that your icons are properly accessible.
In the case of focusable interactive elements, like when used with an icon button, you can use the `aria-label` property:
@@ -145,7 +146,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
+If your icons are purely decorative, you’re already done! The `aria-hidden=true` attribute is added so that your icons are properly accessible (invisible).
### Semantic Font Icons
diff --git a/docs/src/pages/components/links/links-aa.md b/docs/src/pages/components/links/links-aa.md
index 5b111b6882054d..041304f03e1722 100644
--- a/docs/src/pages/components/links/links-aa.md
+++ b/docs/src/pages/components/links/links-aa.md
@@ -38,4 +38,4 @@ crwdns90768:0crwdne90768:0 crwdns90770:0crwdne90770:0
crwdns90772:0crwdne90772:0
-*crwdns90774:0crwdne90774:0 crwdns90776:0crwdne90776:0*
\ No newline at end of file
+*crwdns90774:0crwdne90774:0 crwdns101136:0crwdne101136:0*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-de.md b/docs/src/pages/components/links/links-de.md
index 660c37ed7e5c61..cfd37df8b45d84 100644
--- a/docs/src/pages/components/links/links-de.md
+++ b/docs/src/pages/components/links/links-de.md
@@ -38,4 +38,4 @@ Ein häufiger Anwendungsfall besteht darin, die Navigation nur clientseitig durc
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*Merke: Das Erstellen einer Link Komponente ist notwendig um unerwünschtes Unmounting zu verhindern. Weitere Informationen dazu finden Sie in unserem [Komponenten-Guide](/guides/composition/#component-property).*
\ No newline at end of file
+*Merke: Das Erstellen einer Link Komponente ist notwendig um unerwünschtes Unmounting zu verhindern. You can read more about it in the [component prop guide](/guides/composition/#component-property).*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-es.md b/docs/src/pages/components/links/links-es.md
index 952930dc797725..ead9f761074931 100644
--- a/docs/src/pages/components/links/links-es.md
+++ b/docs/src/pages/components/links/links-es.md
@@ -38,4 +38,4 @@ One common use case is to perform the navigation on the client only, without doi
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).*
\ No newline at end of file
+*Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in the [component prop guide](/guides/composition/#component-property).*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-fr.md b/docs/src/pages/components/links/links-fr.md
index df1244453dbc6c..31a9e52aad3569 100644
--- a/docs/src/pages/components/links/links-fr.md
+++ b/docs/src/pages/components/links/links-fr.md
@@ -38,4 +38,4 @@ One common use case is to perform the navigation on the client only, without doi
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).*
\ No newline at end of file
+*Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in the [component prop guide](/guides/composition/#component-property).*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-ja.md b/docs/src/pages/components/links/links-ja.md
index c64320256c1ddb..75ed2ba04b1816 100644
--- a/docs/src/pages/components/links/links-ja.md
+++ b/docs/src/pages/components/links/links-ja.md
@@ -38,4 +38,4 @@ Linkコンポーネントは、 [Typography](/api/typography/) コンポーネ
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*注：予期しないアンマウントを防ぐために、リンクコンポーネントを作成する必要があります。 詳細については、<a href=「/guides/composition/#component-property」>コンポーネント・プロパティー・ガイド</a>を参照してください。*
\ No newline at end of file
+*注：予期しないアンマウントを防ぐために、リンクコンポーネントを作成する必要があります。 You can read more about it in the [component prop guide](/guides/composition/#component-property).*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-pt.md b/docs/src/pages/components/links/links-pt.md
index 7bd5a0785fd8dc..957793d8fe42e8 100644
--- a/docs/src/pages/components/links/links-pt.md
+++ b/docs/src/pages/components/links/links-pt.md
@@ -38,4 +38,4 @@ Um caso comum é executar a navegação apenas no cliente, sem fazer uma ida e v
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*Nota: A criação de componentes de link é necessária para impedir a desmontagem inesperada. Você pode ler mais sobre isso em nosso [ guia de propriedades de componente](/guides/composition/#component-property).*
\ No newline at end of file
+*Nota: A criação de componentes de link é necessária para impedir a desmontagem inesperada. You can read more about it in the [component prop guide](/guides/composition/#component-property).*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-ru.md b/docs/src/pages/components/links/links-ru.md
index 47ea3104fb2e61..a2d3143d8bf323 100644
--- a/docs/src/pages/components/links/links-ru.md
+++ b/docs/src/pages/components/links/links-ru.md
@@ -25,7 +25,7 @@ However, the Link component has different default properties than the Typography
{{"demo": "pages/components/links/ButtonLink.js"}}
-## Security
+## Безопасность
When you use `target="_blank"` with Links, it is [recommended](https://developers.google.com/web/tools/lighthouse/audits/noopener) to always set `rel="noopener"` or `rel="noreferrer"` when linking to third party content.
@@ -38,4 +38,4 @@ One common use case is to perform the navigation on the client only, without doi
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).*
\ No newline at end of file
+*Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in the [component prop guide](/guides/composition/#component-property).*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-zh.md b/docs/src/pages/components/links/links-zh.md
index 9a30e67f9be4d4..88595f36e2541e 100644
--- a/docs/src/pages/components/links/links-zh.md
+++ b/docs/src/pages/components/links/links-zh.md
@@ -38,4 +38,4 @@ When you use `target="_blank"` with Links, it is [recommended](https://developer
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*备注：为防止意外的卸载，创建Link组件是非常有必要的。 您可以在我们的 [组件属性指南](/guides/composition/#component-property)阅读更多相关信息。*
\ No newline at end of file
+*备注：为防止意外的卸载，创建Link组件是非常有必要的。 You can read more about it in the [component prop guide](/guides/composition/#component-property).*
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-aa.md b/docs/src/pages/components/lists/lists-aa.md
index ad93a7625b8656..6beaf546f2af7f 100644
--- a/docs/src/pages/components/lists/lists-aa.md
+++ b/docs/src/pages/components/lists/lists-aa.md
@@ -71,7 +71,7 @@ crwdns90846:0crwdne90846:0
crwdns90850:0crwdne90850:0
-crwdns90852:0crwdne90852:0 crwdns90854:0crwdne90854:0 crwdns90856:0crwdne90856:0
+crwdns101138:0crwdne101138:0 crwdns101140:0crwdne101140:0 crwdns101142:0crwdne101142:0
crwdns90858:0crwdne90858:0
@@ -85,4 +85,4 @@ crwdns90866:0crwdne90866:0 crwdns90868:0crwdne90868:0 crwdns90870:0crwdne90870:0
crwdns90872:0crwdne90872:0
-crwdns90874:0crwdne90874:0 crwdns90876:0crwdne90876:0
\ No newline at end of file
+crwdns101144:0crwdne101144:0 crwdns90876:0crwdne90876:0
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-de.md b/docs/src/pages/components/lists/lists-de.md
index bbf5d44bbd6ec3..9abd1f8d1caa38 100644
--- a/docs/src/pages/components/lists/lists-de.md
+++ b/docs/src/pages/components/lists/lists-de.md
@@ -77,7 +77,7 @@ Der Schalter ist die sekundäre Aktion und ein separates Ziel.
Nach dem Scrollen bleiben angeheftete Kopfzeilen am oberen Bildschirmrand fixiert, bis sie von der nächsten Kopfzeile aus dem Bildschirm gedrückt werden.
-Diese Funktion basiert auf der CSS-Sticky-Positionierung. Leider ist es [ nicht von allen Browsern implementiert](https://caniuse.com/#search=sticky), die wir unterstützt. Wir setzen standardmäßig auf `disableSticky` wenn dies nicht unterstützt wird.
+This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported.
{{"demo": "pages/components/lists/PinnedSubheaderList.js"}}
@@ -91,4 +91,4 @@ Im folgenden Beispiel zeigen wir wie Sie [react-window](https://github.com/bvaug
{{"demo": "pages/components/lists/VirtualizedList.js"}}
-Wir empfehlen die Verwendung von [react-window](https://github.com/bvaughn/react-window) wenn dies möglich ist. Wenn diese Bibliothek Ihren Anwendungsfall nicht abdeckt, sollten Sie [react-virtualized](https://github.com/bvaughn/react-virtualized) und Alternativen wie [react-virtuoso](https://github.com/petyosi/react-virtuoso) in Betracht ziehen.
\ No newline at end of file
+The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. Wenn diese Bibliothek Ihren Anwendungsfall nicht abdeckt, sollten Sie [react-virtualized](https://github.com/bvaughn/react-virtualized) und Alternativen wie [react-virtuoso](https://github.com/petyosi/react-virtuoso) in Betracht ziehen.
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-es.md b/docs/src/pages/components/lists/lists-es.md
index 2a9f587e0466f9..14877058c3bf9d 100644
--- a/docs/src/pages/components/lists/lists-es.md
+++ b/docs/src/pages/components/lists/lists-es.md
@@ -77,7 +77,7 @@ El switch es la acción secundaria y un objetivo separado.
Al desplazarse, los subencabezados permanecen anclados en la parte superior de la pantalla hasta que el siguiente subencabezado los saque de la pantalla.
-Esta característica se basa en el posicionamiento adhesivo CSS. Desafortunadamente, [no está implementado](https://caniuse.com/#search=sticky) por todos los navegadores que soportamos. La propiedad `disableSticky` se aplicará por defecto cuando no sea soportado por el navegador.
+This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported.
{{"demo": "pages/components/lists/PinnedSubheaderList.js"}}
@@ -91,4 +91,4 @@ In the following example, we demonstrate how to use [react-window](https://githu
{{"demo": "pages/components/lists/VirtualizedList.js"}}
-We encourage the use of [react-window](https://github.com/bvaughn/react-window) when possible. If this library doesn't cover your use case, you should consider using [react-virtualized](https://github.com/bvaughn/react-virtualized), then alternatives like [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
+The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. If this library doesn't cover your use case, you should consider using [react-virtualized](https://github.com/bvaughn/react-virtualized), then alternatives like [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-fr.md b/docs/src/pages/components/lists/lists-fr.md
index 3f785789e81757..c12d1e6e5e23a7 100644
--- a/docs/src/pages/components/lists/lists-fr.md
+++ b/docs/src/pages/components/lists/lists-fr.md
@@ -77,7 +77,7 @@ Le commutateur (switch) est l'action secondaire et une cible distincte.
Lors du défilement, les sous-en-têtes restent épinglés en haut de l'écran jusqu'à ce qu'ils soient déplacés en dehors de l'écran par le prochain en-tête.
-Cette fonctionnalité repose sur le positionnement persistant (sticky) de CSS. Malheureusement, cette propriété [n'est pas implémentée](https://caniuse.com/#search=sticky) par tous les navigateurs que nous supportons. Nous avons par défaut désactivé cette fonction à l'aide de `disableSticky` lorsqu'il n'est pas pris en charge.
+This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported.
{{"demo": "pages/components/lists/PinnedSubheaderList.js"}}
@@ -91,4 +91,4 @@ Dans l'exemple suivant, nous montrons comment utiliser [react-virtualized](https
{{"demo": "pages/components/lists/VirtualizedList.js"}}
-We encourage the use of [react-window](https://github.com/bvaughn/react-window) when possible. If this library doesn't cover your use case, you should consider using [react-virtualized](https://github.com/bvaughn/react-virtualized), then alternatives like [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
+The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. If this library doesn't cover your use case, you should consider using [react-virtualized](https://github.com/bvaughn/react-virtualized), then alternatives like [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-ja.md b/docs/src/pages/components/lists/lists-ja.md
index e1b248ec8c5267..69aa9cb879a86d 100644
--- a/docs/src/pages/components/lists/lists-ja.md
+++ b/docs/src/pages/components/lists/lists-ja.md
@@ -77,7 +77,7 @@ Switchは補助的なアクションであり異なるターゲットです。
スクロールする上で、サブヘッダーは次のサブヘッダーによって画面から押し出されるまで画面の上部に固定されたままになります。
-この機能はCSSのSticky positioningに依存しています。 残念ながら、私たちがサポートしている全てのブラウザで[実装されている訳ではありません](https://caniuse.com/#search=sticky)。 サポートされていない場合、デフォルトは `disableSticky` となります。
+This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported.
{{"demo": "pages/components/lists/PinnedSubheaderList.js"}}
@@ -91,4 +91,4 @@ Switchは補助的なアクションであり異なるターゲットです。
{{"demo": "pages/components/lists/VirtualizedList.js"}}
-可能であれば、 [react-window](https://github.com/bvaughn/react-window) の使用をお勧めします。 このライブラリがあなたのユースケースをカバーしていない場合は、 [react-virtualized](https://github.com/bvaughn/react-virtualized)、次に [react-virtuoso](https://github.com/petyosi/react-virtuoso)ような代替を使用することを検討する必要があります。
\ No newline at end of file
+The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. このライブラリがあなたのユースケースをカバーしていない場合は、 [react-virtualized](https://github.com/bvaughn/react-virtualized)、次に [react-virtuoso](https://github.com/petyosi/react-virtuoso)ような代替を使用することを検討する必要があります。
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-pt.md b/docs/src/pages/components/lists/lists-pt.md
index ba2482a79681e9..3aaf2d44e5cc36 100644
--- a/docs/src/pages/components/lists/lists-pt.md
+++ b/docs/src/pages/components/lists/lists-pt.md
@@ -77,7 +77,7 @@ O seletor é uma ação secundária, sem interferir com o estado do item da list
Após a rolagem, os subtítulos permanecem fixos na parte superior da tela até serem empurrados para fora da tela pelo próximo subtítulo.
-Este recurso está dependendo do posicionamento de sticky CSS. Infelizmente este recurso [não foi implementado](https://caniuse.com/#search=sticky) por todos os navegadores que suportamos. Colocamos como padrão `disableSticky` quando não é suportado.
+This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported.
{{"demo": "pages/components/lists/PinnedSubheaderList.js"}}
@@ -91,4 +91,4 @@ No exemplo a seguir, nós demonstramos como usar [react-window](https://github.c
{{"demo": "pages/components/lists/VirtualizedList.js"}}
-Nós recomendamos o uso de [react-window](https://github.com/bvaughn/react-window) quando possível. Se no seu caso esta biblioteca não resolver, você deve considerar o uso de [react-virtualized](https://github.com/bvaughn/react-virtualized), e em seguida, como alternativa [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
+The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. Se no seu caso esta biblioteca não resolver, você deve considerar o uso de [react-virtualized](https://github.com/bvaughn/react-virtualized), e em seguida, como alternativa [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-ru.md b/docs/src/pages/components/lists/lists-ru.md
index e12e737e71914c..be164d34dafdcd 100644
--- a/docs/src/pages/components/lists/lists-ru.md
+++ b/docs/src/pages/components/lists/lists-ru.md
@@ -77,7 +77,7 @@ Switch является второстепенным действием.
При прокрутке подзаголовки остаются закрепленными в верхней части экрана, пока следующий подзаголовок не оттеснит предыдущий.
-Эта функция опирается на фиксированное позиционирование CSS. К сожалению эта функциональность, [не реализована](https://caniuse.com/#search=sticky) всеми браузерами, которые мы поддерживаем. Мы по умолчанию выключаем закрепление - `disableSticky` когда оно не поддерживается.
+This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported.
{{"demo": "pages/components/lists/PinnedSubheaderList.js"}}
@@ -91,4 +91,4 @@ In the following example, we demonstrate how to use [react-window](https://githu
{{"demo": "pages/components/lists/VirtualizedList.js"}}
-We encourage the use of [react-window](https://github.com/bvaughn/react-window) when possible. If this library doesn't cover your use case, you should consider using [react-virtualized](https://github.com/bvaughn/react-virtualized), then alternatives like [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
+The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. If this library doesn't cover your use case, you should consider using [react-virtualized](https://github.com/bvaughn/react-virtualized), then alternatives like [react-virtuoso](https://github.com/petyosi/react-virtuoso).
\ No newline at end of file
diff --git a/docs/src/pages/components/lists/lists-zh.md b/docs/src/pages/components/lists/lists-zh.md
index 75dde3fc0f0150..e03a5805d3e783 100644
--- a/docs/src/pages/components/lists/lists-zh.md
+++ b/docs/src/pages/components/lists/lists-zh.md
@@ -77,7 +77,7 @@ The checkbox is the primary action and the state indicator for the list item. Th
在滚动列表时，子标题保持固定在屏幕的顶端，直到被下一个子标题推离屏幕。
-此功能依赖于 CSS sticky 定位。 可惜, 这一功能并未在我们支持的所有浏览器中 [实现](https://caniuse.com/#search=sticky) 。 如果不支持, 则默认为 `disableSticky`。
+This feature relies on CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the supported browsers. It defaults to `disableSticky` when not supported.
{{"demo": "pages/components/lists/PinnedSubheaderList.js"}
@@ -91,4 +91,4 @@ The checkbox is the primary action and the state indicator for the list item. Th
{{"demo": "pages/components/lists/VirtualizedList.js"}}
-我们鼓励尽可能使用 [react-window](https://github.com/bvaughn/react-window)。 如果这个库不包括你的用例，你应该考虑使用 [react-virtualized](https://github.com/bvaughn/react-virtualized)，然后使用 [react-virtuoso](https://github.com/petyosi/react-virtuoso)等替代品。
\ No newline at end of file
+The use of [react-window](https://github.com/bvaughn/react-window) when possible is encouraged. 如果这个库不包括你的用例，你应该考虑使用 [react-virtualized](https://github.com/bvaughn/react-virtualized)，然后使用 [react-virtuoso](https://github.com/petyosi/react-virtuoso)等替代品。
\ No newline at end of file
diff --git a/docs/src/pages/components/material-icons/material-icons-pt.md b/docs/src/pages/components/material-icons/material-icons-pt.md
index d2b9dbd75efe38..ceb5cca51c60a4 100644
--- a/docs/src/pages/components/material-icons/material-icons-pt.md
+++ b/docs/src/pages/components/material-icons/material-icons-pt.md
@@ -1,12 +1,12 @@
---
-title: Material Icons
+title: Ícones Material
components: Icon, SvgIcon
---
-# Material Icons
+# Ícones Material
-<p class="description">1,000+ React Material icons ready to use from the official website.</p>
+<p class="description">Mais de 1.000 ícones React, oficiais do Material e prontos para uso.</p>
-The following npm package, [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons), includes the 1,000+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to [`SvgIcon`](/api/svg-icon/) components.
+O pacote npm a seguir, [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons), inclui os mais de 1,000 [Ícones Material](https://material.io/tools/icons/?style=baseline) oficiais, convertidos para componentes [`SvgIcon`](/api/svg-icon/).
{{"demo": "pages/components/material-icons/SearchIcons.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/components/menus/menus-de.md b/docs/src/pages/components/menus/menus-de.md
index 41b7c2ceb7206e..c8ecccabccffce 100644
--- a/docs/src/pages/components/menus/menus-de.md
+++ b/docs/src/pages/components/menus/menus-de.md
@@ -35,7 +35,7 @@ Die Hauptaufgabe der `MenuList` Komponente besteht darin, den Fokus festzulegen.
## Menüs anpassen
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
diff --git a/docs/src/pages/components/menus/menus-ja.md b/docs/src/pages/components/menus/menus-ja.md
index a0bde689e46de4..c381bb1b7b68f3 100644
--- a/docs/src/pages/components/menus/menus-ja.md
+++ b/docs/src/pages/components/menus/menus-ja.md
@@ -35,7 +35,7 @@ The primary responsibility of the `MenuList` component is to handle the focus.
## Customized menus
-コンポーネントのカスタマイズ例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
diff --git a/docs/src/pages/components/menus/menus-zh.md b/docs/src/pages/components/menus/menus-zh.md
index f7e85e5ffee68e..6c67f2a542022e 100644
--- a/docs/src/pages/components/menus/menus-zh.md
+++ b/docs/src/pages/components/menus/menus-zh.md
@@ -35,7 +35,7 @@ A [Menu](https://material.io/design/components/menus.html) displays a list of ch
## 自定义菜单
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
diff --git a/docs/src/pages/components/modal/modal-aa.md b/docs/src/pages/components/modal/modal-aa.md
index 9045886b9ca3f3..0d7737ed0ccf4d 100644
--- a/docs/src/pages/components/modal/modal-aa.md
+++ b/docs/src/pages/components/modal/modal-aa.md
@@ -48,36 +48,18 @@ crwdns100484:0crwdne100484:0
crwdns100486:0crwdne100486:0
-## crwdns100488:0crwdne100488:0
-
-crwdns100490:0crwdne100490:0 crwdns100492:0crwdne100492:0
-
-crwdns100494:0crwdne100494:0 crwdns100496:0crwdne100496:0
-
-```jsx
-crwdns100498:0{false}crwdnd100498:0{row.id}crwdnd100498:0{row.name}crwdnd100498:0{row.calories}crwdnd100498:0{row.fat}crwdne100498:0
-```
-
-crwdns100500:0crwdne100500:0 crwdns100502:0crwdne100502:0 crwdns100504:0crwdne100504:0
-
-```jsx
-crwdns91044:0{false}crwdne91044:0
-```
-
-crwdns100506:0crwdne100506:0 crwdns100508:0crwdne100508:0
-
-## crwdns100510:0crwdne100510:0
+## crwdns100776:0crwdne100776:0
- crwdns100512:0crwdne100512:0 crwdns100514:0crwdne100514:0
```jsx
-crwdns91056:0crwdne91056:0
+crwdns100778:0crwdne100778:0
```
- crwdns100516:0crwdne100516:0
-## crwdns100518:0crwdne100518:0
+## crwdns100780:0crwdne100780:0
-crwdns100520:0crwdne100520:0 crwdns100522:0crwdne100522:0
+crwdns100782:0crwdne100782:0 crwdns100784:0crwdne100784:0
-crwdns100524:0crwdne100524:0
\ No newline at end of file
+crwdns100786:0crwdne100786:0
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-de.md b/docs/src/pages/components/modal/modal-de.md
index ad5ab473d81004..52034dc8c870d7 100644
--- a/docs/src/pages/components/modal/modal-de.md
+++ b/docs/src/pages/components/modal/modal-de.md
@@ -48,47 +48,6 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
{{"demo": "pages/components/modal/SpringModal.js"}}
-## Performance
-
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-
-However, creating React elements has a cost too. Consider the following case:
-
-```jsx
-<Modal open={false}>
- <table>
- <thead>
- <tr>
- <td>Dessert (100g serving)</td>
- <td>Calories</td>
- <td>Fat (g)</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => (
- <tr key={row.id}>
- <th scope="row">
- {row.name}
- </th>
- <td>{row.calories}</td>
- <td>{row.fat}</TableCell>
- </tr>
- ))}
- </tbody>
- </table>
-</Modal>
-```
-
-We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
-
-```jsx
-<Modal open={false}>
- <TableComponent />
-</Modal>
-```
-
-This way, you take advantage of [React render laziness evaluation](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation). The `TableComponent` render method will only be evaluated when opening the modal.
-
## Barrierefreiheit
- Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`. Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
diff --git a/docs/src/pages/components/modal/modal-es.md b/docs/src/pages/components/modal/modal-es.md
index 1f33a422c3f025..339dd9d1b2ae45 100644
--- a/docs/src/pages/components/modal/modal-es.md
+++ b/docs/src/pages/components/modal/modal-es.md
@@ -48,47 +48,6 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
{{"demo": "pages/components/modal/SpringModal.js"}}
-## Rendimiento
-
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-
-However, creating React elements has a cost too. Consider the following case:
-
-```jsx
-<Modal open={false}>
- <table>
- <thead>
- <tr>
- <td>Dessert (100g serving)</td>
- <td>Calories</td>
- <td>Fat (g)</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => (
- <tr key={row.id}>
- <th scope="row">
- {row.name}
- </th>
- <td>{row.calories}</td>
- <td>{row.fat}</TableCell>
- </tr>
- ))}
- </tbody>
- </table>
-</Modal>
-```
-
-We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
-
-```jsx
-<Modal open={false}>
- <TableComponent />
-</Modal>
-```
-
-This way, you take advantage of [React render laziness evaluation](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation). The `TableComponent` render method will only be evaluated when opening the modal.
-
## Accesibilidad
- Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`. Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
diff --git a/docs/src/pages/components/modal/modal-fr.md b/docs/src/pages/components/modal/modal-fr.md
index bf94a5a779d663..1f01247f29fb22 100644
--- a/docs/src/pages/components/modal/modal-fr.md
+++ b/docs/src/pages/components/modal/modal-fr.md
@@ -48,47 +48,6 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
{{"demo": "pages/components/modal/SpringModal.js"}}
-## Performances
-
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-
-However, creating React elements has a cost too. Consider the following case:
-
-```jsx
-<Modal open={false}>
- <table>
- <thead>
- <tr>
- <td>Dessert (100g serving)</td>
- <td>Calories</td>
- <td>Fat (g)</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => (
- <tr key={row.id}>
- <th scope="row">
- {row.name}
- </th>
- <td>{row.calories}</td>
- <td>{row.fat}</TableCell>
- </tr>
- ))}
- </tbody>
- </table>
-</Modal>
-```
-
-We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
-
-```jsx
-<Modal open={false}>
- <TableComponent />
-</Modal>
-```
-
-This way, you take advantage of [React render laziness evaluation](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation). The `TableComponent` render method will only be evaluated when opening the modal.
-
## Accessibilité
- Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`. Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
diff --git a/docs/src/pages/components/modal/modal-ja.md b/docs/src/pages/components/modal/modal-ja.md
index 31aefd7ed59a42..25cc0e5a6031c1 100644
--- a/docs/src/pages/components/modal/modal-ja.md
+++ b/docs/src/pages/components/modal/modal-ja.md
@@ -31,7 +31,7 @@ components: Modal
`アウトライン：0` CSSプロパティでアウトライン（多くの場合、青または金）を無効にできることに注意してください。
-## Transições
+## トランジション
The open/close state of the modal can be animated with a transition component. This component should respect the following conditions:
@@ -48,47 +48,6 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
{{"demo": "pages/components/modal/SpringModal.js"}}
-## パフォーマンス
-
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-
-However, creating React elements has a cost too. Consider the following case:
-
-```jsx
-<Modal open={false}>
- <table>
- <thead>
- <tr>
- <td>Dessert (100g serving)</td>
- <td>Calories</td>
- <td>Fat (g)</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => (
- <tr key={row.id}>
- <th scope="row">
- {row.name}
- </th>
- <td>{row.calories}</td>
- <td>{row.fat}</TableCell>
- </tr>
- ))}
- </tbody>
- </table>
-</Modal>
-```
-
-We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
-
-```jsx
-<Modal open={false}>
- <TableComponent />
-</Modal>
-```
-
-This way, you take advantage of [React render laziness evaluation](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation). The `TableComponent` render method will only be evaluated when opening the modal.
-
## アクセシビリティ
- Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`. Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
@@ -111,6 +70,6 @@ This way, you take advantage of [React render laziness evaluation](https://overr
## Server-side modal
-React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to see the modal, you need to disable the portal feature with the `disablePortal` prop:
+React は、サーバー上の [`createPortal（）`](https://reactjs.org/docs/portals.html) APIを[サポートしません。](https://github.com/facebook/react/issues/13097) モーダルを表示するには、 `disablePortal` propを使用してポータル機能を無効にする必要があります。
{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-pt.md b/docs/src/pages/components/modal/modal-pt.md
index f23d799a4b0947..93ab231c8f928d 100644
--- a/docs/src/pages/components/modal/modal-pt.md
+++ b/docs/src/pages/components/modal/modal-pt.md
@@ -48,61 +48,20 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
{{"demo": "pages/components/modal/SpringModal.js"}}
-## Performance
-
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-
-However, creating React elements has a cost too. Consider the following case:
-
-```jsx
-<Modal open={false}>
- <table>
- <thead>
- <tr>
- <td>Dessert (100g serving)</td>
- <td>Calories</td>
- <td>Fat (g)</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => (
- <tr key={row.id}>
- <th scope="row">
- {row.name}
- </th>
- <td>{row.calories}</td>
- <td>{row.fat}</TableCell>
- </tr>
- ))}
- </tbody>
- </table>
-</Modal>
-```
-
-We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
-
-```jsx
-<Modal open={false}>
- <TableComponent />
-</Modal>
-```
-
-This way, you take advantage of [React render laziness evaluation](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation). The `TableComponent` render method will only be evaluated when opening the modal.
-
## Acessibilidade
- Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`. Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
```jsx
<Modal
- aria-labelledby="modal-titulo"
- aria-describedby="modal-descricao"
+ aria-labelledby="modal-title"
+ aria-describedby="modal-description"
>
- <h2 id="modal-titulo">
- Meu Título
+ <h2 id="modal-title">
+ My Title
</h2>
- <p id="modal-descricao">
- Minha Descrição
+ <p id="modal-description">
+ My Description
</p>
</Modal>
```
diff --git a/docs/src/pages/components/modal/modal-ru.md b/docs/src/pages/components/modal/modal-ru.md
index d9a4051377e9d4..ae58a03c4b5759 100644
--- a/docs/src/pages/components/modal/modal-ru.md
+++ b/docs/src/pages/components/modal/modal-ru.md
@@ -48,47 +48,6 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
{{"demo": "pages/components/modal/SpringModal.js"}}
-## Производительность
-
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-
-However, creating React elements has a cost too. Consider the following case:
-
-```jsx
-<Modal open={false}>
- <table>
- <thead>
- <tr>
- <td>Dessert (100g serving)</td>
- <td>Calories</td>
- <td>Fat (g)</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => (
- <tr key={row.id}>
- <th scope="row">
- {row.name}
- </th>
- <td>{row.calories}</td>
- <td>{row.fat}</TableCell>
- </tr>
- ))}
- </tbody>
- </table>
-</Modal>
-```
-
-We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
-
-```jsx
-<Modal open={false}>
- <TableComponent />
-</Modal>
-```
-
-This way, you take advantage of [React render laziness evaluation](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation). The `TableComponent` render method will only be evaluated when opening the modal.
-
## Доступность
- Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`. Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
diff --git a/docs/src/pages/components/modal/modal-zh.md b/docs/src/pages/components/modal/modal-zh.md
index 8b33453196f24c..ede2356648cf5c 100644
--- a/docs/src/pages/components/modal/modal-zh.md
+++ b/docs/src/pages/components/modal/modal-zh.md
@@ -48,47 +48,6 @@ Alternatively, you can use [react-spring](https://github.com/react-spring/react-
{{"demo": "pages/components/modal/SpringModal.js"}}
-## 性能
-
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-
-However, creating React elements has a cost too. Consider the following case:
-
-```jsx
-<Modal open={false}>
- <table>
- <thead>
- <tr>
- <td>Dessert (100g serving)</td>
- <td>Calories</td>
- <td>Fat (g)</td>
- </tr>
- </thead>
- <tbody>
- {rows.map(row => (
- <tr key={row.id}>
- <th scope="row">
- {row.name}
- </th>
- <td>{row.calories}</td>
- <td>{row.fat}</TableCell>
- </tr>
- ))}
- </tbody>
- </table>
-</Modal>
-```
-
-We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
-
-```jsx
-<Modal open={false}>
- <TableComponent />
-</Modal>
-```
-
-This way, you take advantage of [React render laziness evaluation](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation). The `TableComponent` render method will only be evaluated when opening the modal.
-
## 可及性
- Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Modal`. Additionally, you may give a description of your modal with the `aria-describedby="id..."` prop on the `Modal`.
diff --git a/docs/src/pages/components/pickers/pickers-aa.md b/docs/src/pages/components/pickers/pickers-aa.md
index e7498c6d1d99b5..89c456551c572f 100644
--- a/docs/src/pages/components/pickers/pickers-aa.md
+++ b/docs/src/pages/components/pickers/pickers-aa.md
@@ -3,7 +3,7 @@ title: crwdns91118:0crwdne91118:0
components: crwdns91120:0crwdne91120:0
---
-# crwdns91122:0crwdne91122:0
+# crwdns100752:0crwdne100752:0
<p class="description">crwdns91124:0crwdne91124:0</p>
diff --git a/docs/src/pages/components/pickers/pickers-de.md b/docs/src/pages/components/pickers/pickers-de.md
index ba42c7a9b10fae..f336ac05e434f2 100644
--- a/docs/src/pages/components/pickers/pickers-de.md
+++ b/docs/src/pages/components/pickers/pickers-de.md
@@ -3,7 +3,7 @@ title: Date picker, Time picker React components
components: TextField
---
-# Date/Time pickers
+# Date / Time pickers
<p class="description">Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.</p>
diff --git a/docs/src/pages/components/pickers/pickers-es.md b/docs/src/pages/components/pickers/pickers-es.md
index 057952b79e4c65..a981a3f1c10b55 100644
--- a/docs/src/pages/components/pickers/pickers-es.md
+++ b/docs/src/pages/components/pickers/pickers-es.md
@@ -3,7 +3,7 @@ title: Date picker, Time picker React components
components: TextField
---
-# Date/Time pickers
+# Date / Time pickers
<p class="description">Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.</p>
diff --git a/docs/src/pages/components/pickers/pickers-fr.md b/docs/src/pages/components/pickers/pickers-fr.md
index 628222bcd54905..3742609a150293 100644
--- a/docs/src/pages/components/pickers/pickers-fr.md
+++ b/docs/src/pages/components/pickers/pickers-fr.md
@@ -3,7 +3,7 @@ title: Date picker, Time picker React components
components: TextField
---
-# Date/Time pickers
+# Date / Time pickers
<p class="description">Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.</p>
diff --git a/docs/src/pages/components/pickers/pickers-ja.md b/docs/src/pages/components/pickers/pickers-ja.md
index 2d78d4122834d6..51b71e8c6496de 100644
--- a/docs/src/pages/components/pickers/pickers-ja.md
+++ b/docs/src/pages/components/pickers/pickers-ja.md
@@ -3,7 +3,7 @@ title: Date picker, Time picker React components
components: TextField
---
-# Date/Time ピッカー
+# Date / Time pickers
<p class="description">Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.</p>
@@ -22,19 +22,19 @@ components: TextField
⚠ブラウザーによるネイティブ入力コントロールのサポート [は完全ではありません](https://caniuse.com/#feat=input-datetime)。 より充実したソリューションについては、 [@ material-ui / pickers](#material-ui-pickers) をご覧ください。
-### Datepickers
+### 日付ピッカー（Datepickers）
A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
-### Date & Time pickers
+### 日付＆時間ピッカー（Date & Time pickers）
`type="datetime-local"`を指定したネイティブの日付 & 時刻ピッカーの例。
{{"demo": "pages/components/pickers/DateAndTimePickers.js"}}
-### Time pickers
+### 時間ピッカー（Time pickers）
`type="time"`を指定したネイティブの時間ピッカーの例。
diff --git a/docs/src/pages/components/pickers/pickers-pt.md b/docs/src/pages/components/pickers/pickers-pt.md
index 51e2f5567abb7e..3ec2c885d8eff7 100644
--- a/docs/src/pages/components/pickers/pickers-pt.md
+++ b/docs/src/pages/components/pickers/pickers-pt.md
@@ -3,7 +3,7 @@ title: Componentes React para Seletor de Data e Seletor de Hora
components: TextField
---
-# Seletores de Data/Hora
+# Seletores Data / Hora
<p class="description">Seletores de datas e seletores de hora fornecem uma maneira simples de selecionar um único valor de um conjunto pré-determinado.</p>
diff --git a/docs/src/pages/components/pickers/pickers-ru.md b/docs/src/pages/components/pickers/pickers-ru.md
index 3be10da7962fa5..df3e440c3ebfda 100644
--- a/docs/src/pages/components/pickers/pickers-ru.md
+++ b/docs/src/pages/components/pickers/pickers-ru.md
@@ -3,7 +3,7 @@ title: Date picker, Time picker React components
components: TextField
---
-# Date/Time pickers
+# Date / Time pickers
<p class="description">Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.</p>
diff --git a/docs/src/pages/components/pickers/pickers-zh.md b/docs/src/pages/components/pickers/pickers-zh.md
index 4a62864eaf801f..e29ccec22e1348 100644
--- a/docs/src/pages/components/pickers/pickers-zh.md
+++ b/docs/src/pages/components/pickers/pickers-zh.md
@@ -3,7 +3,7 @@ title: Date picker, Time picker React components
components: TextField
---
-# Date/Time pickers
+# Date / Time pickers
<p class="description">Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.</p>
diff --git a/docs/src/pages/components/popover/popover-aa.md b/docs/src/pages/components/popover/popover-aa.md
index 50c69c7377745f..c4e6c62c180780 100644
--- a/docs/src/pages/components/popover/popover-aa.md
+++ b/docs/src/pages/components/popover/popover-aa.md
@@ -24,7 +24,7 @@ crwdns91194:0crwdne91194:0
## crwdns91196:0crwdne91196:0
-crwdns91198:0crwdne91198:0
+crwdns101146:0crwdne101146:0
crwdns91200:0crwdne91200:0
diff --git a/docs/src/pages/components/popover/popover-de.md b/docs/src/pages/components/popover/popover-de.md
index d071d021169d00..c830aa3b4150aa 100644
--- a/docs/src/pages/components/popover/popover-de.md
+++ b/docs/src/pages/components/popover/popover-de.md
@@ -24,7 +24,7 @@ Verwenden Sie die Optionsfelder, um die Positionen des `AnkerOrigin` und des `Tr
## Maus Interaktionen
-Wir zeigen, wie Sie mit der `Popover-Komponente` ein Popover-Verhalten basierend auf dem Mouseover-Ereignis implementieren.
+This demonstrates how to use the `Popover` component to implement a popover behavior based on the mouse over event.
{{"demo": "pages/components/popover/MouseOverPopover.js"}}
diff --git a/docs/src/pages/components/popover/popover-es.md b/docs/src/pages/components/popover/popover-es.md
index 11848cda5b7736..3543e673b4e42f 100644
--- a/docs/src/pages/components/popover/popover-es.md
+++ b/docs/src/pages/components/popover/popover-es.md
@@ -24,7 +24,7 @@ Use the radio buttons to adjust the `anchorOrigin` and `transformOrigin` positio
## Mouse over interaction
-We demonstrate how to use the `Popover` component to implement a popover behavior based on the mouse over event.
+This demonstrates how to use the `Popover` component to implement a popover behavior based on the mouse over event.
{{"demo": "pages/components/popover/MouseOverPopover.js"}}
diff --git a/docs/src/pages/components/popover/popover-fr.md b/docs/src/pages/components/popover/popover-fr.md
index 98179e2bd22118..3f3253ad5c4288 100644
--- a/docs/src/pages/components/popover/popover-fr.md
+++ b/docs/src/pages/components/popover/popover-fr.md
@@ -24,7 +24,7 @@ Use the radio buttons to adjust the `anchorOrigin` and `transformOrigin` positio
## Mouse over interaction
-We demonstrate how to use the `Popover` component to implement a popover behavior based on the mouse over event.
+This demonstrates how to use the `Popover` component to implement a popover behavior based on the mouse over event.
{{"demo": "pages/components/popover/MouseOverPopover.js"}}
diff --git a/docs/src/pages/components/popover/popover-ja.md b/docs/src/pages/components/popover/popover-ja.md
index 76dc7e9058b3ee..519001e8c0d06a 100644
--- a/docs/src/pages/components/popover/popover-ja.md
+++ b/docs/src/pages/components/popover/popover-ja.md
@@ -24,7 +24,7 @@ components: Grow, Popover
## マウスオーバー操作
-`ポップオーバー` コンポーネントを使用して、マウスオーバーイベントに基づいてポップオーバー動作を実装する方法を示します。
+This demonstrates how to use the `Popover` component to implement a popover behavior based on the mouse over event.
{{"demo": "pages/components/popover/MouseOverPopover.js"}}
diff --git a/docs/src/pages/components/popover/popover-pt.md b/docs/src/pages/components/popover/popover-pt.md
index f5d3e42d8dbf32..41b38ab4d16839 100644
--- a/docs/src/pages/components/popover/popover-pt.md
+++ b/docs/src/pages/components/popover/popover-pt.md
@@ -24,7 +24,7 @@ Use os botões de opção para ajustar as posições `anchorOrigin` e `transform
## Interação sobre o mouse
-Demonstraremos como usar o componente `Popover` para implementar um comportamento popover baseado no evento mouse over.
+This demonstrates how to use the `Popover` component to implement a popover behavior based on the mouse over event.
{{"demo": "pages/components/popover/MouseOverPopover.js"}}
diff --git a/docs/src/pages/components/popover/popover-ru.md b/docs/src/pages/components/popover/popover-ru.md
index 18fa17b1cc851c..6ed967d2f99603 100644
--- a/docs/src/pages/components/popover/popover-ru.md
+++ b/docs/src/pages/components/popover/popover-ru.md
@@ -24,7 +24,7 @@ Use the radio buttons to adjust the `anchorOrigin` and `transformOrigin` positio
## Mouse over interaction
-We demonstrate how to use the `Popover` component to implement a popover behavior based on the mouse over event.
+This demonstrates how to use the `Popover` component to implement a popover behavior based on the mouse over event.
{{"demo": "pages/components/popover/MouseOverPopover.js"}}
diff --git a/docs/src/pages/components/popover/popover-zh.md b/docs/src/pages/components/popover/popover-zh.md
index 4351f86b63f9ac..8c4e84339925b3 100644
--- a/docs/src/pages/components/popover/popover-zh.md
+++ b/docs/src/pages/components/popover/popover-zh.md
@@ -24,7 +24,7 @@ components: Grow, Popover
## 鼠标悬停在互动上
-我们演示了如何使用 `Popover` 组件来实现基于鼠标悬停事件的弹出行为。
+This demonstrates how to use the `Popover` component to implement a popover behavior based on the mouse over event.
{{"demo": "pages/components/popover/MouseOverPopover.js"}}
diff --git a/docs/src/pages/components/progress/progress-de.md b/docs/src/pages/components/progress/progress-de.md
index e38d3f056dcc44..8a195dbef1f414 100644
--- a/docs/src/pages/components/progress/progress-de.md
+++ b/docs/src/pages/components/progress/progress-de.md
@@ -83,7 +83,7 @@ function Progress(props) {
## Individueller Fortschritt
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Here are some examples of customizing the component. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
diff --git a/docs/src/pages/components/progress/progress-ja.md b/docs/src/pages/components/progress/progress-ja.md
index bcf997ad0a7595..6c6bd7ada7d24c 100644
--- a/docs/src/pages/components/progress/progress-ja.md
+++ b/docs/src/pages/components/progress/progress-ja.md
@@ -83,7 +83,7 @@ function Progress(props) {
## カスタマイズされた進行状況バー
-コンポーネントのカスタマイズの例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
diff --git a/docs/src/pages/components/progress/progress-zh.md b/docs/src/pages/components/progress/progress-zh.md
index 7670d4545e173e..73a078dc0f42c9 100644
--- a/docs/src/pages/components/progress/progress-zh.md
+++ b/docs/src/pages/components/progress/progress-zh.md
@@ -83,7 +83,7 @@ function Progress(props) {
## 自定义进度条
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-aa.md b/docs/src/pages/components/radio-buttons/radio-buttons-aa.md
index de9a13289f15bf..7695b6ef765d55 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-aa.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-aa.md
@@ -27,16 +27,22 @@ crwdns91452:0crwdne91452:0
crwdns91454:0crwdne91454:0
-## crwdns91456:0crwdne91456:0
+## crwdns100844:0crwdne100844:0
-crwdns91458:0crwdne91458:0 crwdns91460:0crwdne91460:0
+crwdns100846:0crwdne100846:0 crwdns100848:0crwdne100848:0
-crwdns91462:0crwdne91462:0 crwdns91464:0crwdne91464:0
+crwdns100850:0crwdne100850:0
+
+## crwdns100852:0crwdne100852:0
+
+crwdns100854:0crwdne100854:0 crwdns100856:0crwdne100856:0
+
+crwdns100858:0crwdne100858:0 crwdns100860:0crwdne100860:0
```jsx
crwdns91466:0{{ 'aria-label': 'Radio A' }}crwdne91466:0
```
-## crwdns91468:0crwdne91468:0
+## crwdns100862:0crwdne100862:0
- [crwdns91472:0crwdne91472:0 crwdns91474:0crwdne91474:0](crwdns91470:0crwdne91470:0)
\ No newline at end of file
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-de.md b/docs/src/pages/components/radio-buttons/radio-buttons-de.md
index 24b18063dd662a..15b7c7f81429e6 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-de.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-de.md
@@ -27,6 +27,12 @@ Sie können die Platzierung des Etiketts ändern:
{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+## Customized radios
+
+Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
+
+{{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
+
## Barrierefreiheit
Alle Formularsteuerelemente sollten Beschriftungen haben. Dazu gehören Optionsfelder, Kontrollkästchen und Schalter. In den meisten Fällen wird dazu das Element `<label>` ([FormControlLabel](/api/form-control-label/)) verwendet.
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-es.md b/docs/src/pages/components/radio-buttons/radio-buttons-es.md
index 8ad229331aeaa0..fd713286987354 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-es.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-es.md
@@ -27,6 +27,12 @@ Puede cambiar la ubicación de la etiqueta:
{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+## Customized radios
+
+Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+
+{{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
+
## Accesibilidad
Todos los controles de formulario deben tener etiquetas, y esto incluye radio buttons, checkboxes, and switches. En la mayoría de los casos, esto se hace usando el elemento `<label>` ([FormControlLabel](/api/form-control-label/)).
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md
index 24cb70a067b643..2b781c5d0db9ae 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md
@@ -27,6 +27,12 @@ Vous pouvez changer l'emplacement du label:
{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+## Customized radios
+
+Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/).
+
+{{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
+
## Accessibilité
Tous les contrôles de formulaire doivent avoir des labels, cela vaut également pour les boutons radio, les cases à cocher et les interrupteurs. Dans la plupart des cas, cela se fait en utilisant l'élément `<label>` ([FormControlLabel](/api/form-control-label/)).
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md
index db51de7fcf82b1..0f58781344665e 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md
@@ -27,6 +27,12 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel
{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+## Customized radios
+
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
+
+{{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
+
## アクセシビリティ
ラジオボタン、チェックボックス、スイッチなどのすべてのフォームコントロールにラベルを付ける必要があります。 ほとんどの場合、 `<label>` 要素（[FormControlLabel](/api/form-control-label/)）を使用して行われます。
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md
index 633a3dc2763bbd..b6353e645594f1 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md
@@ -27,11 +27,17 @@ Você pode alterar o posicionamento do rótulo:
{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+## Customized radios
+
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
+
+{{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
+
## Acessibilidade
-Todos os controles de formulário devem ter rótulos, e isso inclui os botões de opção, caixas de seleção e seletores. Na maioria dos casos, isso é feito usando `<label>` ([FormControlLabel](/api/form-control-label/)).
+Todos os controles de formulário devem ter rótulos, e isso inclui os botões de opção, caixas de seleção e seletores. Na maioria dos casos, isso é feito usando o elemento `<label>` ([FormControlLabel](/api/form-control-label/)).
-Quando uma label não pode ser usada, é necessário adicionar um atributo diretamente no componente de input. Nesse caso você pode aplicar um atributo adicional (e.g.`aria-label`,`aria-labelledby`, `title`) através do `inputProps`.
+Quando um rótulo não pode ser usado, é necessário adicionar um atributo diretamente no componente de entrada. Nesse caso você pode aplicar um atributo adicional (e.g.`aria-label`,`aria-labelledby`, `title`) através da propriedade `inputProps`.
```jsx
<RadioButton
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md
index abfada9016326d..f1b51c30f9339e 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md
@@ -27,6 +27,12 @@ Use [radio buttons](https://material.io/design/components/selection-controls.htm
{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+## Customized radios
+
+Ниже находится пример кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/).
+
+{{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
+
## Доступность
Все элементы формы должны иметь метки, в том числе радиокнопки, переключатели и чекбоксы. В большинстве случаев это делается с помощью элемента `<label>` ([FormControlLabel](/api/form-control-label/)).
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md
index 4d79b91e6b66d6..734bb751f499ca 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md
@@ -27,11 +27,17 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel
{{"demo": "pages/components/radio-buttons/FormControlLabelPosition.js"}}
+## Customized radios
+
+以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
+
+{{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}}
+
## 可及性
所有表单控件都应该带有标签，而这包括了单选按钮，复选框和开关。 在大多数情况下，这是通过使用一个 `<label>` 元素（[FormControlLabel](/api/form-control-label/)）实现的。
-如果无法使用标签，则必须直接在输入组件中添加属性。 在这种情况下，您可以经由 `inputProps` 属性，来附着一些额外的属性（例如 `arial-label`，`aria-labelledby`，`title`）。
+如果无法使用标签，则必须直接在输入组件中添加属性。 在这种情况下，可以应用附加的属性（例如 `arial-label`， `aria-labelledby`， `title`）经由 `inputProps` 属性。
```jsx
<RadioButton
diff --git a/docs/src/pages/components/rating/rating-aa.md b/docs/src/pages/components/rating/rating-aa.md
index 7a369fc9878f89..eaae8b9daa206d 100644
--- a/docs/src/pages/components/rating/rating-aa.md
+++ b/docs/src/pages/components/rating/rating-aa.md
@@ -7,8 +7,6 @@ components: crwdns91478:0crwdne91478:0
<p class="description">crwdns91482:0crwdne91482:0 crwdns91484:0crwdne91484:0</p>
-- crwdns91486:0crwdne91486:0
-
## crwdns91488:0crwdne91488:0
crwdns91490:0crwdne91490:0
@@ -41,5 +39,5 @@ crwdns91522:0crwdne91522:0
crwdns91526:0crwdne91526:0
-- crwdns91528:0crwdne91528:0 crwdns91530:0crwdne91530:0 crwdns91532:0crwdne91532:0
-- crwdns91534:0crwdne91534:0
\ No newline at end of file
+- crwdns100864:0crwdne100864:0 crwdns100866:0crwdne100866:0 crwdns100868:0crwdne100868:0
+- crwdns100870:0crwdne100870:0
\ No newline at end of file
diff --git a/docs/src/pages/components/rating/rating-de.md b/docs/src/pages/components/rating/rating-de.md
index ef62bdd25cdcfd..c542c9c3e45804 100644
--- a/docs/src/pages/components/rating/rating-de.md
+++ b/docs/src/pages/components/rating/rating-de.md
@@ -7,8 +7,6 @@ components: Rating
<p class="description">Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.</p>
-- 📦 [20 kB gzipped](/size-snapshot) (but only 6 kB without @material-ui/styles).
-
## Simple ratings
{{"demo": "pages/components/rating/SimpleRating.js"}}
diff --git a/docs/src/pages/components/rating/rating-es.md b/docs/src/pages/components/rating/rating-es.md
index 596e2d0ec27224..e7a7b40d17bfec 100644
--- a/docs/src/pages/components/rating/rating-es.md
+++ b/docs/src/pages/components/rating/rating-es.md
@@ -7,8 +7,6 @@ components: Rating
<p class="description">Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.</p>
-- 📦 [20 kB gzipped](/size-snapshot) (but only 6 kB without @material-ui/styles).
-
## Simple ratings
{{"demo": "pages/components/rating/SimpleRating.js"}}
diff --git a/docs/src/pages/components/rating/rating-fr.md b/docs/src/pages/components/rating/rating-fr.md
index 5d40e0aaaccb06..1eb7278d2ae364 100644
--- a/docs/src/pages/components/rating/rating-fr.md
+++ b/docs/src/pages/components/rating/rating-fr.md
@@ -7,8 +7,6 @@ components: Rating
<p class="description">Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.</p>
-- 📦 [20 kB gzipped](/size-snapshot) (but only 6 kB without @material-ui/styles).
-
## Simple ratings
{{"demo": "pages/components/rating/SimpleRating.js"}}
diff --git a/docs/src/pages/components/rating/rating-ja.md b/docs/src/pages/components/rating/rating-ja.md
index adcbdf159ffe7d..bd7d50b33bbd68 100644
--- a/docs/src/pages/components/rating/rating-ja.md
+++ b/docs/src/pages/components/rating/rating-ja.md
@@ -1,14 +1,12 @@
---
title: Rating React component
-components: Rating
+components: レート
---
-# レート
+# レート （Rating）
<p class="description">評価は、他の人の意見や製品に関する経験に関する洞察を提供します。 ユーザーは購入した製品を評価することもできます。</p>
-- 📦 [20 kB gzipped](/size-snapshot) (but only 6 kB without @material-ui/styles).
-
## 簡単な評価
{{"demo": "pages/components/rating/SimpleRating.js"}}
@@ -41,5 +39,5 @@ components: Rating
このコンポーネントのアクセシビリティは、
-- ラジオグループは、フィールドを視覚的に非表示にして使用されます。 これには6つのラジオボタンがあり、それぞれが星1つ、星が0つ星です。デフォルトではオンになっています。 親フォームに固有の `name` プロパティを指定していることを確認します。
-- ラジオボタンのラベルには実際のテキスト（ "1 Star"、 "2 Stars"、 …）が含まれています。ページの言語が英語でない場合は、必ず `getLabelText` propを指定してください。
\ No newline at end of file
+- A radio group is used with its fields visually hidden. It contains six radio buttons, one for each star and another for 0 stars, which is checked by default. Make sure you are providing a `name` prop that is unique to the parent form.
+- The labels for the radio buttons contain actual text (“1 Star”, “2 Stars”, …), make sure you provide a `getLabelText` prop when the page language is not English.
\ No newline at end of file
diff --git a/docs/src/pages/components/rating/rating-pt.md b/docs/src/pages/components/rating/rating-pt.md
index cdecf59560f0b0..1aed9ac44441b5 100644
--- a/docs/src/pages/components/rating/rating-pt.md
+++ b/docs/src/pages/components/rating/rating-pt.md
@@ -7,8 +7,6 @@ components: Rating
<p class="description">As avaliações fornecem informações sobre opiniões e experiências de outros usuários com um produto. Os usuários também podem avaliar os produtos que compraram.</p>
-- 📦 [20 kB gzipped](/size-snapshot) (mas apenas 6 kB sem @material-ui/styles).
-
## Avaliações simples
{{"demo": "pages/components/rating/SimpleRating.js"}}
@@ -41,5 +39,5 @@ Gosta de avaliações maiores ou menores? Use a propriedade `size`.
A acessibilidade neste componente conta com:
-- Um grupo de botões de opção é usado com seus campos visualmente ocultos. Ele contém seis botões de opção, um para cada estrela e outro para 0 estrelas, que é marcado por padrão. Certifique-se de que você está fornecendo uma propriedade `name`, que é exclusivo para o formulário principal.
-- Os rótulos dos botões de opção contêm o texto atualmente como ("1 Star", "2 Star", …). Certifique-se de fornecer uma propriedade `getLabelText` quando o idioma da página não for o inglês.
\ No newline at end of file
+- A radio group is used with its fields visually hidden. It contains six radio buttons, one for each star and another for 0 stars, which is checked by default. Make sure you are providing a `name` prop that is unique to the parent form.
+- The labels for the radio buttons contain actual text (“1 Star”, “2 Stars”, …), make sure you provide a `getLabelText` prop when the page language is not English.
\ No newline at end of file
diff --git a/docs/src/pages/components/rating/rating-ru.md b/docs/src/pages/components/rating/rating-ru.md
index 33e45d58268e28..992c026d0c5950 100644
--- a/docs/src/pages/components/rating/rating-ru.md
+++ b/docs/src/pages/components/rating/rating-ru.md
@@ -7,8 +7,6 @@ components: Rating
<p class="description">Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.</p>
-- 📦 [20 kB gzipped](/size-snapshot) (but only 6 kB without @material-ui/styles).
-
## Simple ratings
{{"demo": "pages/components/rating/SimpleRating.js"}}
diff --git a/docs/src/pages/components/rating/rating-zh.md b/docs/src/pages/components/rating/rating-zh.md
index 3b1715d6a8808d..41ed249f95ef4f 100644
--- a/docs/src/pages/components/rating/rating-zh.md
+++ b/docs/src/pages/components/rating/rating-zh.md
@@ -7,8 +7,6 @@ components: Rating
<p class="description">Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.</p>
-- 📦 [20 kB gzipped](/size-snapshot) (but only 6 kB without @material-ui/styles).
-
## Simple ratings
{{"demo": "pages/components/rating/SimpleRating.js"}}
diff --git a/docs/src/pages/components/selects/selects-de.md b/docs/src/pages/components/selects/selects-de.md
index 641b394142d24d..f7df6fd853ac53 100644
--- a/docs/src/pages/components/selects/selects-de.md
+++ b/docs/src/pages/components/selects/selects-de.md
@@ -21,7 +21,7 @@ Da die Benutzererfahrung auf mobilen Geräten durch die native Auswahl der Platt
## Benutzerdefinierte Auswahl
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Here are some examples of customizing the component. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
Der erste Schritt besteht darin, die `InputBase` Komponente zu formatieren. Anschließend können Sie es entweder direkt als Textfeld verwenden oder der Eigenschaft select `input` zuweisen, um ein Feld `select` zu erhalten.
diff --git a/docs/src/pages/components/selects/selects-ja.md b/docs/src/pages/components/selects/selects-ja.md
index 4710270fac979b..44c40d48c7bd30 100644
--- a/docs/src/pages/components/selects/selects-ja.md
+++ b/docs/src/pages/components/selects/selects-ja.md
@@ -21,7 +21,7 @@ components: Select, NativeSelect
## カスタマイズされた選択
-コンポーネントのカスタマイズの例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
最初のステップは、 `InputBase` コンポーネントのスタイル設定です。 スタイルを設定したら、テキストフィールドとして直接使用するか、select `input` プロパティに提供して、 `select` フィールドを作成できます。
@@ -33,7 +33,7 @@ components: Select, NativeSelect
単一選択の場合と同様に、 `onChange` コールバックで `event.target.value` にアクセスすることにより、新しい値を引き出すことができます。 常に配列です。
-{{{{"demo": "pages/components/selects/MultipleSelect.js"}}
+{{"demo": "pages/components/selects/MultipleSelect.js"}}
## 制御開選択
@@ -47,4 +47,4 @@ Material Designの仕様では推奨されていませんが、ダイアログ
## Text Fields
-The `TextField` wrapper component is a complete form control including a label, input and help text. このセクション</a>で、選択モード 例を見つけることができます。</p>
\ No newline at end of file
+`TextField` ラッパーコンポーネントは、ラベル、入力、ヘルプテキストを含む完全なフォームコントロールです。 このセクション</a>で、選択モード 例を見つけることができます。</p>
\ No newline at end of file
diff --git a/docs/src/pages/components/selects/selects-zh.md b/docs/src/pages/components/selects/selects-zh.md
index 7899a435b884a5..0de0ee86e7b02f 100644
--- a/docs/src/pages/components/selects/selects-zh.md
+++ b/docs/src/pages/components/selects/selects-zh.md
@@ -21,7 +21,7 @@ components: Select, NativeSelect
## 自定义选择器
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
第一步是设置 `InputBase` 组件的样式。 一旦设置好样式，您就可以直接将其用作文本字段，也可以将其提供给 select 组件的 `input` 属性作为一个 `select` 字段。
diff --git a/docs/src/pages/components/slider/slider-aa.md b/docs/src/pages/components/slider/slider-aa.md
index 9811f773d54027..4af76301131be3 100644
--- a/docs/src/pages/components/slider/slider-aa.md
+++ b/docs/src/pages/components/slider/slider-aa.md
@@ -51,5 +51,5 @@ crwdns91684:0crwdne91684:0
crwdns91688:0crwdne91688:0 crwdns91690:0crwdne91690:0
-- crwdns91692:0crwdne91692:0
-- crwdns91694:0crwdne91694:0 crwdns91696:0crwdne91696:0 crwdns91698:0crwdne91698:0
\ No newline at end of file
+- crwdns100772:0crwdne100772:0
+- crwdns100774:0crwdne100774:0 crwdns91696:0crwdne91696:0 crwdns91698:0crwdne91698:0
\ No newline at end of file
diff --git a/docs/src/pages/components/slider/slider-de.md b/docs/src/pages/components/slider/slider-de.md
index 4b162afb3cae55..e58ea3e7b7bcb7 100644
--- a/docs/src/pages/components/slider/slider-de.md
+++ b/docs/src/pages/components/slider/slider-de.md
@@ -51,5 +51,5 @@ Continuous sliders allow users to select a value along a subjective range.
The component handles most of the work necessary to make it accessible. However, you need to make sure that:
-- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop).
-- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
diff --git a/docs/src/pages/components/slider/slider-es.md b/docs/src/pages/components/slider/slider-es.md
index 1d3a24c003a080..fbccf6ffa4fed8 100644
--- a/docs/src/pages/components/slider/slider-es.md
+++ b/docs/src/pages/components/slider/slider-es.md
@@ -51,5 +51,5 @@ Continuous sliders allow users to select a value along a subjective range.
The component handles most of the work necessary to make it accessible. However, you need to make sure that:
-- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop).
-- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
diff --git a/docs/src/pages/components/slider/slider-fr.md b/docs/src/pages/components/slider/slider-fr.md
index 794588ee27927b..6024f0e8b5e315 100644
--- a/docs/src/pages/components/slider/slider-fr.md
+++ b/docs/src/pages/components/slider/slider-fr.md
@@ -51,5 +51,5 @@ Continuous sliders allow users to select a value along a subjective range.
The component handles most of the work necessary to make it accessible. However, you need to make sure that:
-- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop).
-- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
diff --git a/docs/src/pages/components/slider/slider-ja.md b/docs/src/pages/components/slider/slider-ja.md
index c4a7a36b4d0f91..c80c4174ca6f29 100644
--- a/docs/src/pages/components/slider/slider-ja.md
+++ b/docs/src/pages/components/slider/slider-ja.md
@@ -51,5 +51,5 @@ components: Slider
コンポーネントは、アクセス可能にするために必要なほとんどの作業を処理します。 ただし、次の点を確認する必要があります。
-- スライダには、ラベル`aria-label` または `aria-labelledby`prop) が付いています。
-- 各つまみには、現在の値をわかりやすい名前で示しています。 値がラベルのセマンティクスと一致する場合、これは必要ありません。 この名前は、 `getAriaValueText`または`aria-valuetext`プロパティを使用して変更できます。
\ No newline at end of file
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value. 値がラベルのセマンティクスと一致する場合、これは必要ありません。 この名前は、 `getAriaValueText`または`aria-valuetext`プロパティを使用して変更できます。
\ No newline at end of file
diff --git a/docs/src/pages/components/slider/slider-pt.md b/docs/src/pages/components/slider/slider-pt.md
index 092ad19acda51f..6f8f7e9a1357fd 100644
--- a/docs/src/pages/components/slider/slider-pt.md
+++ b/docs/src/pages/components/slider/slider-pt.md
@@ -51,5 +51,5 @@ Os sliders contínuos permitem que os usuários selecionem um valor ao longo de
O componente lida com a maior parte do trabalho necessário para torná-lo acessível. No entanto, você precisa se certificar de que:
-- O slider, como um todo, tem um rótulo (propriedades `aria-label` ou `aria-labelledby`).
-- Cada marcador tem um nome amigável para o seu valor atual. Isso não é necessário se o valor corresponder ao rótulo exibido no slider. Você pode alterar o nome com as propriedades `getAriaValueText` ou `aria-valuetext`.
\ No newline at end of file
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value. Isso não é necessário se o valor corresponder ao rótulo exibido no slider. Você pode alterar o nome com as propriedades `getAriaValueText` ou `aria-valuetext`.
\ No newline at end of file
diff --git a/docs/src/pages/components/slider/slider-ru.md b/docs/src/pages/components/slider/slider-ru.md
index 9d376d6fdef2fe..f88a549043d156 100644
--- a/docs/src/pages/components/slider/slider-ru.md
+++ b/docs/src/pages/components/slider/slider-ru.md
@@ -51,5 +51,5 @@ Continuous sliders allow users to select a value along a subjective range.
The component handles most of the work necessary to make it accessible. However, you need to make sure that:
-- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop).
-- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop.
\ No newline at end of file
diff --git a/docs/src/pages/components/slider/slider-zh.md b/docs/src/pages/components/slider/slider-zh.md
index 2a69e192102620..3c42cb59250851 100644
--- a/docs/src/pages/components/slider/slider-zh.md
+++ b/docs/src/pages/components/slider/slider-zh.md
@@ -25,7 +25,7 @@ Discrete sliders can be adjusted to a specific value by referencing its value in
## 自定义滑块
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一些例子。 You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/slider/CustomizedSlider.js"}}
@@ -51,5 +51,5 @@ Here are some examples of customizing the component. You can learn more about th
The component handles most of the work necessary to make it accessible. However, you need to make sure that:
-- 为整个滑块组件添加一个标签 (`aria-label` or `aria-labelledby`)。
-- 为数值标签的提示气泡添加有意义的名称， 除非数值的含义显而易见。 你可以通过`getAriaValueText` 或者 `aria-valuetext` 更改提示气泡的名称。
\ No newline at end of file
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value. 除非数值的含义显而易见。 你可以通过`getAriaValueText` 或者 `aria-valuetext` 更改提示气泡的名称。
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-aa.md b/docs/src/pages/components/snackbars/snackbars-aa.md
index 3c4516985331d3..1d274162c5bc79 100644
--- a/docs/src/pages/components/snackbars/snackbars-aa.md
+++ b/docs/src/pages/components/snackbars/snackbars-aa.md
@@ -5,7 +5,7 @@ components: crwdns91702:0crwdne91702:0
# crwdns91704:0crwdne91704:0
-<p class="description">crwdns91706:0crwdne91706:0</p>
+<p class="description">crwdns100806:0crwdne100806:0 crwdns100808:0crwdne100808:0</p>
crwdns91708:0crwdne91708:0 crwdns91710:0crwdne91710:0 crwdns91712:0crwdne91712:0
@@ -73,6 +73,6 @@ crwdns91778:0crwdne91778:0
 
-crwdns91790:0crwdne91790:0 crwdns91792:0crwdne91792:0 crwdns91794:0crwdne91794:0
+crwdns91790:0crwdne91790:0 crwdns91792:0crwdne91792:0 crwdns100810:0crwdne100810:0
crwdns91796:0crwdne91796:0
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-de.md b/docs/src/pages/components/snackbars/snackbars-de.md
index 0829ec2cfcf311..c67c28a86ca0c7 100644
--- a/docs/src/pages/components/snackbars/snackbars-de.md
+++ b/docs/src/pages/components/snackbars/snackbars-de.md
@@ -5,7 +5,7 @@ components: Snackbar, SnackbarContent
# Snackbars
-<p class="description">Snackbars liefern kurze Nachrichten zu App-Prozessen - normalerweise am unteren Bildschirmrand.</p>
+<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
[Snackbars](https://material.io/design/components/snackbars.html) informieren Benutzer über einen Prozess, den eine App ausgeführt hat oder ausführen wird. Sie erscheinen vorübergehend am unteren Rand des Bildschirms. Sie sollten die Benutzererfahrung nicht unterbrechen und erfordern keine Benutzereingaben, um verschwinden zu können.
@@ -73,6 +73,6 @@ Für fortgeschrittenere Anwendungsfälle können Ihnen folgende Projekte helfen:
 
-Im folgenden Beispiel demonstrieren wir, wie man [notistack](https://github.com/iamhosseindhv/notistack) benutzt. Notistack macht es einfach, Snackbars anzuzeigen (damit Sie sich nicht mit dem Öffnen / Schließen-Status befassen müssen). Außerdem können Sie sie übereinander stapeln (wird jedoch von der Spezifikation nicht empfohlen).
+Im folgenden Beispiel demonstrieren wir, wie man [notistack](https://github.com/iamhosseindhv/notistack) benutzt. Notistack macht es einfach, Snackbars anzuzeigen (damit Sie sich nicht mit dem Öffnen / Schließen-Status befassen müssen). It also enables you to stack them on top of one another (although this is discouraged by the specification).
{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-es.md b/docs/src/pages/components/snackbars/snackbars-es.md
index 3816f48d323f0a..e98ed0aa592bf5 100644
--- a/docs/src/pages/components/snackbars/snackbars-es.md
+++ b/docs/src/pages/components/snackbars/snackbars-es.md
@@ -5,7 +5,7 @@ components: Snackbar, SnackbarContent
# Barra de notificaciones
-<p class="description">Snackbars provide brief messages about app processes - typically at the bottom of the screen.</p>
+<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
[Snackbars](https://material.io/design/components/snackbars.html) inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
@@ -73,6 +73,6 @@ Para usos más avanzados tal vez puedas aprovercharte de:
 
-In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another (but discouraged by the specification).
+In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another (although this is discouraged by the specification).
{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-fr.md b/docs/src/pages/components/snackbars/snackbars-fr.md
index 02a8415ac6cc69..5530228c294ae3 100644
--- a/docs/src/pages/components/snackbars/snackbars-fr.md
+++ b/docs/src/pages/components/snackbars/snackbars-fr.md
@@ -5,7 +5,7 @@ components: Snackbar, SnackbarContent
# Snackbars
-<p class="description">Snackbars provide brief messages about app processes - typically at the bottom of the screen.</p>
+<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
[Snackbars](https://material.io/design/components/snackbars.html) inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
@@ -73,6 +73,6 @@ Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti de
 
-Dans l'exemple suivant, nous montrons comment utiliser [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another (but discouraged by the specification).
+Dans l'exemple suivant, nous montrons comment utiliser [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another (although this is discouraged by the specification).
{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-ja.md b/docs/src/pages/components/snackbars/snackbars-ja.md
index 6661a3d05fe642..40f55b178fea7c 100644
--- a/docs/src/pages/components/snackbars/snackbars-ja.md
+++ b/docs/src/pages/components/snackbars/snackbars-ja.md
@@ -5,7 +5,7 @@ components: Snackbar, SnackbarContent
# スナックバー
-<p class="description">スナックバーは、アプリプロセスに関する簡単なメッセージを提供します-通常は画面の下部にあります。</p>
+<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
[スナックバー](https://material.io/design/components/snackbars.html) は、アプリが実行したプロセスまたは実行するプロセスをユーザーに通知します。 一時的に画面の下部に表示されます。 ユーザーの操作を中断したり、ユーザー入力を消去したりする必要はありません。
@@ -73,6 +73,6 @@ Google Keepのスナックバーの動作を再現することを目的とした
 
-次の例では、 [notistack](https://github.com/iamhosseindhv/notistack)の使用方法を示します。 snackbars(オープン/クローズの状態に対処する必要はありません。) を簡単に表示できます。 また、重ねて表示することもできます(しかし仕様では推奨されていない)。
+次の例では、 [notistack](https://github.com/iamhosseindhv/notistack)の使用方法を示します。 snackbars(オープン/クローズの状態に対処する必要はありません。) を簡単に表示できます。 It also enables you to stack them on top of one another (although this is discouraged by the specification).
{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-pt.md b/docs/src/pages/components/snackbars/snackbars-pt.md
index ab1fed71cb0e0d..57822408105fd1 100644
--- a/docs/src/pages/components/snackbars/snackbars-pt.md
+++ b/docs/src/pages/components/snackbars/snackbars-pt.md
@@ -5,7 +5,7 @@ components: Snackbar, SnackbarContent
# Snackbar
-<p class="description">Snackbars fornecem mensagens breves sobre processos da aplicação - normalmente na parte inferior da tela.</p>
+<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
[Snackbars](https://material.io/design/components/snackbars.html) informam aos usuários de um processo que a aplicação realizou ou irá executar. Eles aparecem temporariamente, na parte inferior da tela. Eles não devem interromper a experiência do usuário e não exigem ação do usuário para que desapareça.
@@ -73,6 +73,6 @@ Para usos mais avançados, você pode tirar vantagem com:
 
-No exemplo a seguir, demonstramos como usar [notistack](https://github.com/iamhosseindhv/notistack). O notistack facilita a exibição de snackbars (para que você não tenha que lidar com o estado de abertura / fechamento delas). Também permite empilhá-los uns sobre os outros (mas não recomendamos devido a especificação).
+No exemplo a seguir, demonstramos como usar [notistack](https://github.com/iamhosseindhv/notistack). O notistack facilita a exibição de snackbars (para que você não tenha que lidar com o estado de abertura / fechamento delas). It also enables you to stack them on top of one another (although this is discouraged by the specification).
{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-ru.md b/docs/src/pages/components/snackbars/snackbars-ru.md
index a164feacae1690..09f254a09f21df 100644
--- a/docs/src/pages/components/snackbars/snackbars-ru.md
+++ b/docs/src/pages/components/snackbars/snackbars-ru.md
@@ -5,7 +5,7 @@ components: Snackbar, SnackbarContent
# Snackbars
-<p class="description">Snackbars provide brief messages about app processes - typically at the bottom of the screen.</p>
+<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
[Snackbars](https://material.io/design/components/snackbars.html) inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
@@ -73,6 +73,6 @@ You can change the direction of the [Slide](/components/transitions/#slide) tran
 
-In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another (but discouraged by the specification).
+In the following example, we demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack makes it easy to display snackbars (so you don't have to deal with open/close state of them). It also enables you to stack them on top of one another (although this is discouraged by the specification).
{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/snackbars/snackbars-zh.md b/docs/src/pages/components/snackbars/snackbars-zh.md
index 1b5dc3cbe24c26..689cc2dab9ce6e 100644
--- a/docs/src/pages/components/snackbars/snackbars-zh.md
+++ b/docs/src/pages/components/snackbars/snackbars-zh.md
@@ -5,7 +5,7 @@ components: Snackbar, SnackbarContent
# Snackbar（消息条）
-<p class="description">Snackbar（消息条）通过一条消息来提供有关应用进程的简要信息 — 它通常位于屏幕的底部。</p>
+<p class="description">Snackbars provide brief messages about app processes. The component is also known as a toast.</p>
[消息条](https://material.io/design/components/snackbars.html) 将应用程序已执行或即将执行的进程通知用户。 它们会从屏幕底部短暂地出现。 它们不应中断用户体验，也不要求任何用户的操作来关闭。
@@ -23,7 +23,7 @@ Snackbars contain a single line of text directly related to the operation perfor
## 自定义的消息条
-Here are some examples of customizing the component. 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
+以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/snackbars/CustomizedSnackbars.js"}}
@@ -73,6 +73,6 @@ Here are some examples of customizing the component. 您可以在[重写文档
 
-在下面的示例中, 我们演示如何使用 [notistack](https://github.com/iamhosseindhv/notistack)。 notistack 可以很容易地显示消息条（因此您不必处理它们的打开/关闭状态）。 它还使您能够将它们堆叠在彼此之上 (但规范不鼓励这样做)。
+在下面的示例中, 我们演示如何使用 [notistack](https://github.com/iamhosseindhv/notistack)。 notistack 可以很容易地显示消息条（因此您不必处理它们的打开/关闭状态）。 It also enables you to stack them on top of one another (although this is discouraged by the specification).
{{"demo": "pages/components/snackbars/IntegrationNotistack.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/speed-dial/speed-dial-ja.md b/docs/src/pages/components/speed-dial/speed-dial-ja.md
index 2f979b3f8a4929..4dca9b86cd7c15 100644
--- a/docs/src/pages/components/speed-dial/speed-dial-ja.md
+++ b/docs/src/pages/components/speed-dial/speed-dial-ja.md
@@ -3,28 +3,28 @@ title: Speed Dial Reactコンポーネント
components: SpeedDial, SpeedDialAction, SpeedDialIcon
---
-# スピードダイヤル
+# スピードダイヤル（Speed Dial）
<p class="description">フローティング状態のアクションボタンを押すと、3~6つの関連アクションを短縮ダイヤルの形式で表示できます。</p>
-If more than six actions are needed, something other than a FAB should be used to present them.
+6つ以上のアクションが必要な場合は、FAB以外のものを使用してそれらを表示する必要があります。
## シンプルスピードダイヤル
-The floating action button can display related actions.
+フローティングアクションボタンは、関連するアクションを表示できます。
{{"demo": "pages/components/speed-dial/SpeedDials.js"}}
## カスタムcloseアイコン
-You can provide an alternate icon for the closed and open states using the `icon` and `openIcon` props of the `SpeedDialIcon` component.
+`SpeedDialIcon` コンポーネントの `アイコン` と `openIcon` props を使用して、閉じた状態と開いた状態の代替アイコンを提供できます。
{{"demo": "pages/components/speed-dial/OpenIconSpeedDial.js"}}
## 永続的なアクションのツールチップ
-The SpeedDialActions tooltips can be be displayed persistently so that users don't have to long-press in order to see the tooltip on touch devices.
+SpeedDialActionsのツールチップは永続的に表示されるため、ユーザーがタッチデバイスでツールチップを表示するために長押しする必要はありません。
-It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set the property.
+ここではデモ目的ですべてのデバイスで有効になっていますが、実稼働環境では、 `isTouch` ロジックを使用して条件付きでプロパティを設定できます。
{{"demo": "pages/components/speed-dial/SpeedDialTooltipOpen.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/steppers/steppers-aa.md b/docs/src/pages/components/steppers/steppers-aa.md
index bdc7615b3630a8..6295228350428a 100644
--- a/docs/src/pages/components/steppers/steppers-aa.md
+++ b/docs/src/pages/components/steppers/steppers-aa.md
@@ -42,7 +42,7 @@ crwdns91882:0crwdne91882:0
crwdns91884:0{true}crwdne91884:0
-crwdns91886:0crwdne91886:0
+crwdns101148:0crwdne101148:0 crwdns101150:0crwdne101150:0
crwdns91888:0crwdne91888:0
diff --git a/docs/src/pages/components/steppers/steppers-de.md b/docs/src/pages/components/steppers/steppers-de.md
index d8e6721d1d260f..4294fe73650a42 100644
--- a/docs/src/pages/components/steppers/steppers-de.md
+++ b/docs/src/pages/components/steppers/steppers-de.md
@@ -32,7 +32,7 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prop
### Anpasster Stepper
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
@@ -42,7 +42,7 @@ Mit nichtlinearen Steppern können Benutzer an jedem Punkt einen mehrstufigen Fl
Dieses Beispiel ähnelt dem regulären horizontalen Stepper, mit der Ausnahme, dass Schritte nicht mehr automatisch auf `=disabled={true}` basierend auf der Eigenschaft `activeStep` gesetzt werden.
-Wir haben den `StepButton` hier verwendet, um anklickbare Schrittbeschriftungen zu demonstrieren sowie das Eigenschaft `completed`. Da Schritte auf nicht lineare Weise aufgerufen werden können, müssen Sie dies selbst implementieren und festzulegen, wann alle Schritte abgeschlossen sind (oder auch wenn sie abgeschlossen sein müssen).
+The use of the `StepButton` here demonstrates clickable step labels, as well as setting the `completed` flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
diff --git a/docs/src/pages/components/steppers/steppers-es.md b/docs/src/pages/components/steppers/steppers-es.md
index be2d76beb3e894..23436bf96cc033 100644
--- a/docs/src/pages/components/steppers/steppers-es.md
+++ b/docs/src/pages/components/steppers/steppers-es.md
@@ -42,7 +42,7 @@ Non-linear steppers allow users to enter a multi-step flow at any point.
This example is similar to the regular horizontal stepper, except steps are no longer automatically set to `disabled={true}` based on the `activeStep` property.
-We've used the `StepButton` here to demonstrate clickable step labels as well as setting the `completed` flag however because steps can be accessed in a non-linear fashion it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
+The use of the `StepButton` here demonstrates clickable step labels, as well as setting the `completed` flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
diff --git a/docs/src/pages/components/steppers/steppers-fr.md b/docs/src/pages/components/steppers/steppers-fr.md
index 369a4d37588425..a94e2c8861fba7 100644
--- a/docs/src/pages/components/steppers/steppers-fr.md
+++ b/docs/src/pages/components/steppers/steppers-fr.md
@@ -42,7 +42,7 @@ Non-linear steppers allow users to enter a multi-step flow at any point.
This example is similar to the regular horizontal stepper, except steps are no longer automatically set to `disabled={true}` based on the `activeStep` property.
-We've used the `StepButton` here to demonstrate clickable step labels as well as setting the `completed` flag however because steps can be accessed in a non-linear fashion it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
+The use of the `StepButton` here demonstrates clickable step labels, as well as setting the `completed` flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
diff --git a/docs/src/pages/components/steppers/steppers-ja.md b/docs/src/pages/components/steppers/steppers-ja.md
index 549aed1af9911c..ae189b067dec3c 100644
--- a/docs/src/pages/components/steppers/steppers-ja.md
+++ b/docs/src/pages/components/steppers/steppers-ja.md
@@ -3,7 +3,7 @@ title: Stepper React component
components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper
---
-# Steppers
+# ステッパー（Steppers）
<p class="description">ステッパーは、番号の付いたステップを通して進捗を伝えます。 ウィザードのようなワークフローを提供します。</p>
@@ -30,9 +30,9 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
-### Customized Stepper
+### カスタマイズされたステッパー
-コンポーネントのカスタマイズ例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
@@ -42,7 +42,7 @@ Non-linearステッパーにより、ユーザーはいつでもマルチステ
この例は、ステップが `activeStep` プロパティに基づいて `disabled ={true}` 自動的に設定されることを除いて、通常の水平ステッパーに似ています。
-ここでは、</code>StepButton</code>を使用して、クリック可能なステップラベルと、`completed`の設定を示します。 しかし、ステップはノンリニアな方法でアクセスできるので、それはあなた自身の実装次第です。 すべての手順が完了したことを確認します(完成させる必要があっても)。
+The use of the `StepButton` here demonstrates clickable step labels, as well as setting the `completed` flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
diff --git a/docs/src/pages/components/steppers/steppers-pt.md b/docs/src/pages/components/steppers/steppers-pt.md
index 59fb7dcc549c16..9077ebd7daed4b 100644
--- a/docs/src/pages/components/steppers/steppers-pt.md
+++ b/docs/src/pages/components/steppers/steppers-pt.md
@@ -32,7 +32,7 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prop
### Assistente customizado
-Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
@@ -42,7 +42,7 @@ Os assistentes não lineares permitem que os usuários insiram um fluxo de vári
Este exemplo é semelhante ao não linear, porém as etapas não são mais automaticamente definidas `disabled={true}` com base na propriedade `activeStep`.
-Nós usamos um `StepButton` aqui para demonstrar rótulos de etapa clicáveis, bem como definindo o flag `completed`, porque etapas podem ser acessadas de forma não-linear, e pode até implementar sua própria lógica para determinar quando todas as etapas forem concluídas (ou mesmo se elas precisam ser completadas).
+The use of the `StepButton` here demonstrates clickable step labels, as well as setting the `completed` flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
diff --git a/docs/src/pages/components/steppers/steppers-ru.md b/docs/src/pages/components/steppers/steppers-ru.md
index 9810e8ccb602b7..36bef6c07ab63a 100644
--- a/docs/src/pages/components/steppers/steppers-ru.md
+++ b/docs/src/pages/components/steppers/steppers-ru.md
@@ -42,7 +42,7 @@ Non-linear steppers allow users to enter a multi-step flow at any point.
This example is similar to the regular horizontal stepper, except steps are no longer automatically set to `disabled={true}` based on the `activeStep` property.
-We've used the `StepButton` here to demonstrate clickable step labels as well as setting the `completed` flag however because steps can be accessed in a non-linear fashion it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
+The use of the `StepButton` here demonstrates clickable step labels, as well as setting the `completed` flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
diff --git a/docs/src/pages/components/steppers/steppers-zh.md b/docs/src/pages/components/steppers/steppers-zh.md
index a5e4e78478cfae..060b0c61654080 100644
--- a/docs/src/pages/components/steppers/steppers-zh.md
+++ b/docs/src/pages/components/steppers/steppers-zh.md
@@ -32,7 +32,7 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prop
### 定制步进器
-Here is an example of customizing the component. 您可以在[样式重写文档页](/customization/components/)中了解有关此内容的更多信息。
+以下是自定义组件的一个示例。 您可以在[样式重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
@@ -42,7 +42,7 @@ Here is an example of customizing the component. 您可以在[样式重写文档
此示例类似于常规的水平步进器，但步骤不再基于` activeStep `属性自动设置` disabled = {true} `。
-我们在这里使用` StepButton `来演示可点击的步骤标签以及设置` completed `。但是因为可以以非线性方式访问步骤，所以这取决于您自己的实现确定所有步骤何时完成（或者甚至是否需要完成）。
+The use of the `StepButton` here demonstrates clickable step labels, as well as setting the `completed` flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to determine when all steps are completed (or even if they need to be completed).
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
diff --git a/docs/src/pages/components/switches/switches-ja.md b/docs/src/pages/components/switches/switches-ja.md
index 47c341f63b36b9..7ea59601ae0af6 100644
--- a/docs/src/pages/components/switches/switches-ja.md
+++ b/docs/src/pages/components/switches/switches-ja.md
@@ -11,19 +11,19 @@ components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel
{{"demo": "pages/components/switches/Switches.js"}}
-## Switches with FormControlLabel
+## FormControlLabelを使用したスイッチ
`Switch` コンポーネントは` FormControlLabel<code>コンポーネントを説明のラベルとして使うことができます。</p>
<p>{{"demo": "pages/components/switches/SwitchLabels.js"}}</p>
-<h2>Switches with FormGroup</h2>
+<h2>FormGroupを使用したスイッチ</h2>
-<p><code>FormGroup` は、より簡単なAPIを提供する選択コントロールコンポーネントをグループ化するために使用される便利なラッパーです。 However, we encourage you to use a [Checkbox](#checkboxes) instead.
+<p><code>FormGroup` は、より簡単なAPIを提供する選択コントロールコンポーネントをグループ化するために使用される便利なラッパーです。 ただし、代わりに [チェックボックス](#checkboxes) を使用することをお勧めします。
{{"demo": "pages/components/switches/SwitchesGroup.js"}}
-## Customized switches
+## カスタマイズされたスイッチ （Customized switches）
コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
@@ -31,7 +31,7 @@ components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel
## サイズ
-Fancy smaller switches? `size`プロパティを使用します。
+小型のスイッチが好きですか？ `size`プロパティを使用します。
{{"demo": "pages/components/switches/SwitchesSize.js"}}
diff --git a/docs/src/pages/components/tables/tables-aa.md b/docs/src/pages/components/tables/tables-aa.md
index 675212dfd9c2cc..534e24ad9e974e 100644
--- a/docs/src/pages/components/tables/tables-aa.md
+++ b/docs/src/pages/components/tables/tables-aa.md
@@ -57,31 +57,37 @@ crwdns92068:0crwdne92068:0
crwdns92070:0crwdne92070:0
-## crwdns92072:0crwdne92072:0
+## crwdns100546:0crwdne100546:0
-crwdns92074:0crwdne92074:0
+crwdns100548:0crwdne100548:0 crwdns100550:0crwdne100550:0
-crwdns92076:0crwdne92076:0
+crwdns100552:0crwdne100552:0
-## crwdns92078:0crwdne92078:0
+## crwdns100554:0crwdne100554:0
-crwdns92080:0crwdne92080:0 crwdns92082:0crwdne92082:0 crwdns92084:0crwdne92084:0
+crwdns100556:0crwdne100556:0
-crwdns92086:0crwdne92086:0
+crwdns100558:0crwdne100558:0
-## crwdns92088:0crwdne92088:0
+## crwdns100560:0crwdne100560:0
-crwdns92090:0crwdne92090:0
+crwdns100562:0crwdne100562:0 crwdns100564:0crwdne100564:0 crwdns100566:0crwdne100566:0
+
+crwdns100568:0crwdne100568:0
+
+## crwdns100570:0crwdne100570:0
+
+crwdns100572:0crwdne100572:0
### crwdns92092:0crwdne92092:0
- 
+ 
-crwdns92102:0crwdne92102:0 crwdns92104:0crwdne92104:0 crwdns92106:0crwdne92106:0
+crwdns100582:0crwdne100582:0 crwdns100584:0crwdne100584:0 crwdns100586:0crwdne100586:0
-crwdns92108:0crwdne92108:0
+crwdns100588:0crwdne100588:0
### crwdns92110:0crwdne92110:0
-- crwdns92112:0crwdne92112:0
-- crwdns92114:0crwdne92114:0
\ No newline at end of file
+- crwdns100872:0crwdne100872:0
+- crwdns100874:0crwdne100874:0
\ No newline at end of file
diff --git a/docs/src/pages/components/tables/tables-de.md b/docs/src/pages/components/tables/tables-de.md
index 465fa74f0a81b9..f7f74c5740ed57 100644
--- a/docs/src/pages/components/tables/tables-de.md
+++ b/docs/src/pages/components/tables/tables-de.md
@@ -47,7 +47,7 @@ Der Tabelle wurde eine feste Breite zugewiesen, um das horizontale Scrollen zu v
## Benutzerdefinierte Tabellen
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/tables/CustomizedTables.js"}}
@@ -57,15 +57,21 @@ Die Eigenschaft `Action` der Komponente `TablePagination` ermöglicht die Implem
{{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
-## Überspannende Tabellen
+## Fixed header
-Ein einfaches Beispiel mit überspannenden Zeilen & Spalten.
+An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
+## Spanning Table
+
+A simple example with spanning rows & columns.
{{"demo": "pages/components/tables/SpanningTable.js"}}
-## Virtualisierte Tabelle
+## Virtualized Table
-Im folgenden Beispiel zeigen wir wie Sie [react-virtualized](https://github.com/bvaughn/react-virtualized) mit der `Table<` Komponente nutzen können. Sie zeigt 200 Zeilen an und kann auch einfach mehr verwalten. Virtualization helps with performance issues.
+In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. Sie zeigt 200 Zeilen an und kann auch einfach mehr verwalten. Virtualisierung hilft bei Leistungsproblemen.
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
@@ -75,13 +81,13 @@ Für fortgeschrittenere Anwendungsfälle können Ihnen folgende Projekte helfen:
### material-table
- 
+ 
-[Material-Table](https://github.com/mbrn/material-table) ist ein einfache und leistungsfähige Daten Tabelle für React basierend auf Material-UI Table mit einigen zusätzlichen Funktionen. Sie unterstützen viele verschiedene Anwendungsfälle (editierbar, filtern, gruppieren, sortieren, auswählen, i18n, Baumdaten und mehr). Sie sollten es sich mal angucken.
+[material-table](https://github.com/mbrn/material-table) is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
{{"demo": "pages/components/tables/MaterialTableDemo.js"}}
### Sonstiges
-- [Dx-React-Grid-Material-UI](https://devexpress. github. io/devextreme-reactive/react/grid/) Ein Datengitter für Material-UI mit Funktionen zum Blättern, Sortieren, Filtern, Gruppieren und Bearbeiten ([benutzerdefinierte Lizenz](https://js. devexpress. com/licensing/)).
-- [mui-datatables](https://github.com/gregnb/mui-datatables) Responsive Datentabellen für Material-UI mit Filterung, Sortierung, Suche und mehr.
\ No newline at end of file
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
diff --git a/docs/src/pages/components/tables/tables-es.md b/docs/src/pages/components/tables/tables-es.md
index e1fbe74b2fa51b..7bbdf1cbb44855 100644
--- a/docs/src/pages/components/tables/tables-es.md
+++ b/docs/src/pages/components/tables/tables-es.md
@@ -57,15 +57,21 @@ El atributo `Action`del componente `TablePagination` permite implementar accione
{{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
-## Tabla Expandible
+## Fixed header
-Un ejemplo sencillo con filas & columnas expandibles.
+An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
+## Spanning Table
+
+A simple example with spanning rows & columns.
{{"demo": "pages/components/tables/SpanningTable.js"}}
-## Tabla Virtualizada
+## Virtualized Table
-En el siguiente ejemplo, demostramos como usar [react-virtualized](https://github.com/bvaughn/react-virtualized) con el componente `Table`. Renderiza 200 filas y fácilmente puede manejar más. La virtualización ayuda con problemas de rendimiento.
+In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. Renderiza 200 filas y fácilmente puede manejar más. La virtualización ayuda con problemas de rendimiento.
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
@@ -83,5 +89,5 @@ Para usos más avanzados tal vez puedas aprovercharte de:
### Otros
-- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/) Una tabla de datos para Material-UI con herramientas de paginación, ordenación, filtración, agrupación y revisión ([licencia customizada](https://js.devexpress.com/licensing/)).
-- [mui-datatables](https://github.com/gregnb/mui-datatables) Tablas de datos responsivas para Material-UI con filtración, ordenación, búsqueda y más.
\ No newline at end of file
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
diff --git a/docs/src/pages/components/tables/tables-fr.md b/docs/src/pages/components/tables/tables-fr.md
index 15a03c72ef60b8..9b76207654cd35 100644
--- a/docs/src/pages/components/tables/tables-fr.md
+++ b/docs/src/pages/components/tables/tables-fr.md
@@ -57,15 +57,21 @@ La propriété `Action` du composant `TablePagination` permet l'implémentation
{{"démo": "pages/components/tables/CustomPaginationActionsTable.js"}}
+## Fixed header
+
+An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
## Spanning Table
-Un exemple simple avec des colonnes couvrant & lignes.
+A simple example with spanning rows & columns.
{{"demo": "pages/components/tables/SpanningTable.js"}}
-## Table virtualisée
+## Virtualized Table
-Dans l'exemple suivant, nous montrons comment utiliser [react-virtualized](https://github.com/bvaughn/react-virtualized) avec le composant `Table`. Il affiche 200 lignes et peut facilement gérer plus. La virtualisation aide à résoudre les problèmes de performances.
+In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. Il affiche 200 lignes et peut facilement gérer plus. La virtualisation aide à résoudre les problèmes de performances.
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
@@ -77,11 +83,11 @@ Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti de
 
-[material-table](https://github.com/mbrn/material-table) est une table de données simple et puissante pour React basé sur les tables Material-UI avec quelques fonctionnalités supplémentaires. Ils prennent en charge de nombreux cas d'utilisation différents (éditable, filtrage, regroupement, tri, sélection, i18n, données arborescentes, etc.). Vous devriez y jeter un coup d'oeil.
+[material-table](https://github.com/mbrn/material-table) is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
{{"demo": "pages/components/tables/MaterialTableDemo.js"}}
### Autres
-- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/) A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([custom license](https://js.devexpress.com/licensing/)).
-- [mui-datatables](https://github.com/gregnb/mui-datatables) Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
diff --git a/docs/src/pages/components/tables/tables-ja.md b/docs/src/pages/components/tables/tables-ja.md
index c5abcf890cb88e..75772191a6fcaf 100644
--- a/docs/src/pages/components/tables/tables-ja.md
+++ b/docs/src/pages/components/tables/tables-ja.md
@@ -5,7 +5,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
# Tables
-<p class="description">Data tables display sets of data. They can be fully customized.</p>
+<p class="description">データテーブルには、データのセットが表示されます。 それらは完全にカスタマイズできます。</p>
[Data tables](https://material.io/design/components/data-tables.html) は情報を見やすく表示する方法です。 Cardなどの他のプライマリーコンテンツを埋め込むことができます。
@@ -47,7 +47,7 @@ Data tableの上部には、列名をリストするヘッダー行があり、
## Customized tables
-コンポーネントのカスタマイズ例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/tables/CustomizedTables.js"}}
@@ -57,31 +57,37 @@ Data tableの上部には、列名をリストするヘッダー行があり、
{{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
+## Fixed header
+
+An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
## Spanning Table
-行 & 列にまたがる単純な例です。
+A simple example with spanning rows & columns.
{{"demo": "pages/components/tables/SpanningTable.js"}}
## Virtualized Table
-次の例では、 ` Table ` コンポーネントで [react-window](https://github.com/bvaughn/react-virtualized) を使用する方法を示します。 これは200行をレンダリングし、より多くを簡単に処理できます。 仮想化はパフォーマンスの問題に役立ちます。
+In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. これは200行をレンダリングし、より多くを簡単に処理できます。 仮想化はパフォーマンスの問題に役立ちます。
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
-## Complementary projects
+## 補完プロジェクト
-より高度なユースケースのためにあなたは利用することができるかもしれません：
+より高度な使用例では、以下を利用できます。
### material-table
 
-[material-table](https://github.com/mbrn/material-table) は、いくつかの追加機能を備えたMaterial-UI Tableを基にしたシンプルで強力なReact用データテーブルです。 それらは多くの異なるユースケース（編集可能、フィルタリング、グループ化、ソート、選択、i18n、ツリーデータなど）をサポートします。 参照するといいでしょう。
+[material-table](https://github.com/mbrn/material-table) is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
{{"demo": "pages/components/tables/MaterialTableDemo.js"}}
### その他
-- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/) ページング、ソート、フィルタリング、グループ化、および編集機能を備えたMaterial-UI用のデータグリッド（[カスタムライセンス](https://js.devexpress.com/licensing/)）。
-- [mui-datatables](https://github.com/gregnb/mui-datatables) フィルタリング、ソート、検索などの機能を備えたMaterial-UIのレスポンシブデータテーブル。
\ No newline at end of file
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
diff --git a/docs/src/pages/components/tables/tables-pt.md b/docs/src/pages/components/tables/tables-pt.md
index 49c95500aea56a..8ed20fe70ed7c7 100644
--- a/docs/src/pages/components/tables/tables-pt.md
+++ b/docs/src/pages/components/tables/tables-pt.md
@@ -47,7 +47,7 @@ A tabela recebeu uma largura fixa para demonstrar a rolagem horizontal. Para imp
## Tabelas Customizadas
-Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/tables/CustomizedTables.js"}}
@@ -57,31 +57,37 @@ A propriedade `Action` do componente `TablePagination` permite a implementação
{{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
-## Tabela de abrangência
+## Fixed header
-Um exemplo simples com abrangência de linhas & colunas.
+An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
+## Spanning Table
+
+A simple example with spanning rows & columns.
{{"demo": "pages/components/tables/SpanningTable.js"}}
-## Tabela Virtualizada
+## Virtualized Table
-No exemplo a seguir, nós demonstramos como usar [react-virtualized](https://github.com/bvaughn/react-virtualized) com o componente `Table`. São renderizadas 200 linhas e pode facilmente lidar com mais. A virtualização ajuda a lidar com problemas de desempenho.
+In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. Ela renderiza 200 linhas e pode facilmente lidar com mais. A virtualização ajuda a lidar com problemas de desempenho.
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
## Projetos Complementares
-Para casos de uso mais avançados, você pode tirar proveito de:
+Para usos mais avançados, você pode tirar vantagem com:
### material-table
 
-[material-table](https://github.com/mbrn/material-table) é uma tabela de dados simples e poderosa para React baseado na tabela do Material-UI com alguns recursos adicionais. Eles suportam muitos formas de utilização (edição, filtragem, agrupamento, ordenação, seleção, i18n, árvore de dados e muito mais). Você deveria dar uma olhada.
+[material-table](https://github.com/mbrn/material-table) is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
{{"demo": "pages/components/tables/MaterialTableDemo.js"}}
### Outros
-- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/) Uma grade de dados para Material-UI com paginação, ordenação, filtragem, agrupamento e funções de edição ([custom license](https://js.devexpress.com/licensing/)).
-- [mui-datatables](https://github.com/gregnb/mui-datatables) Tabelas de dados responsivas para Material-UI com filtro, ordenação, pesquisa e muito mais.
\ No newline at end of file
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
diff --git a/docs/src/pages/components/tables/tables-ru.md b/docs/src/pages/components/tables/tables-ru.md
index d5b6497077c5c0..4ca5275b55bc9b 100644
--- a/docs/src/pages/components/tables/tables-ru.md
+++ b/docs/src/pages/components/tables/tables-ru.md
@@ -57,15 +57,21 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
{{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
-## Объединение таблиц
+## Fixed header
-Простой пример с объединением строк и столбцов.
+An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
+## Spanning Table
+
+A simple example with spanning rows & columns.
{{"demo": "pages/components/tables/SpanningTable.js"}}
-## Виртуализированная таблица
+## Virtualized Table
-В следующем примере мы покажем, как использовать [react-virtualized](https://github.com/bvaughn/react-virtualized) с компонентом `Table`. Он отображает 200 строк и c легкостью может еще больше. Virtualization helps with performance issues.
+In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. Он отображает 200 строк и c легкостью может еще больше. Virtualization helps with performance issues.
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
@@ -83,5 +89,5 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
### Прочее
-- [dx-react-grid-material-ui<](https://devexpress.github.io/devextreme-reactive/react/grid/) Сетка данных для Material-UI с функциями навигации, сортировки, фильтрации, группировки и редактирования ([пользовательское соглашение](https://js.devexpress.com/licensing/)).
-- [mui-datatables](https://github.com/gregnb/mui-datatables) Адаптируемые таблицы данных для Material-UI с фильтрацией, сортировкой, поиском и многим другим.
\ No newline at end of file
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
diff --git a/docs/src/pages/components/tables/tables-zh.md b/docs/src/pages/components/tables/tables-zh.md
index 945f9238c11f13..16a13a7ff3f58a 100644
--- a/docs/src/pages/components/tables/tables-zh.md
+++ b/docs/src/pages/components/tables/tables-zh.md
@@ -47,7 +47,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
## 自定义表格
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/tables/CustomizedTables.js"}}
@@ -57,15 +57,21 @@ Here is an example of customizing the component. You can learn more about this i
{{"demo": "pages/components/tables/CustomPaginationActionsTable.js"}}
-## Spanning Table（合并的表格）
+## Fixed header
-一个行 & 列跨越的简单例子。
+An example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop (⚠️ no IE 11 support).
+
+{{"demo": "pages/components/tables/StickyHeadTable.js"}}
+
+## Spanning Table
+
+A simple example with spanning rows & columns.
{{"demo": "pages/components/tables/SpanningTable.js"}}
-## 大型列表渲染（Virtualized Table）
+## Virtualized Table
-在下面的示例中，我们演示了如何将 [react-virtualized](https://github.com/bvaughn/react-virtualized) 与 `Table` 组件一起使用。 它渲染了200行，可以轻松处理更多行。 可视化优化了整体的性能。
+In the following example, we demonstrate how to use [react-virtualized](https://github.com/bvaughn/react-virtualized) with the `Table` component. 它渲染了200行，可以轻松处理更多行。 可视化优化了整体的性能。
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
@@ -75,13 +81,13 @@ Here is an example of customizing the component. You can learn more about this i
### material-table
- 
+ 
-[material-table](https://github.com/mbrn/material-table) 是一款 React 的简单且强大的数据库。它基于 Material-UI Table 并且添加了一些额外的功能。 它们支持了不同的用户案例（可编辑，筛选，分组，排序，选择，国际化，树形数据等等）。 您应该看一下。
+[material-table](https://github.com/mbrn/material-table) is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
{{"demo": "pages/components/tables/MaterialTableDemo.js"}}
### 其他
-- [ dx-react-grid-material-ui ](https://devexpress.github.io/devextreme-reactive/react/grid/)：Material-UI 的一种网格数据, 具有分页，排序功能，过滤，分组和编辑功能([自定义许可证](https://js.devexpress.com/licensing/))。
-- [mui-datatables](https://github.com/gregnb/mui-datatables)：Material-UI 的响应式数据表格，包括过滤，排序，搜索等功能。
\ No newline at end of file
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
\ No newline at end of file
diff --git a/docs/src/pages/components/tabs/tabs-de.md b/docs/src/pages/components/tabs/tabs-de.md
index ae601c897e2a13..508722b2284784 100644
--- a/docs/src/pages/components/tabs/tabs-de.md
+++ b/docs/src/pages/components/tabs/tabs-de.md
@@ -65,7 +65,7 @@ Left and right scroll buttons will never be presented. All scrolling must be ini
## Benutzerdefinierte Tabs
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
diff --git a/docs/src/pages/components/tabs/tabs-ja.md b/docs/src/pages/components/tabs/tabs-ja.md
index 93ec3e51ca3e83..25d95972fd30fd 100644
--- a/docs/src/pages/components/tabs/tabs-ja.md
+++ b/docs/src/pages/components/tabs/tabs-ja.md
@@ -65,7 +65,7 @@ components: Tabs, Tab
## カスタマイズされたタブ
-コンポーネントのカスタマイズ例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
diff --git a/docs/src/pages/components/tabs/tabs-pt.md b/docs/src/pages/components/tabs/tabs-pt.md
index fbae24e3f65d7d..fbbad947242cee 100644
--- a/docs/src/pages/components/tabs/tabs-pt.md
+++ b/docs/src/pages/components/tabs/tabs-pt.md
@@ -65,7 +65,7 @@ Botões de rolagem para a esquerda e para a direita nunca serão apresentados. T
## Guias customizadas
-Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
diff --git a/docs/src/pages/components/tabs/tabs-zh.md b/docs/src/pages/components/tabs/tabs-zh.md
index 019c07bd99f728..50bac9032efdf5 100644
--- a/docs/src/pages/components/tabs/tabs-zh.md
+++ b/docs/src/pages/components/tabs/tabs-zh.md
@@ -65,7 +65,7 @@ Left and right scroll buttons will never be presented. All scrolling must be ini
## Customized tabs
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
diff --git a/docs/src/pages/components/text-fields/text-fields-de.md b/docs/src/pages/components/text-fields/text-fields-de.md
index 9bafa7b15675d6..e7d3e2764af62d 100644
--- a/docs/src/pages/components/text-fields/text-fields-de.md
+++ b/docs/src/pages/components/text-fields/text-fields-de.md
@@ -43,7 +43,7 @@ Möglicherweise haben Sie auch festgestellt, dass einige native HTML-Eingabeeige
## Benutzerdefinierte Eingabe
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Here are some examples of customizing the component. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
diff --git a/docs/src/pages/components/text-fields/text-fields-ja.md b/docs/src/pages/components/text-fields/text-fields-ja.md
index d4c2491219ac32..4952c2c282629d 100644
--- a/docs/src/pages/components/text-fields/text-fields-ja.md
+++ b/docs/src/pages/components/text-fields/text-fields-ja.md
@@ -17,7 +17,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
> **Note:** ：このバージョンのテキストフィールドについては、[Material Design guidelines](https://material.io/)では説明されていませんが、Material-UIでは引き続きサポートされます。
-## Outlined
+## アウトライン (Outlined)
`TextField` はアウトラインスタイルをサポートします。
@@ -41,9 +41,9 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
{{"demo": "pages/components/text-fields/Inputs.js"}}
-## Customized inputs
+## カスタマイズされた入力 (Customized inputs)
-コンポーネントのカスタマイズの例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
@@ -51,7 +51,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}}
-## Input Adornments
+## 入力装飾 (Input Adornments)
`Input` は `InputAdornment `提供を許可します。 これらは、入力に接頭辞、接尾辞、またはアクションを追加するために使用できます。 たとえば、アイコンボタンを使用してパスワードを表示または非表示にすることができます。
@@ -107,7 +107,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
次のデモでは、[react-text-mask](https://github.com/text-mask/text-mask) と[react-number-format](https://github.com/s-yadav/react-number-format)ライブラリを使用します。 同じ概念を [（たとえば、react-stripe-element)に適用することもできます](https://github.com/mui-org/material-ui/issues/16037)。
-{{"demo":"pages/components/text-fields/FormattedInputs.js"}}
+{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
指定された入力コンポーネントは、 `inputRef` プロパティを処理する必要があります。 このプロパティは、次のインターフェイスを実装する値で呼び出す必要があります。
diff --git a/docs/src/pages/components/text-fields/text-fields-pt.md b/docs/src/pages/components/text-fields/text-fields-pt.md
index 6e92daacb82612..37a235f7a5229e 100644
--- a/docs/src/pages/components/text-fields/text-fields-pt.md
+++ b/docs/src/pages/components/text-fields/text-fields-pt.md
@@ -79,9 +79,9 @@ A customização não para no CSS, você pode usar composição para criar compo
## Limitações
-### Shrink
+### Reduzir
-O label de entrada "shrink" nem sempre está correto. O input label deve encolher assim que o input estiver exibindo algo. Em algumas circunstâncias, não podemos determinar o estado de "srink" (input numérico, input datetime, input Stripe). Você pode notar uma sobreposição.
+O label de entrada "shrink" nem sempre está correto. O input label deve encolher assim que o input estiver exibindo algo. Em algumas circunstâncias, não podemos determinar o estado de "shrink" (input numérico, input datetime, input Stripe). Você pode notar uma sobreposição.
@@ -97,7 +97,7 @@ ou
<InputLabel shrink>Contagem</InputLabel>
```
-### Floating label
+### Rótulo flutuante
The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
diff --git a/docs/src/pages/components/text-fields/text-fields-zh.md b/docs/src/pages/components/text-fields/text-fields-zh.md
index 24fe5580f1a401..bd1e71b211a831 100644
--- a/docs/src/pages/components/text-fields/text-fields-zh.md
+++ b/docs/src/pages/components/text-fields/text-fields-zh.md
@@ -43,7 +43,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## 自定义输入
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
diff --git a/docs/src/pages/components/toggle-button/toggle-button-aa.md b/docs/src/pages/components/toggle-button/toggle-button-aa.md
index 27acd78c7199af..08dd33bb597950 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-aa.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-aa.md
@@ -9,7 +9,7 @@ components: crwdns92412:0crwdne92412:0
crwdns92418:0crwdne92418:0
-crwdns92420:0crwdne92420:0
+crwdns100540:0crwdne100540:0
crwdns92422:0crwdne92422:0
@@ -17,4 +17,14 @@ crwdns92422:0crwdne92422:0
crwdns92426:0crwdne92426:0 crwdns92428:0crwdne92428:0
-crwdns92430:0crwdne92430:0
\ No newline at end of file
+crwdns92430:0crwdne92430:0
+
+## crwdns100542:0crwdne100542:0
+
+crwdns100544:0crwdne100544:0
+
+## crwdns100796:0crwdne100796:0
+
+crwdns100798:0crwdne100798:0 crwdns100800:0crwdne100800:0
+
+crwdns100802:0crwdne100802:0 crwdns100804:0crwdne100804:0
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-de.md b/docs/src/pages/components/toggle-button/toggle-button-de.md
index 5a7d181813453c..130f2550cb3da8 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-de.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-de.md
@@ -9,7 +9,7 @@ components: ToggleButton, ToggleButtonGroup
Um Gruppen von verwandten [Schaltern](https://material.io/design/components/buttons.html#toggle-button), hervorzuheben, sollte eine Gruppe einen gemeinsamen Container verwenden.
-Die `ToggleButtonGroup` wird die Auswahl von den untergeordneten Schaltern steuern, wenn es eigene `value` Eigenschaft gesetzt hat.
+The `ToggleButtonGroup` will control the selected state of its child buttons when given its own `value` prop.
{{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
@@ -17,4 +17,14 @@ Die `ToggleButtonGroup` wird die Auswahl von den untergeordneten Schaltern steue
Fancy larger or smaller buttons? Use the `size` property.
-{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
+{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## Standalone toggle button
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
+
+## Barrierefreiheit
+
+ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `<label>`.
+
+ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-es.md b/docs/src/pages/components/toggle-button/toggle-button-es.md
index c6d3f3b5af2d1b..5f96dceca76777 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-es.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-es.md
@@ -9,7 +9,7 @@ components: ToggleButton, ToggleButtonGroup
To emphasize groups of related [Toggle buttons](https://material.io/design/components/buttons.html#toggle-button), a group should share a common container.
-The `ToggleButtonGroup` will control the selected of its child buttons when given its own `value` prop.
+The `ToggleButtonGroup` will control the selected state of its child buttons when given its own `value` prop.
{{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
@@ -17,4 +17,14 @@ The `ToggleButtonGroup` will control the selected of its child buttons when give
Fancy larger or smaller buttons? Use the `size` property.
-{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
+{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## Standalone toggle button
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
+
+## Accesibilidad
+
+ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `<label>`.
+
+ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-fr.md b/docs/src/pages/components/toggle-button/toggle-button-fr.md
index 5ec6bf8896f61f..ac31ebe6f48e37 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-fr.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-fr.md
@@ -9,7 +9,7 @@ components: ToggleButton, ToggleButtonGroup
To emphasize groups of related [Toggle buttons](https://material.io/design/components/buttons.html#toggle-button), a group should share a common container.
-The `ToggleButtonGroup` will control the selected of its child buttons when given its own `value` prop.
+The `ToggleButtonGroup` will control the selected state of its child buttons when given its own `value` prop.
{{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
@@ -17,4 +17,14 @@ The `ToggleButtonGroup` will control the selected of its child buttons when give
Fancy larger or smaller buttons? Use the `size` property.
-{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
+{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## Standalone toggle button
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
+
+## Accessibilité
+
+ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `<label>`.
+
+ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-ja.md b/docs/src/pages/components/toggle-button/toggle-button-ja.md
index 3a30fbfd9843dc..500767d99ab392 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-ja.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-ja.md
@@ -9,7 +9,7 @@ components: ToggleButton, ToggleButtonGroup
関連する [Toggle buttons](https://material.io/design/components/buttons.html#toggle-button)のグループを強調するには、次の操作を行います。 グループは共通のコンテナーを共用する必要があります。
-`ToggleButtonGroup`は、次の場合に子ボタンの選択を制御します。 独自の`value`propが与えられます。
+`ToggleButtonGroup` は、 が独自の `値` propを指定したときに、子ボタンの選択状態を制御します。
{{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
@@ -17,4 +17,14 @@ components: ToggleButton, ToggleButtonGroup
大きなボタンと小さなボタンがありますか? `size`プロパティを使用します。
-{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
+{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## スタンドアロンのトグルボタン
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
+
+## アクセシビリティ
+
+ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `<label>`.
+
+ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-pt.md b/docs/src/pages/components/toggle-button/toggle-button-pt.md
index 5e248f78d26068..784f7848d44bbc 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-pt.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-pt.md
@@ -9,7 +9,7 @@ components: ToggleButton, ToggleButtonGroup
Para enfatizar grupos de [botões de alternância](https://material.io/design/components/buttons.html#toggle-button) relacionados, o grupo deve ter um container em comum.
-O `ToggleButtonGroup` controlará o selecionado de seus botões filhos quando receber sua propriedade `value`.
+The `ToggleButtonGroup` will control the selected state of its child buttons when given its own `value` prop.
{{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
@@ -17,4 +17,14 @@ O `ToggleButtonGroup` controlará o selecionado de seus botões filhos quando re
Gosta de botões maiores ou menores? Use a propriedade `size`.
-{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
+{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## Standalone toggle button
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
+
+## Acessibilidade
+
+ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `<label>`.
+
+ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-ru.md b/docs/src/pages/components/toggle-button/toggle-button-ru.md
index 915587f0fa52b7..1d94496c8af0b3 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-ru.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-ru.md
@@ -9,7 +9,7 @@ components: ToggleButton, ToggleButtonGroup
To emphasize groups of related [Toggle buttons](https://material.io/design/components/buttons.html#toggle-button), a group should share a common container.
-The `ToggleButtonGroup` will control the selected of its child buttons when given its own `value` prop.
+The `ToggleButtonGroup` will control the selected state of its child buttons when given its own `value` prop.
{{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
@@ -17,4 +17,14 @@ The `ToggleButtonGroup` will control the selected of its child buttons when give
Fancy larger or smaller buttons? Use the `size` property.
-{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
+{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## Standalone toggle button
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
+
+## Доступность
+
+ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `<label>`.
+
+ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-zh.md b/docs/src/pages/components/toggle-button/toggle-button-zh.md
index ada5c98965b12d..53243d75ab20ec 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-zh.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-zh.md
@@ -9,7 +9,7 @@ components: ToggleButton, ToggleButtonGroup
为了强调组合之间的关联，每一组 [Toggle buttons](https://material.io/design/components/buttons.html#toggle-button) 应该共享一个容器。
-当给 `ToggleButtonGroup` 自身的 `value` 属性赋值时，它可以控制哪个子按钮被选中。
+The `ToggleButtonGroup` will control the selected state of its child buttons when given its own `value` prop.
{{"demo": "pages/components/toggle-button/ToggleButtons.js"}}
@@ -17,4 +17,14 @@ components: ToggleButton, ToggleButtonGroup
想要更大或更小的按钮？ 你可以使用 `size` 属性。
-{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
+{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## Standalone toggle button
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
+
+## 可及性
+
+ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `<label>`.
+
+ToggleButton sets `aria-pressed="<bool>"` according to the button state. You should label each button with `aria-label`.
\ No newline at end of file
diff --git a/docs/src/pages/components/tooltips/tooltips-aa.md b/docs/src/pages/components/tooltips/tooltips-aa.md
index 9d30ac73e88e8a..a4392fdeb9f315 100644
--- a/docs/src/pages/components/tooltips/tooltips-aa.md
+++ b/docs/src/pages/components/tooltips/tooltips-aa.md
@@ -30,7 +30,7 @@ crwdns92460:0crwdne92460:0
crwdns92464:0crwdne92464:0 crwdns92466:0crwdne92466:0
```jsx
-crwdns92468:0crwdne92468:0
+crwdns101152:0crwdne101152:0
crwdns92470:0{...props}crwdne92470:0
crwdns92472:0crwdne92472:0
diff --git a/docs/src/pages/components/tooltips/tooltips-de.md b/docs/src/pages/components/tooltips/tooltips-de.md
index d29faa213c7456..c0d1f56a754789 100644
--- a/docs/src/pages/components/tooltips/tooltips-de.md
+++ b/docs/src/pages/components/tooltips/tooltips-de.md
@@ -21,7 +21,7 @@ The `Tooltip` has 12 **placements** choice. They don’t have directional arrows
## Benutzerdefinierte Tooltips
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+Here are some examples of customizing the component. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
@@ -31,7 +31,7 @@ The tooltip needs to apply DOM event listeners to its child element. If the chil
```jsx
function MyComponent(props) {
- // Wir geben die Eigenschaften auf das zugrunde liegende DOM-Element weiter.
+ // Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
diff --git a/docs/src/pages/components/tooltips/tooltips-es.md b/docs/src/pages/components/tooltips/tooltips-es.md
index 7d08214ba05d65..a487d4a1834761 100644
--- a/docs/src/pages/components/tooltips/tooltips-es.md
+++ b/docs/src/pages/components/tooltips/tooltips-es.md
@@ -31,7 +31,7 @@ The tooltip needs to apply DOM event listeners to its child element. If the chil
```jsx
function MyComponent(props) {
- // We spread the properties to the underlying DOM element.
+ // Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
diff --git a/docs/src/pages/components/tooltips/tooltips-fr.md b/docs/src/pages/components/tooltips/tooltips-fr.md
index c597441275d5c7..5a68d2d41812d7 100644
--- a/docs/src/pages/components/tooltips/tooltips-fr.md
+++ b/docs/src/pages/components/tooltips/tooltips-fr.md
@@ -31,7 +31,7 @@ The tooltip needs to apply DOM event listeners to its child element. If the chil
```jsx
function MyComponent(props) {
- // We spread the properties to the underlying DOM element.
+ // Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
diff --git a/docs/src/pages/components/tooltips/tooltips-ja.md b/docs/src/pages/components/tooltips/tooltips-ja.md
index 2ccd6cd9f2370f..78b746f5f828f6 100644
--- a/docs/src/pages/components/tooltips/tooltips-ja.md
+++ b/docs/src/pages/components/tooltips/tooltips-ja.md
@@ -21,7 +21,7 @@ components: Tooltip
## Customized tooltips
-コンポーネントのカスタマイズの例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。
+コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
@@ -31,7 +31,7 @@ components: Tooltip
```jsx
function MyComponent(props) {
- // We spread the properties to the underlying DOM element.
+ // Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
diff --git a/docs/src/pages/components/tooltips/tooltips-pt.md b/docs/src/pages/components/tooltips/tooltips-pt.md
index 7a80f33ab727aa..4f70eb05e30d48 100644
--- a/docs/src/pages/components/tooltips/tooltips-pt.md
+++ b/docs/src/pages/components/tooltips/tooltips-pt.md
@@ -30,8 +30,8 @@ Aqui estão alguns exemplos de customização do componente. Você pode aprender
A dica precisa aplicar ouvintes de evento DOM ao seu elemento filho. Se o filho for um elemento React personalizado, você precisará garantir que ele estenda suas propriedades para o elemento DOM subjacente.
```jsx
-function MyComponent (props) {
- // Distribuímos as propriedades para o elemento DOM subjacente.
+function MyComponent(props) {
+ // Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
diff --git a/docs/src/pages/components/tooltips/tooltips-ru.md b/docs/src/pages/components/tooltips/tooltips-ru.md
index c3cd3560dd0c68..1550a847bec213 100644
--- a/docs/src/pages/components/tooltips/tooltips-ru.md
+++ b/docs/src/pages/components/tooltips/tooltips-ru.md
@@ -31,7 +31,7 @@ The tooltip needs to apply DOM event listeners to its child element. If the chil
```jsx
function MyComponent(props) {
- // We spread the properties to the underlying DOM element.
+ // Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
diff --git a/docs/src/pages/components/tooltips/tooltips-zh.md b/docs/src/pages/components/tooltips/tooltips-zh.md
index 80b35c98ae646a..686e970fef3ad2 100644
--- a/docs/src/pages/components/tooltips/tooltips-zh.md
+++ b/docs/src/pages/components/tooltips/tooltips-zh.md
@@ -21,7 +21,7 @@ The `Tooltip` has 12 **placements** choice. They don’t have directional arrows
## Customized tooltips
-Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
@@ -31,7 +31,7 @@ The tooltip needs to apply DOM event listeners to its child element. If the chil
```jsx
function MyComponent(props) {
- // 我们将属性扩展到底层DOM元素。
+ // Spread the properties to the underlying DOM element.
return <div {...props}>Bin</div>
}
diff --git a/docs/src/pages/components/transfer-list/transfer-list-ja.md b/docs/src/pages/components/transfer-list/transfer-list-ja.md
index c52d4f82a9dc63..3f549a0b2b5622 100644
--- a/docs/src/pages/components/transfer-list/transfer-list-ja.md
+++ b/docs/src/pages/components/transfer-list/transfer-list-ja.md
@@ -3,18 +3,18 @@ title: 転送リストReactコンポーネント
components: List, ListItem, Checkbox, Switch
---
-# Transfer List
+# 転送リスト(Transfer List)
-<p class="description">A transfer list (or "shuttle") enables the user to move one or more list items between lists.</p>
+<p class="description">転送リスト("transfer list")（または"shuttle") を使用すると、ユーザーは1つ以上のリストアイテムをリスト間で移動できます。</p>
-## Simple Transfer List
+## シンプルな転送リスト(Transfer List) の場合
-For completeness, this example includes buttons for "move all", but not every transfer list needs these.
+完全を期すために、この例には「すべて移動」用のボタンが含まれていますが、すべての転送リストでこれらが必要なわけではありません。
{{"demo": "pages/components/transfer-list/TransferList.js"}}
-## Enhanced Transfer List
+## 拡張転送リスト(Enhanced Transfer List) の場合
-This example exchanges the "move all" buttons for a "select all / select none" checkbox, and adds a counter.
+この例では、「すべて移動」ボタンを「すべて選択/なしを選択」チェックボックスに交換し、カウンターを追加します。
{{"demo": "pages/components/transfer-list/SelectAllTransferList.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-pt.md b/docs/src/pages/components/tree-view/tree-view-pt.md
index 084382442f52ac..7f977618552299 100644
--- a/docs/src/pages/components/tree-view/tree-view-pt.md
+++ b/docs/src/pages/components/tree-view/tree-view-pt.md
@@ -13,10 +13,10 @@ As visualizações em árvore podem ser usadas para representar um navegador do
## Visualização em árvore customizada
-### Custom icons, border and animation
+### Ícones customizados, borda e animação
{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
-### Gmail clone
+### Clone do Gmail
{{"demo": "pages/components/tree-view/GmailTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-zh.md b/docs/src/pages/components/tree-view/tree-view-zh.md
index 7988483867c4cf..cdb8c3f29d4547 100644
--- a/docs/src/pages/components/tree-view/tree-view-zh.md
+++ b/docs/src/pages/components/tree-view/tree-view-zh.md
@@ -1,6 +1,6 @@
---
title: 树视图组件
-components: 树视图，树节点
+components: TreeView, TreeItem
---
# 树视图
diff --git a/docs/src/pages/components/typography/typography-aa.md b/docs/src/pages/components/typography/typography-aa.md
index 4214b49357063f..58dc8eec116ac9 100644
--- a/docs/src/pages/components/typography/typography-aa.md
+++ b/docs/src/pages/components/typography/typography-aa.md
@@ -53,7 +53,7 @@ crwdns92688:0crwdne92688:0 crwdns92690:0crwdne92690:0
- crwdns92692:0crwdne92692:0
```jsx
-crwdns92694:0crwdne92694:0 crwdns92696:0crwdne92696:0 crwdns92698:0crwdne92698:0
+crwdns101154:0crwdne101154:0 crwdns92696:0crwdne92696:0 crwdns92698:0crwdne92698:0
```
- crwdns92700:0crwdne92700:0
diff --git a/docs/src/pages/components/typography/typography-de.md b/docs/src/pages/components/typography/typography-de.md
index 13911cffd39867..91fe137960c3ba 100644
--- a/docs/src/pages/components/typography/typography-de.md
+++ b/docs/src/pages/components/typography/typography-de.md
@@ -53,7 +53,7 @@ Die Komponente Typografie verwendet die Eigenschaft `variantMapping` um eine UI-
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/* We already have an h1 in the page, let's not duplicate it. */}
+{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
diff --git a/docs/src/pages/components/typography/typography-es.md b/docs/src/pages/components/typography/typography-es.md
index c8062ba5e0af11..abdf4cb5d75bd2 100644
--- a/docs/src/pages/components/typography/typography-es.md
+++ b/docs/src/pages/components/typography/typography-es.md
@@ -53,7 +53,7 @@ The Typography component uses the `variantMapping` property to associate a UI va
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/* We already have an h1 in the page, let's not duplicate it. */}
+{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
diff --git a/docs/src/pages/components/typography/typography-fr.md b/docs/src/pages/components/typography/typography-fr.md
index 1ac3957068ad45..6caf216513eb70 100644
--- a/docs/src/pages/components/typography/typography-fr.md
+++ b/docs/src/pages/components/typography/typography-fr.md
@@ -53,7 +53,7 @@ The Typography component uses the `variantMapping` property to associate a UI va
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/* We already have an h1 in the page, let's not duplicate it. */}
+{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
diff --git a/docs/src/pages/components/typography/typography-ja.md b/docs/src/pages/components/typography/typography-ja.md
index 5c0f51f333ecc2..4d1908c9a1481f 100644
--- a/docs/src/pages/components/typography/typography-ja.md
+++ b/docs/src/pages/components/typography/typography-ja.md
@@ -53,7 +53,7 @@ Typographyコンポーネントは、 `variantMapping` プロパティを使用
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/* We already have an h1 in the page, let's not duplicate it. */}
+{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
diff --git a/docs/src/pages/components/typography/typography-pt.md b/docs/src/pages/components/typography/typography-pt.md
index 3f087ccd7682b5..4444c0db903751 100644
--- a/docs/src/pages/components/typography/typography-pt.md
+++ b/docs/src/pages/components/typography/typography-pt.md
@@ -2,7 +2,7 @@
components: Typography
---
-# Typography
+# Tipografia
<p class="description">Use a tipografia para apresentar seu design e conteúdo da forma mais clara e eficiente possível.</p>
@@ -53,7 +53,7 @@ O componente de Tipografia (Typography) usa a propriedade `variantMapping` para
- Você pode alterar o elemento subjacente para uma ocasião única com a propriedade `component`:
```jsx
-{/ * Já temos um h1 na página, não vamos duplicá-lo. */}
+{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
h1. Título
</Typography>
diff --git a/docs/src/pages/components/typography/typography-ru.md b/docs/src/pages/components/typography/typography-ru.md
index ae6e11ae5fd08d..9d198e386bd34a 100644
--- a/docs/src/pages/components/typography/typography-ru.md
+++ b/docs/src/pages/components/typography/typography-ru.md
@@ -53,7 +53,7 @@ The Typography component uses the `variantMapping` property to associate a UI va
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/* We already have an h1 in the page, let's not duplicate it. */}
+{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
diff --git a/docs/src/pages/components/typography/typography-zh.md b/docs/src/pages/components/typography/typography-zh.md
index 171916406ff4d9..3225ec9342ad28 100644
--- a/docs/src/pages/components/typography/typography-zh.md
+++ b/docs/src/pages/components/typography/typography-zh.md
@@ -53,7 +53,7 @@ Typography组件使用 `variantMapping` 属性将某一种UI变体与某一种
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/* We already have an h1 in the page, let's not duplicate it. */}
+{/* There is already an h1 in the page, let's not duplicate it. */}
<Typography variant="h1" component="h2">
h1. Heading
</Typography>
diff --git a/docs/src/pages/components/use-media-query/use-media-query-aa.md b/docs/src/pages/components/use-media-query/use-media-query-aa.md
index 5598045dea53f5..c6e7297cf2a0e5 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-aa.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-aa.md
@@ -45,7 +45,7 @@ crwdns92750:0crwdne92750:0
## crwdns92752:0crwdne92752:0
-crwdns92754:0crwdne92754:0 crwdns92756:0crwdne92756:0
+crwdns92754:0crwdne92754:0 crwdns101156:0crwdne101156:0
crwdns92758:0crwdne92758:0
@@ -61,7 +61,7 @@ crwdns92766:0crwdne92766:0 crwdns92768:0crwdne92768:0
crwdns92782:0crwdne92782:0
-crwdns92784:0crwdne92784:0 crwdns92786:0crwdne92786:0 crwdns92788:0crwdne92788:0
+crwdns92784:0crwdne92784:0 crwdns92786:0crwdne92786:0 crwdns101158:0crwdne101158:0
```js
crwdns92790:0{ width }crwdne92790:0
diff --git a/docs/src/pages/components/use-media-query/use-media-query-de.md b/docs/src/pages/components/use-media-query/use-media-query-de.md
index fcb5f46160f40b..0a9ff4f52fc9d8 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-de.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-de.md
@@ -59,7 +59,7 @@ You can use [json2mq](https://github.com/akiran/json2mq) to generate media query
## Server-Rendering
-An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
@@ -75,7 +75,7 @@ Try relying on client-side CSS media queries first. For instance, you could use:
Similar to the server-side case, you need an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your test environment.
-For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
```js
import mediaQuery from 'css-mediaquery';
diff --git a/docs/src/pages/components/use-media-query/use-media-query-es.md b/docs/src/pages/components/use-media-query/use-media-query-es.md
index 4adcf0bdbfae2a..41d405259f031e 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-es.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-es.md
@@ -59,7 +59,7 @@ You can use [json2mq](https://github.com/akiran/json2mq) to generate media query
## Server-side rendering
-An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
@@ -75,7 +75,7 @@ Try relying on client-side CSS media queries first. For instance, you could use:
Similar to the server-side case, you need an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your test environment.
-For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
```js
import mediaQuery from 'css-mediaquery';
diff --git a/docs/src/pages/components/use-media-query/use-media-query-fr.md b/docs/src/pages/components/use-media-query/use-media-query-fr.md
index 29faac4987c2be..67b35a33e7a2a2 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-fr.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-fr.md
@@ -59,7 +59,7 @@ You can use [json2mq](https://github.com/akiran/json2mq) to generate media query
## Server-side rendering
-An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
@@ -75,7 +75,7 @@ Try relying on client-side CSS media queries first. For instance, you could use:
Similar to the server-side case, you need an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your test environment.
-For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
```js
import mediaQuery from 'css-mediaquery';
diff --git a/docs/src/pages/components/use-media-query/use-media-query-ja.md b/docs/src/pages/components/use-media-query/use-media-query-ja.md
index ec57adecd96e3d..57ca03de69b12c 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-ja.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-ja.md
@@ -59,7 +59,7 @@ JavaScriptオブジェクトからメディアクエリ文字列を生成する
## サーバーサイドレンダリング
-サーバー上で [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) の実装が必要です。 [css-mediaquery](https://github.com/ericf/css-mediaquery)を使用してエミュレートすることをお勧めします。
+サーバー上で [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) の実装が必要です。 Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
@@ -75,7 +75,7 @@ Try relying on client-side CSS media queries first. たとえば、
サーバー側の場合と同様に、テスト環境では [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) 実装が必要です。
-たとえば、 [jsdomはまだサポートしていません](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html)。 ポリフィルしたほうがいいですよ。 [css-mediaquery](https://github.com/ericf/css-mediaquery)を使用してエミュレートすることをお勧めします。
+たとえば、 [jsdomはまだサポートしていません](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html)。 ポリフィルしたほうがいいですよ。 Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
```js
import mediaQuery from 'css-mediaquery';
diff --git a/docs/src/pages/components/use-media-query/use-media-query-pt.md b/docs/src/pages/components/use-media-query/use-media-query-pt.md
index 9bb21de02aff09..4bf734426ccf9d 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-pt.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-pt.md
@@ -59,7 +59,7 @@ Você pode usar [json2mq](https://github.com/akiran/json2mq) para gerar uma stri
## Renderização no servidor (Server-Side Rendering)
-Uma implementação de [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) é necessária no servidor. Recomendamos usar [css-mediaquery](https://github.com/ericf/css-mediaquery) para emulá-lo.
+Uma implementação de [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) é necessária no servidor. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
@@ -75,7 +75,7 @@ Tente confiar em consultas de mídia CSS do lado do cliente primeiro. Por exempl
Semelhante ao caso do lado do servidor, você precisa de uma implementação de [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) em seu ambiente de teste.
-Por exemplo, [jsdom não suporta ainda](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). Você deve usar um polyfill para isso. Recomendamos usar [css-mediaquery](https://github.com/ericf/css-mediaquery) para emulá-lo.
+Por exemplo, [jsdom não suporta ainda](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). Você deve usar um polyfill para isso. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
```js
import mediaQuery from 'css-mediaquery';
diff --git a/docs/src/pages/components/use-media-query/use-media-query-ru.md b/docs/src/pages/components/use-media-query/use-media-query-ru.md
index 549b6612545a80..7cb86a6842ed31 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-ru.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-ru.md
@@ -59,7 +59,7 @@ You can use [json2mq](https://github.com/akiran/json2mq) to generate media query
## Server-side rendering
-An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
@@ -75,7 +75,7 @@ Try relying on client-side CSS media queries first. For instance, you could use:
Similar to the server-side case, you need an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your test environment.
-For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
```js
import mediaQuery from 'css-mediaquery';
diff --git a/docs/src/pages/components/use-media-query/use-media-query-zh.md b/docs/src/pages/components/use-media-query/use-media-query-zh.md
index 4fb7766bfa1c18..dbace4f9ad4f88 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-zh.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-zh.md
@@ -59,7 +59,7 @@ You can use [json2mq](https://github.com/akiran/json2mq) to generate media query
## Server-side rendering
-An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
@@ -75,7 +75,7 @@ Try relying on client-side CSS media queries first. For instance, you could use:
Similar to the server-side case, you need an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your test environment.
-For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. Using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it is recommended.
```js
import mediaQuery from 'css-mediaquery';
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-aa.md b/docs/src/pages/customization/breakpoints/breakpoints-aa.md
index 389adda85852a9..e8052d5b33d9c1 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-aa.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-aa.md
@@ -24,7 +24,7 @@ crwdns92872:0crwdne92872:0
## crwdns92874:0crwdne92874:0
-crwdns92876:0crwdne92876:0 crwdns92878:0crwdne92878:0
+crwdns101160:0crwdne101160:0 crwdns101162:0crwdne101162:0
- [crwdns92882:0crwdne92882:0](crwdns92880:0crwdne92880:0)
- [crwdns92886:0crwdne92886:0](crwdns92884:0crwdne92884:0)
@@ -172,4 +172,8 @@ crwdns93040:0crwdne93040:0
```jsx
crwdns100448:0{ isWidthUp }crwdne100448:0
-```
\ No newline at end of file
+```
+
+## crwdns100952:0crwdne100952:0
+
+crwdns100954:0crwdne100954:0
\ No newline at end of file
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-de.md b/docs/src/pages/customization/breakpoints/breakpoints-de.md
index 294032641127b4..2e3a0869133143 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-de.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-de.md
@@ -27,7 +27,7 @@ Die Haltepunkte werden intern in verschiedenen Komponenten verwendet, um sie ans
## CSS-Medienabfragen
-CSS-Medienabfragen sind der idiomatische Ansatz, um Ihre Benutzeroberfläche ansprechbar zu machen. Dafür bieten wir vier Stilhelfer an:
+CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:
- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
@@ -238,4 +238,8 @@ function MyComponent(props) {
}
export default withWidth()(MyComponent);
-```
\ No newline at end of file
+```
+
+## Default values
+
+You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expend-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-es.md b/docs/src/pages/customization/breakpoints/breakpoints-es.md
index dafce93a9c65d7..5046857d060fc6 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-es.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-es.md
@@ -27,7 +27,7 @@ The breakpoints are used internally in various components to make them responsiv
## CSS Media Queries
-CSS media queries is the idiomatic approach to make your UI responsive. We provide four styles helpers to do so:
+CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:
- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
@@ -238,4 +238,8 @@ function MyComponent(props) {
}
export default withWidth()(MyComponent);
-```
\ No newline at end of file
+```
+
+## Default values
+
+You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expend-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-fr.md b/docs/src/pages/customization/breakpoints/breakpoints-fr.md
index c9acc5d5aa49b8..208e5cd69e55fb 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-fr.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-fr.md
@@ -27,7 +27,7 @@ The breakpoints are used internally in various components to make them responsiv
## CSS Media Queries
-CSS media queries is the idiomatic approach to make your UI responsive. We provide four styles helpers to do so:
+CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:
- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
@@ -238,4 +238,8 @@ function MyComponent(props) {
}
export default withWidth()(MyComponent);
-```
\ No newline at end of file
+```
+
+## Default values
+
+You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expend-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ja.md b/docs/src/pages/customization/breakpoints/breakpoints-ja.md
index 2820f8c6dbe5d5..31131dd670b7ff 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-ja.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-ja.md
@@ -27,7 +27,7 @@ range | xs | sm | md | lg | xl
## CSSメディアクエリ
-CSSメディアクエリは、UIを応答性にする慣用的な手法です。 そのために、4つのスタイルヘルパーを提供します。
+CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:
- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
@@ -239,4 +239,8 @@ function MyComponent(props) {
}
export default withWidth()(MyComponent);
-```
\ No newline at end of file
+```
+
+## Default values
+
+You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expend-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-pt.md b/docs/src/pages/customization/breakpoints/breakpoints-pt.md
index 8567d64dac69c5..762fed3e5f2062 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-pt.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-pt.md
@@ -27,7 +27,7 @@ Os pontos de quebra são usados internamente em vários componentes para torná-
## Consultas de Mídia CSS
-Consultas de mídia CSS é a abordagem idiomática para tornar sua interface de usuário responsiva. Nós fornecemos quatro ajudantes de estilos para fazer isso:
+CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:
- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
@@ -238,4 +238,8 @@ function MyComponent(props) {
}
export default withWidth()(MyComponent);
-```
\ No newline at end of file
+```
+
+## Default values
+
+You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expend-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ru.md b/docs/src/pages/customization/breakpoints/breakpoints-ru.md
index 8cfbc263032bc2..efaddf4200e785 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-ru.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-ru.md
@@ -27,7 +27,7 @@ The breakpoints are used internally in various components to make them responsiv
## CSS Media Queries
-CSS media queries is the idiomatic approach to make your UI responsive. We provide four styles helpers to do so:
+CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:
- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
@@ -238,4 +238,8 @@ function MyComponent(props) {
}
export default withWidth()(MyComponent);
-```
\ No newline at end of file
+```
+
+## Default values
+
+You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expend-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-zh.md b/docs/src/pages/customization/breakpoints/breakpoints-zh.md
index 19ebf6369f194d..27ff0e92501f31 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-zh.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-zh.md
@@ -27,7 +27,7 @@ range | xs | sm | md | lg | xl
## CSS 媒体查询
-CSS 媒体查询是让 UI 具有响应性的惯用做法。 We provide four styles helpers to do so:
+CSS media queries are the idiomatic approach to make your UI responsive. The theme provides four styles helpers to do so:
- [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
- [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
@@ -238,4 +238,8 @@ function MyComponent(props) {
}
export default withWidth()(MyComponent);
-```
\ No newline at end of file
+```
+
+## Default values
+
+You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expend-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-aa.md b/docs/src/pages/customization/color/color-aa.md
index 444cfda7497ada..49b457e2594b40 100644
--- a/docs/src/pages/customization/color/color-aa.md
+++ b/docs/src/pages/customization/color/color-aa.md
@@ -58,7 +58,7 @@ crwdns93106:0crwdne93106:0
crwdns93110:0crwdne93110:0 crwdns93112:0crwdne93112:0
-<a href="crwdns93114:0crwdne93114:0">
+<a href="crwdns93114:0crwdne93114:0" target="_blank" rel="noopener nofollow">
<img src="crwdns93116:0crwdne93116:0" alt="crwdns93118:0crwdne93118:0" style="width: 574px" />
</a>
@@ -70,6 +70,6 @@ crwdns93122:0{ createMuiTheme }crwdne93122:0
### crwdns93124:0crwdne93124:0
-- crwdns93126:0crwdne93126:0
-- crwdns93128:0crwdne93128:0
+- crwdns100876:0crwdne100876:0
+- crwdns100878:0crwdne100878:0
- crwdns93130:0crwdne93130:0
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-de.md b/docs/src/pages/customization/color/color-de.md
index 738d48abbd5c1d..1389ea148a93d5 100644
--- a/docs/src/pages/customization/color/color-de.md
+++ b/docs/src/pages/customization/color/color-de.md
@@ -73,7 +73,7 @@ Wenn Sie die standardmäßigen primären und / oder sekundären Farbtöne verwen
Das Material Design Team hat auch ein tolles Tool zur Palettenkonfiguration entwickelt: [material.io/tools/color](https://material.io/tools/color/). Auf diese Weise können Sie eine Farbpalette für Ihre Benutzeroberfläche erstellen und die Zugänglichkeit einer beliebigen Farbkombination messen.
-<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336">
+<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336" target="_blank" rel="noopener nofollow">
<img src="/static/images/color/colorTool.png" alt="Offizielles Farbwerkzeug" style="width: 574px" />
</a>
@@ -102,6 +102,6 @@ const theme = createMuiTheme({
### Werkzeuge von der Community
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Ist ein Online-Tool zum Erstellen von Material-UI-Designs mit dem Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) Ein Tool zum Erstellen von Designs für Ihre Material-UI-Anwendungen, indem Sie einfach die Farben auswählen und eine Live-Vorschau angezeigt bekommen.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
- [Material palette generator](https://material.io/inline-tools/color/): Mit dem Material-Palettengenerator können Sie eine Palette für jede von Ihnen eingegebene Farbe erstellen.
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-es.md b/docs/src/pages/customization/color/color-es.md
index ba6574d20ae46f..b4770dbcc05466 100644
--- a/docs/src/pages/customization/color/color-es.md
+++ b/docs/src/pages/customization/color/color-es.md
@@ -73,7 +73,7 @@ If you are using the default primary and / or secondary shades then by providing
The Material Design team has also built an awesome palette configuration tool: [material.io/tools/color](https://material.io/tools/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
-<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336">
+<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336" target="_blank" rel="noopener nofollow">
<img src="/static/images/color/colorTool.png" alt="Official color tool" style="width: 574px" />
</a>
@@ -102,6 +102,6 @@ const theme = createMuiTheme({
### Tools by the community
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Is an online tool for creating Material-UI themes via Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-fr.md b/docs/src/pages/customization/color/color-fr.md
index 6ac16f10382662..d85b877fe5eecf 100644
--- a/docs/src/pages/customization/color/color-fr.md
+++ b/docs/src/pages/customization/color/color-fr.md
@@ -73,7 +73,7 @@ If you are using the default primary and / or secondary shades then by providing
The Material Design team has also built an awesome palette configuration tool: [material.io/tools/color](https://material.io/tools/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
-<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336">
+<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336" target="_blank" rel="noopener nofollow">
<img src="/static/images/color/colorTool.png" alt="Official color tool" style="width: 574px" />
</a>
@@ -102,6 +102,6 @@ const theme = createMuiTheme({
### Tools by the community
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Is an online tool for creating Material-UI themes via Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-ja.md b/docs/src/pages/customization/color/color-ja.md
index a6dc4d9c2be4ba..b606381081bfc5 100644
--- a/docs/src/pages/customization/color/color-ja.md
+++ b/docs/src/pages/customization/color/color-ja.md
@@ -73,7 +73,7 @@ const theme = createMuiTheme({
Material Designチームは素晴らしいパレット設定ツール、[materialio/tools/color](https://material.io/tools/color/)も開発しました。 これにより、UIのカラーパレットを作成したり、任意のカラー組み合わせのアクセシビリティレベルを測定したりできます。
-<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336">
+<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336" target="_blank" rel="noopener nofollow">
<img src="/static/images/color/colorTool.png" alt="公式カラーツール" style="width: 574px" />
</a>
@@ -102,6 +102,6 @@ const theme = createMuiTheme({
### コミュニティによるツール
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/)はMaterial Design Color Toolを使用してMaterial-UIテーマを作成するためのオンラインツールです。
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/)は、カラーを選択してライブプレビューを表示するだけで、Material-UIアプリケーションのテーマを生成するツールです。
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
- [マテリアルパレットジェネレータ](https://material.io/inline-tools/color/) : マテリアルパレットジェネレータを使用して、入力した任意のカラーのパレットを生成できます。
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-pt.md b/docs/src/pages/customization/color/color-pt.md
index cb39ac7e4dc4e0..ef9f1829735bfb 100644
--- a/docs/src/pages/customization/color/color-pt.md
+++ b/docs/src/pages/customization/color/color-pt.md
@@ -73,7 +73,7 @@ Se você estiver usando os tons primário e / ou secundário por padrão, fornec
A equipe do Material Design também criou uma ferramenta de configuração de paleta incrível: [material.io/tools/color](https://material.io/tools/color/). Isso pode ajudar você a criar uma paleta de cores para sua UI, bem como medir o nível de acessibilidade de qualquer combinação de cores.
-<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336">
+<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336" target="_blank" rel="noopener nofollow">
<img src="/static/images/color/colorTool.png" alt="Ferramenta oficial de cores" style="width: 574px" />
</a>
@@ -102,6 +102,6 @@ const theme = createMuiTheme({
### Ferramentas da comunidade
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) É uma ferramenta online para criar temas de Material-UI por meio da ferramenta de cor do Material Design.
-- [material-ui-tema-editor](https://in-your-saas.github.io/material-ui-theme-editor/) Uma ferramenta para gerar temas para seus aplicativos de Material-UI, basta selecionar as cores e ter uma visualização ao vivo.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
- [Material palette generator](https://material.io/inline-tools/color/): O gerador de paleta do Material pode ser usado para gerar uma paleta para qualquer cor que você inserir.
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-ru.md b/docs/src/pages/customization/color/color-ru.md
index d749b4bcb85737..95f7e8f9638b5e 100644
--- a/docs/src/pages/customization/color/color-ru.md
+++ b/docs/src/pages/customization/color/color-ru.md
@@ -73,7 +73,7 @@ If you are using the default primary and / or secondary shades then by providing
The Material Design team has also built an awesome palette configuration tool: [material.io/tools/color](https://material.io/tools/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
-<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336">
+<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336" target="_blank" rel="noopener nofollow">
<img src="/static/images/color/colorTool.png" alt="Официальный инструмент для работы с цветом" style="width: 574px" />
</a>
@@ -102,6 +102,6 @@ const theme = createMuiTheme({
### Инструменты, созданные сообществом
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Это онлайн-инструмент для создания тем Material-UI с помощью Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) Инструмент с функцией предварительного просмотра в реальном времени, который позволяет создавать темы для ваших Material-UI приложений, просто выбирая цвета.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
- [Material palette generator](https://material.io/inline-tools/color/): Этот инструмент можно использовать для создания палитры на основе любого выбранного цвета.
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-zh.md b/docs/src/pages/customization/color/color-zh.md
index 65138a1d71a971..5692ed7781efc8 100644
--- a/docs/src/pages/customization/color/color-zh.md
+++ b/docs/src/pages/customization/color/color-zh.md
@@ -73,7 +73,7 @@ const theme = createMuiTheme({
Material Design 团队提供了一款令人赞叹的调色板配置工具：[material.io/tools/color](https://material.io/tools/color/)。 它会帮助你为你的 UI 建立自己的色彩集合，同时也会帮助测量每个颜色组合的可访问性。
-<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336">
+<a href="https://material.io/tools/color/#!/?view.left=0&view.right=0&primary.color=3F51B5&secondary.color=F44336" target="_blank" rel="noopener nofollow">
<img src="/static/images/color/colorTool.png" alt="官方色彩工具" style="width: 574px" />
</a>
@@ -102,6 +102,6 @@ const theme = createMuiTheme({
### 社区工具
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) 是一款使用 Material Design 创建 Material-UI 主题的在线工具。
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) 一款只需要选择颜色即可为你的 Material-UI 应用生成主题的工具，同时还支持在线预览。
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
- [Material调色板生成器](https://material.io/inline-tools/color/)：Material调色板生成器可用于通过您输入的任何颜色生成调色板。
\ No newline at end of file
diff --git a/docs/src/pages/customization/components/components-aa.md b/docs/src/pages/customization/components/components-aa.md
index 2eabd4f2d1acb3..12b436373319c3 100644
--- a/docs/src/pages/customization/components/components-aa.md
+++ b/docs/src/pages/customization/components/components-aa.md
@@ -71,7 +71,7 @@ crwdns93226:0crwdne93226:0 crwdns93228:0crwdne93228:0
crwdns93230:0crwdne93230:0 crwdns93232:0crwdne93232:0
```css
-crwdns93234:0crwdne93234:0
+crwdns101164:0crwdne101164:0
```
```jsx
@@ -81,7 +81,7 @@ crwdns93236:0crwdne93236:0
crwdns93238:0crwdne93238:0 crwdns93240:0crwdne93240:0 crwdns93242:0crwdne93242:0
```css
-crwdns93244:0crwdne93244:0
+crwdns101166:0crwdne101166:0
```
```jsx
@@ -109,7 +109,7 @@ crwdns93258:0crwdne93258:0 crwdns93260:0crwdne93260:0
```css
-crwdns93298:0crwdne93298:0
+crwdns101168:0crwdne101168:0
```
```jsx
@@ -208,7 +208,7 @@ crwdns93398:0crwdne93398:0
### crwdns93400:0crwdne93400:0
-crwdns93402:0crwdne93402:0 crwdns93404:0crwdne93404:0 crwdns93406:0crwdne93406:0
+crwdns93402:0crwdne93402:0 crwdns101170:0crwdne101170:0 crwdns93406:0crwdne93406:0
```jsx
crwdns93408:0crwdne93408:0
diff --git a/docs/src/pages/customization/components/components-de.md b/docs/src/pages/customization/components/components-de.md
index f63dbcd006335d..664fee2def9d6e 100644
--- a/docs/src/pages/customization/components/components-de.md
+++ b/docs/src/pages/customization/components/components-de.md
@@ -85,7 +85,7 @@ Um die internen Zustände der Komponenten zu überschreiben, **müssen Sie die S
.Button {
color: black;
}
-.Button:disabled { /* We increase the specificity */
+.Button:disabled { /* Increase the specificity */
color: white;
}
```
@@ -100,7 +100,7 @@ Manchmal können Sie keine **Pseudoklasse** verwenden, da der Zustand nicht in d
.MenuItem {
color: black;
}
-.MenuItem.selected { /* We increase the specificity */
+.MenuItem.selected { /* Increase the specificity */
color: blue;
}
```
@@ -133,7 +133,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
.MenuItem {
color: black;
}
-.MenuItem.Mui-selected { /* We increase the specificity */
+.MenuItem.Mui-selected { /* Increase the specificity */
color: blue;
}
```
@@ -251,7 +251,7 @@ const theme = createMuiTheme({
### Globales CSS überschreiben
-Sie können auch alle Instanzen einer Komponente mit CSS anpassen. Wir legen [globale Klassennamen](/styles/advanced/#with-material-ui-core) offen, um das zu tun. Es ist sehr ähnlich, wie Sie Bootstrap anpassen würden.
+Sie können auch alle Instanzen einer Komponente mit CSS anpassen. Components expose [global class names](/styles/advanced/#with-material-ui-core) to enable this. Es ist sehr ähnlich, wie Sie Bootstrap anpassen würden.
```jsx
const GlobalCss = withStyles({
diff --git a/docs/src/pages/customization/components/components-es.md b/docs/src/pages/customization/components/components-es.md
index 0e3742023377ed..a068c1e09ed0ed 100644
--- a/docs/src/pages/customization/components/components-es.md
+++ b/docs/src/pages/customization/components/components-es.md
@@ -85,7 +85,7 @@ In order to override the components special states, **you need to increase speci
.Button {
color: black;
}
-.Button:disabled { /* We increase the specificity */
+.Button:disabled { /* Increase the specificity */
color: white;
}
```
@@ -100,7 +100,7 @@ A veces, no puedes usar **pseudo-class** ya que el estado no existe en la plataf
.MenuItem {
color: black;
}
-.MenuItem.selected { /* We increase the specificity */
+.MenuItem.selected { /* Increase the specificity */
color: blue;
}
```
@@ -133,7 +133,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
.MenuItem {
color: black;
}
-.MenuItem.Mui-selected { /* We increase the specificity */
+.MenuItem.Mui-selected { /* Increase the specificity */
color: blue;
}
```
@@ -251,7 +251,7 @@ const theme = createMuiTheme({
### Global CSS override
-You can also customize all instances of a component with CSS. We expose [global class names](/styles/advanced/#with-material-ui-core) to do so. It's very similar to how you would customize Bootstrap.
+You can also customize all instances of a component with CSS. Components expose [global class names](/styles/advanced/#with-material-ui-core) to enable this. It's very similar to how you would customize Bootstrap.
```jsx
const GlobalCss = withStyles({
diff --git a/docs/src/pages/customization/components/components-fr.md b/docs/src/pages/customization/components/components-fr.md
index 6eeb6e13a8b623..c315cfcf76d2f4 100644
--- a/docs/src/pages/customization/components/components-fr.md
+++ b/docs/src/pages/customization/components/components-fr.md
@@ -85,7 +85,7 @@ In order to override the components special states, **you need to increase speci
.Button {
color: black;
}
-.Button:disabled { /* We increase the specificity */
+.Button:disabled { /* Increase the specificity */
color: white;
}
```
@@ -100,7 +100,7 @@ Sometimes, you can't use a **pseudo-class** as the state doesn't exist in the pl
.MenuItem {
color: black;
}
-.MenuItem.selected { /* We increase the specificity */
+.MenuItem.selected { /* Increase the specificity */
color: blue;
}
```
@@ -133,7 +133,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
.MenuItem {
color: black;
}
-.MenuItem.Mui-selected { /* We increase the specificity */
+.MenuItem.Mui-selected { /* Increase the specificity */
color: blue;
}
```
@@ -251,7 +251,7 @@ const theme = createMuiTheme({
### Global CSS override
-You can also customize all instances of a component with CSS. We expose [global class names](/styles/advanced/#with-material-ui-core) to do so. It's very similar to how you would customize Bootstrap.
+You can also customize all instances of a component with CSS. Components expose [global class names](/styles/advanced/#with-material-ui-core) to enable this. It's very similar to how you would customize Bootstrap.
```jsx
const GlobalCss = withStyles({
diff --git a/docs/src/pages/customization/components/components-ja.md b/docs/src/pages/customization/components/components-ja.md
index 2096006a71d246..f1b2f4d272570d 100644
--- a/docs/src/pages/customization/components/components-ja.md
+++ b/docs/src/pages/customization/components/components-ja.md
@@ -1,60 +1,65 @@
-# Customizing components
+# コンポーネントのカスタマイズ
-<p class="description">You can easily customize the appearance of a Material-UI component.</p>
+<p class="description">Material-UIコンポーネントの外観を簡単にカスタマイズできます。</p>
-As components can be used in different contexts, there are several approaches to this. Going from the narrowest use-case to the broadest, these are:
+コンポーネントはさまざまなコンテキストで使用できるため、これにはいくつかのアプローチがあります。 最小のユースケースから最大のユースケースまで、次をご覧ください
-1. [Specific variation for a one-time situation](#1-specific-variation-for-a-one-time-situation)
-2. [Dynamic variation for a one-time situation](#2-dynamic-variation-for-a-one-time-situation)
-3. [Specific variation of a component](#3-specific-variation-of-a-component) re-used in different contexts
-4. [Material Design variations](#4-material-design-variations) such as with the button component
+1. [一時的な状況の特定のバリエーション](#1-specific-variation-for-a-one-time-situation)
+2. [1回の状況に対する動的変化](#2-dynamic-variation-for-a-one-time-situation)
+3. 異なるコンテキストで再使用される[特定のバリエーションのコンポーネント](#3-specific-variation-of-a-component)
+4. [Material Design variations](#4-material-design-variations)のボタンコンポーネントなど
5. [グローバルテーマバリエーション](#5-global-theme-variation)
-## 1. Specific variation for a one-time situation
+## 1. 一時的な状況の特定のバリエーション
-You might need to change the style of a component for a specific implementation, for which you have the following solutions available:
+次のソリューションを使用できる特定の実装のコンポーネントのスタイルを変更する必要がある場合があります。
-### Overriding styles with class names
+### クラス名でスタイルをオーバーライドする
-The first way to override the style of a component is to use **class names**. Every component provides a `className` property which is always applied to the root element.
+コンポーネントのスタイルをオーバーライドする最初の方法は、**class names**を使用することです。 すべてのコンポーネントには、常にルート要素に適用される`className`プロパティがあります。
-This example uses the [`withStyles()`](/styles/basics/#higher-order-component-api) higher-order component to inject custom styles into the DOM, and to pass the class name to the `ClassNames` component via its `classes` property. You can choose [any other styling solution](/guides/interoperability/), or even plain CSS to create the styles, but be sure to consider the [CSS injection order](/styles/advanced/#css-injection-order), as the CSS injected into the DOM by Material-UI to style a component has the highest specificity possible, since the `<link>` is injected at the bottom of the `<head />` to ensure the components always render correctly.
+この例では、[`withStyles()`](/styles/basics/#higher-order-component-api)の高次(higher-order) を使用します。 コンポーネントの`classes`プロパティを使用して、カスタムスタイルをDOMに挿入し、クラス名を`ClassNames`コンポーネントに渡します。 他のスタイリングソリューション</a>、またはプレーンCSSを選択してスタイルを作成することもできますが、必ず CSSがDOMに注入されるときの[CSS注入順序](/styles/advanced/#css-injection-order)を考えてみてください。 Material-UIを使用してコンポーネントをスタイル設定すると、`<link>`が下に挿入されるため、高い特異性が得られます。 の`<head />`を使用して、コンポーネントが常に正しくレンダリングされるようにします。
{{"demo": "pages/customization/components/ClassNames.js"}}
-### Overriding styles with classes
+### クラスでスタイルをオーバーライドする
-When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component.
+`className`プロパティでは不十分で、より深い要素にアクセスする必要がある場合は、`classes`オブジェクトプロパティを利用して、特定のコンポーネントに対してMaterial-UIによって注入されるすべてのCSSをカスタマイズできます。
-The list of classes for each component is documented in the component API page, you should refer to the **CSS section** and **rule name column**. For instance, you can have a look at the [Button CSS API](/api/button/#css). Alternatively, you can use the [browser dev tools](#using-the-dev-tools).
+それぞれのクラスのリスト コンポーネントについては、コンポーネントAPIページの**CSS section**および**rule name column**を参照してください。 例えば、[Button CSS API](/api/button/#css)で見ることができます。 文 または、[browser dev tools](#using-the-dev-tools)を使用することもできます。
-This example also uses `withStyles()` (see above), but here, `ClassesNesting` is using `Button`'s `classes` prop to provide an object that maps the **names of classes to override** (style rules) to the **CSS class names to apply** (values). The component's existing classes will continue to be injected, so it is only necessary to provide the specific styles you wish to add or override.
+この例では、`withStyles()`</code></code>も使用していますが、ここでは、`ClassesNesting(上記参照) は<code>Button`の`classes propを使用して、
+オーバーライドするクラスの<strong>名</strong>を適用するCSSクラス名(スタイルルール)</strong>にマップするオブジェクトを提供します(values)。
+コンポーネントの既存のクラスは引き続き注入されるため、必要なのは特定のスタイルを指定することだけです。
+追加またはオーバーライドします。</p>
-Notice that in addition to the button styling, the button label's capitalization has been changed:
+<p>Notice that in addition to the button styling, the button label's capitalization has been changed:</p>
-{{"demo": "pages/customization/components/ClassesNesting.js"}}
+<p>{{"demo": "pages/customization/components/ClassesNesting.js"}}</p>
-### Overriding styles with global class names
+<h3>グローバルクラス名でスタイルをオーバーライドする</h3>
-[Follow this section](/styles/advanced/#with-material-ui-core).
+<p><a href="/styles/advanced/#with-material-ui-core">このセクションに従ってください</a> 。</p>
-### Using the dev tools
+<h3>開発ツール(dev tools) を使用する</h3>
-The browser dev tools can save you a lot of time. Material-UI's class names [follow a simple pattern](/styles/advanced/#class-names) in development mode: `Mui[component name]-[style rule name]-[UUID]`.
+<p>ブラウザ開発ツールを使えば、時間を大幅に節約できます。
+Material-UIのクラス名は、開発モードでは<a href="/styles/advanced/#class-names"> a simple patternに従います</a>。
+<code>Mui[component name]-[style rule name]-[UUID]`。
-Let's go back to the above demo. How can you override the button label?
+上記のデモに戻りましょう。 ボタン・ラベルを上書きする方法は?
-Using the dev tools, you know that you need to target the `Button` component and the `label` style rule:
+開発ツールを使用して、`Button`コンポーネントと`label`スタイルルールをターゲットにする必要があることがわかります。
```jsx
<Button classes={{ label: 'my-class-name' }} />
```
-### Shorthand
+### ショートハンド
-The above code example can be condensed by using **the same CSS API** as the child component. In this example, the `withStyles()` higher-order component is injecting a `classes` property that is used by the [`Button` component](/api/button/#css).
+上記のコード例は、子コンポーネントとして**同じCSS API**を使用することで要約できます。 この例では、`withStyles()`の上位(高次) コンポーネントは、[`Button`コンポーネント](/api/button/#css)が使用する`classes`プロパティーを注入しています。
```jsx
const StyledButton = withStyles({
@@ -75,17 +80,17 @@ const StyledButton = withStyles({
{{"demo": "pages/customization/components/ClassesShorthand.js"}}
-### Pseudo-classes
+### 擬似クラス
-The components special states, like *hover*, *focus*, *disabled* and *selected*, are styled with a higher CSS specificity. [Specificity is a weight](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) that is applied to a given CSS declaration.
+*hover*、*focus*、*disabled*、*selected*などのコンポーネントの特殊状態は、より高いCSS 特異性(specificity) が設定されています。 [Specificityは、特定のCSS宣言に適用されるウェイト](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)です。
-In order to override the components special states, **you need to increase specificity**. Here is an example with the *disable* state and the button component using a **pseudo-class** (`:disabled`):
+コンポーネントの特別な状態をオーバーライドするには、**特異性を高める必要があります** 。 *disable*状態と、 **pseudo-class**(`:disabled`)を使用したボタンコンポーネントの例を示します。
```css
.Button {
color: black;
}
-.Button:disabled { /* We increase the specificity */
+.Button:disabled { /* Increase the specificity */
color: white;
}
```
@@ -94,13 +99,13 @@ In order to override the components special states, **you need to increase speci
<Button disabled className="Button">
```
-時にはこのプラットフォームではstateとして**pseudo-class**は使うことができない。 メニュー項目の構成要素と*選ばれた*例として述べる。 Aside from accessing nested elements, the `classes` property can be used to customize the special states of Material-UI components:
+時にはこのプラットフォームではstateとして**pseudo-class**は使うことができない。 メニュー項目の構成要素と*選ばれた*例として述べる。 ネストされた要素にアクセスする以外にも、`classes`プロパティを使用して、Material-UIコンポーネントの特殊な状態をカスタマイズできます。
```css
.MenuItem {
color: black;
}
-.MenuItem.selected { /* We increase the specificity */
+.MenuItem.selected { /* Increase the specificity */
color: blue;
}
```
@@ -109,13 +114,13 @@ In order to override the components special states, **you need to increase speci
<MenuItem selected classes={{ root: 'MenuItem', selected: 'selected' }}>
```
-#### Why do I need to increase specificity to override one component state?
+#### 1つのコンポーネント状態をオーバーライドするために、特異性を高める必要があるのはなぜですか。
-By design, the CSS specification makes the pseudo-classes increase the specificity. For consistency, Material-UI increases the specificity of its custom pseudo-classes. This has one important advantage, it allows you to cherry-pick the state you want to customize.
+設計上、CSS仕様では疑似クラスを使用することで、特定性を高めています。 一貫性を保つために、Material-UIはそのカスタム擬似クラスの特異性を高めます。 これには重要な利点が1つあり、カスタマイズしたい状態を選択することができます。
-#### Can I use a different API that requires fewer boilerplate?
+#### より少ない定型文を必要とする別のAPIを使用できますか?
-Instead of providing values to the `classes` prop API, you can rely on [the global class names](/styles/advanced/#with-material-ui-core) generated by Material-UI. It implements all these custom pseudo-classes:
+`classes` prop APIに値を指定する代わりに、Material-UIによって生成される[the global class names](/styles/advanced/#with-material-ui-core) を使用できます。 これらすべてのカスタム擬似クラスを実装します。
| クラスキー | グローバルクラス名 |
|:------------ |:---------------- |
@@ -133,7 +138,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
.MenuItem {
color: black;
}
-.MenuItem.Mui-selected { /* We increase the specificity */
+.MenuItem.Mui-selected { /* Increase the specificity */
color: blue;
}
```
@@ -142,9 +147,9 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
<MenuItem selected className="MenuItem">
```
-### Use `$ruleName` to reference a local rule within the same style sheet
+### 同じスタイルシート内のローカルルールを参照するには、`$ruleName`を使用します
-The [jss-nested](https://github.com/cssinjs/jss-nested) plugin (available by default) can make the process of increasing specificity easier.
+[jss-nested](https://github.com/cssinjs/jss-nested)プラグイン(デフォルトで使用可能) は、特異性を高めるプロセスを容易にします。
```js
const styles = {
@@ -165,7 +170,7 @@ const styles = {
}
```
-⚠️ You need to apply the two generated class names (`root` & `disabled`) to the DOM to make it work.
+⚠️DOMを機能させるには、生成された二つのクラス名(`root`&`disabled`) を適用する必要があります。
```jsx
<Button
@@ -179,19 +184,19 @@ const styles = {
{{"demo": "pages/customization/components/ClassesState.js"}}
-### Overriding with inline-styles
+### インラインスタイルでオーバーライドする
-The second way to override the style of a component is to use the **inline-style** approach. Every component provides a `style` property. These properties are always applied to the root element.
+コンポーネントのスタイルをオーバーライドするもう一つの方法は、 **inline-style**アプローチを使用することです。 すべてのコンポーネントには、`style` プロパティがあります。 これらのプロパティは常にルート要素に適用されます。
-You don't have to worry about CSS specificity as the inline-style takes precedence over the regular CSS.
+インラインスタイルは通常のCSSよりも優先されるため、CSSの特異性について心配する必要はありません。
{{"demo": "pages/customization/components/InlineStyle.js"}}
[inline-styleもしくはclassesどちらを使うべきですか？](/getting-started/faq/#when-should-i-use-inline-style-vs-classes)
-## 2. Dynamic variation for a one-time situation
+## 2. 1回の状況に対する動的変化
-You have learned how to override the style of a Material-UI component in the previous section. Now, let's see how we can make these overrides dynamic. Here are five alternatives; each has it's pros and cons.
+前のセクションでMaterial-UIコンポーネントのスタイルをオーバーライドする方法を学習しました。 では、これらのオーバーライドを動的にする方法を見てみましょう。 5つの選択肢があります。それぞれに長所と短所があります。
### 動的CSS
@@ -205,7 +210,7 @@ You have learned how to override the style of a Material-UI component in the pre
{{"demo": "pages/customization/components/DynamicCSSVariables.js"}}
-### Inline-styles
+### インラインスタイル
{{"demo": "pages/customization/components/DynamicInlineStyle.js"}}
@@ -213,29 +218,29 @@ You have learned how to override the style of a Material-UI component in the pre
{{"demo": "pages/customization/components/DynamicThemeNesting.js"}}
-## 3. Specific variation of a component
+## 3. コンポーネントの特定のバリエーション
-You might need to create a variation of a component and use it in different contexts, for instance a colorful button on your product page, however you probably want to keep your code [*DRY*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself).
+コンポーネントのバリエーションを作成し、製品ページのカラフルなボタンなど、さまざまなコンテキストで使用する必要があるかもしれませんが、コードは[*DRYにしておいた方がよいでしょう*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)。
-The best approach is to follow option 1 and then take advantage of the composition power of React by exporting your customized component to use wherever you need it.
+最も良い方法は、オプション1を実行し、カスタマイズしたコンポーネントをエクスポートして必要な場所で使用することにより、Reactの合成能力を活用することです。
{{"demo": "pages/customization/components/Component.js", "hideEditButton": true}}
-## 4. Material Design variations
+## 4. Material Designのバリエーション
-The Material Design specification documents different variations of certain components, such as how buttons come in different shapes: [text](https://material.io/design/components/buttons.html#text-button) (formerly "flat"), [contained](https://material.io/design/components/buttons.html#contained-button) (formerly "raised"), [FAB](https://material.io/design/components/buttons-floating-action-button.html) and more.
+Material Design仕様には、ボタンの形状が異なるなど、特定のコンポーネントのさまざまなバリエーションが記載されています。たとえば、[text](https://material.io/design/components/buttons.html#text-button)(以前の"flat")、[contained](https://material.io/design/components/buttons.html#contained-button)(以前の "raised")、[FAB](https://material.io/design/components/buttons-floating-action-button.html)などです。
-Material-UI attempts to implement all of these variations. Please refer to the [Supported Components](/getting-started/supported-components/) documentation to find out the current status of all supported Material Design components.
+Material-UIは、これらすべてのバリエーションを実装しようとします。 サポートされているMaterial Design コンポーネントの現在のステータスについては、[Supported Components](/getting-started/supported-components/)のマニュアルを参照してください。
## 5. グローバルテーマバリエーション
-In order to promote consistency between components, and manage the user interface appearance as a whole, Material-UI provides a mechanism to apply global changes.
+コンポーネント間の一貫性を促進し、ユーザーインターフェイスの外観全体を管理するために、Material-UIはグローバルな変更を適用するメカニズムを提供します。
-The demos of this section covers how to the change the button's font size.
+このセクションのデモでは、ボタンのフォントサイズを変更する方法について説明します。
### テーマ変数
-You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables).
+[テーマ設定変数を調整できます](/customization/theming/#theme-configuration-variables) 。
```jsx
const theme = createMuiTheme({
@@ -251,7 +256,7 @@ const theme = createMuiTheme({
### グローバルCSSのオーバーライド
-You can also customize all instances of a component with CSS. We expose [global class names](/styles/advanced/#with-material-ui-core) to do so. It's very similar to how you would customize Bootstrap.
+CSSを使用してコンポーネントのすべてのインスタンスをカスタマイズすることもできます。 Components expose [global class names](/styles/advanced/#with-material-ui-core) to enable this. Bootstrapをカスタマイズする方法と非常によく似ています。
```jsx
const GlobalCss = withStyles({
@@ -271,9 +276,9 @@ const GlobalCss = withStyles({
{{"demo": "pages/customization/components/GlobalCssOverride.js", "iframe": true, "height": 70}}
-### Global theme override
+### グローバルテーマオーバーライド
-You can take advantage of the `overrides` key of the `theme` to potentially change every single style injected by Material-UI into the DOM. Learn more about it in the [themes section](/customization/globals/#css) of the documentation.
+`theme`の`overrides`キーを利用すると、Material-UIによってDOMに注入されるすべてのスタイルを潜在的に変更できます。 詳細については、ドキュメントの[テーマセクションをご覧ください](/customization/globals/#css)。
```jsx
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/components/components-pt.md b/docs/src/pages/customization/components/components-pt.md
index f529e1b36acd3e..e427451468c7b9 100644
--- a/docs/src/pages/customization/components/components-pt.md
+++ b/docs/src/pages/customization/components/components-pt.md
@@ -85,7 +85,7 @@ Para sobrescrever os estados especiais dos componentes, **você precisa aumentar
.Button {
color: black;
}
-.Button:disabled { /* Aumentamos a especificidade */
+.Button:disabled { /* Increase the specificity */
color: white;
}
```
@@ -100,7 +100,7 @@ Para sobrescrever os estados especiais dos componentes, **você precisa aumentar
.MenuItem {
color: black;
}
-.MenuItem.selected { /* Aumentamos a especificidade */
+.MenuItem.selected { /* Increase the specificity */
color: blue;
}
```
@@ -133,7 +133,7 @@ Em vez de fornecer valores para a propriedade `classes` da API, você pode utili
.MenuItem {
color: black;
}
-.MenuItem.Mui-selected { /* Aumentamos a especificidade */
+.MenuItem.Mui-selected { /* Increase the specificity */
color: blue;
}
```
@@ -251,7 +251,7 @@ const theme = createMuiTheme({
### Sobrescrita do CSS Global
-Você também pode customizar todas as instâncias de um componente com CSS. Nós expomos [nomes de classes globais](/styles/advanced/#with-material-ui-core) para fazer isso. É muito semelhante a como você customizaria o Bootstrap.
+Você também pode customizar todas as instâncias de um componente com CSS. Components expose [global class names](/styles/advanced/#with-material-ui-core) to enable this. É muito semelhante a como você customizaria o Bootstrap.
```jsx
const GlobalCss = withStyles({
diff --git a/docs/src/pages/customization/components/components-ru.md b/docs/src/pages/customization/components/components-ru.md
index 6a8cd9b746b462..c0f24fabf21abb 100644
--- a/docs/src/pages/customization/components/components-ru.md
+++ b/docs/src/pages/customization/components/components-ru.md
@@ -85,7 +85,7 @@ In order to override the components special states, **you need to increase speci
.Button {
color: black;
}
-.Button:disabled { /* We increase the specificity */
+.Button:disabled { /* Increase the specificity */
color: white;
}
```
@@ -100,7 +100,7 @@ In order to override the components special states, **you need to increase speci
.MenuItem {
color: black;
}
-.MenuItem.selected { /* We increase the specificity */
+.MenuItem.selected { /* Increase the specificity */
color: blue;
}
```
@@ -133,7 +133,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
.MenuItem {
color: black;
}
-.MenuItem.Mui-selected { /* We increase the specificity */
+.MenuItem.Mui-selected { /* Increase the specificity */
color: blue;
}
```
@@ -251,7 +251,7 @@ const theme = createMuiTheme({
### Глобальное переопределение CSS
-Вы также можете настроить все экземпляры компонента с помощью CSS. Для этого мы предоставляем [глобальные имена классов](/styles/advanced/#with-material-ui-core). Это очень похоже на настройку Bootstrap.
+Вы также можете настроить все экземпляры компонента с помощью CSS. Components expose [global class names](/styles/advanced/#with-material-ui-core) to enable this. Это очень похоже на настройку Bootstrap.
```jsx
const GlobalCss = withStyles({
diff --git a/docs/src/pages/customization/components/components-zh.md b/docs/src/pages/customization/components/components-zh.md
index 8eaa7f08f060f3..a9d054ab23d8a8 100644
--- a/docs/src/pages/customization/components/components-zh.md
+++ b/docs/src/pages/customization/components/components-zh.md
@@ -85,7 +85,7 @@ const StyledButton = withStyles({
.Button {
color: black;
}
-.Button:disabled { /* 我们增加了特异性 */
+.Button:disabled { /* Increase the specificity */
color: white;
}
```
@@ -100,7 +100,7 @@ const StyledButton = withStyles({
.MenuItem {
color: black;
}
-.MenuItem.selected { /* We increase the specificity */
+.MenuItem.selected { /* Increase the specificity */
color: blue;
}
```
@@ -133,7 +133,7 @@ const StyledButton = withStyles({
.MenuItem {
color: black;
}
-.MenuItem.Mui-selected { /* We increase the specificity */
+.MenuItem.Mui-selected { /* Increase the specificity */
color: blue;
}
```
@@ -251,7 +251,7 @@ const theme = createMuiTheme({
### 全局CSS覆盖
-您还可以使用CSS自定义组件的所有实例。 您可以使用我们公开的[全局类名](/styles/advanced/#with-material-ui-core)来实现。 它与您自定义Bootstrap的方式非常相似。
+您还可以使用CSS自定义组件的所有实例。 Components expose [global class names](/styles/advanced/#with-material-ui-core) to enable this. 它与您自定义Bootstrap的方式非常相似。
```jsx
const GlobalCss = withStyles({
diff --git a/docs/src/pages/customization/default-theme/default-theme-aa.md b/docs/src/pages/customization/default-theme/default-theme-aa.md
index 89b62f5b6ce6a5..e6ada6281fe922 100644
--- a/docs/src/pages/customization/default-theme/default-theme-aa.md
+++ b/docs/src/pages/customization/default-theme/default-theme-aa.md
@@ -8,7 +8,7 @@ crwdns93432:0crwdne93432:0
crwdns93434:0crwdne93434:0
-> crwdns93436:0crwdne93436:0 crwdns93438:0crwdne93438:0 crwdns93440:0crwdne93440:0
+> crwdns101172:0crwdne101172:0 crwdns101174:0crwdne101174:0
crwdns93442:0crwdne93442:0
diff --git a/docs/src/pages/customization/default-theme/default-theme-de.md b/docs/src/pages/customization/default-theme/default-theme-de.md
index e868ab59c01d92..7b76b0e2129c02 100644
--- a/docs/src/pages/customization/default-theme/default-theme-de.md
+++ b/docs/src/pages/customization/default-theme/default-theme-de.md
@@ -8,7 +8,7 @@ Erkunden Sie das Dokumentationsdesignobjekt:
{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
-> Tipp: Sie können mit dem Theme der Dokumentation in ** Ihrer Konsole **spielen. Wir stellen eine ` Theme ` Variable auf allen Dokumentationsseiten zur Verfügung. Bitte beachten Sie, dass die Dokumentationsseite ein benutzerdefiniertes Theme verwendet.
+> Tip: you can play with the documentation theme object in **your console**, as the `theme` variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.
Wenn Sie mehr darüber erfahren möchten, wie das Theme zusammengestellt wird, werfen Sie einen Blick auf [` material-ui / style / createMuiTheme.js `](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js), und die zugehörigen Importe, die ` createMuiTheme ` verwendet.
diff --git a/docs/src/pages/customization/default-theme/default-theme-es.md b/docs/src/pages/customization/default-theme/default-theme-es.md
index bfb2e3b5b00f75..26e8a4f98919aa 100644
--- a/docs/src/pages/customization/default-theme/default-theme-es.md
+++ b/docs/src/pages/customization/default-theme/default-theme-es.md
@@ -8,7 +8,7 @@ Explora la documentación del objeto del tema:
{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
-> Sugerencia: puedes jugar con la documentación del objeto del tema en **tu consola**. Se expone una variable `theme` en todas las páginas de documentación. Por favor, tenga en cuenta que la documentación está usando un tema personalizado.
+> Tip: you can play with the documentation theme object in **your console**, as the `theme` variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.
Si deseas obtener más información sobre cómo se monta el tema, echa un vistazo a [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js), y los imports que utiliza `createMuiTheme`.
diff --git a/docs/src/pages/customization/default-theme/default-theme-fr.md b/docs/src/pages/customization/default-theme/default-theme-fr.md
index 649fb03d41a2b4..b66e5f8ff27dc5 100644
--- a/docs/src/pages/customization/default-theme/default-theme-fr.md
+++ b/docs/src/pages/customization/default-theme/default-theme-fr.md
@@ -8,7 +8,7 @@ Voici la documentation de l’objet de thème:
{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
-> Astuce: vous pouvez jouer avec la documentation de l’objet de thème dans **la console**. We expose a documentation `theme` variable on all the documentation pages. Veuillez noter que cette documentation utilise un thème personnalisé.
+> Tip: you can play with the documentation theme object in **your console**, as the `theme` variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.
If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js), and the related imports which `createMuiTheme` uses.
diff --git a/docs/src/pages/customization/default-theme/default-theme-ja.md b/docs/src/pages/customization/default-theme/default-theme-ja.md
index 1a713f338de251..a0852504c11a9c 100644
--- a/docs/src/pages/customization/default-theme/default-theme-ja.md
+++ b/docs/src/pages/customization/default-theme/default-theme-ja.md
@@ -8,13 +8,13 @@
{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
-> ヒント：あなたのコンソールでドキュメントのテーマオブジェクトで遊ぶことができます。 すべてのドキュメントページで可変なドキュメントのテーマを公開します。 ドキュメントサイトはカスタムテーマを使用していることに注意してください。
+> Tip: you can play with the documentation theme object in **your console**, as the `theme` variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.
テーマについてもっと知りたい場合は、[`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js)又は `createMuiTheme`に関連するものをインポートして使って下さい。
## @material-ui/core/styles と @material-ui/styles
-Material-UIスタイルはnpmパッケージの[@material-ui/styles](/styles/basics/) で提供されます。 これはReactのスタイリングソリューションです。 [isolated](https://bundlephobia.com/result?p=@material-ui/styles)はMaterial-UIのデフォルトテーマです。 To remove the need for injecting a theme in the React's context **systematically**, we are wrapping the style modules (`makeStyles`, `withStyles` and `styled`) with the default Material-UI theme:
+Material-UIスタイルはnpmパッケージの[@material-ui/styles](/styles/basics/) で提供されます。 これはReactのスタイリングソリューションです。 [isolated](https://bundlephobia.com/result?p=@material-ui/styles)はMaterial-UIのデフォルトテーマです。 Reactのコンテキストにテーマを体系的に</strong>注入する必要性をなくすために, スタイルモジュール(`makeStyles`、`withStyles`、`styled`) をデフォルトのMaterial-UIテーマでラップしています。
- `@material-ui/core/styles/makeStyles` wraps `@material-ui/styles/makeStyles`.
- `@material-ui/core/styles/withStyles` wraps `@material-ui/styles/withStyles`.
diff --git a/docs/src/pages/customization/default-theme/default-theme-pt.md b/docs/src/pages/customization/default-theme/default-theme-pt.md
index d57f13b16f3e36..878748f2ff7a75 100644
--- a/docs/src/pages/customization/default-theme/default-theme-pt.md
+++ b/docs/src/pages/customization/default-theme/default-theme-pt.md
@@ -8,7 +8,7 @@ Explore a documentação do objeto tema:
{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
-> Dica: você pode trabalhar com a documentação do objeto tema em **seu console**. Expomos uma variável `tema` de documentação em todas as páginas de documentação. Por favor, note que o site de documentação está usando um tema personalizado.
+> Tip: you can play with the documentation theme object in **your console**, as the `theme` variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.
Se você quiser aprender mais sobre como o tema é montado, dê uma olhada em [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js), e as importações relacionadas que `createMuiTheme` usa.
diff --git a/docs/src/pages/customization/default-theme/default-theme-ru.md b/docs/src/pages/customization/default-theme/default-theme-ru.md
index 22c83fbb5b3594..ae07c7a10374a7 100644
--- a/docs/src/pages/customization/default-theme/default-theme-ru.md
+++ b/docs/src/pages/customization/default-theme/default-theme-ru.md
@@ -8,7 +8,7 @@
{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
-> Совет: вы можете поиграть с объектом темы документации в ** вашей консоли **. Мы выставляем переменную документации `тема` на всех страницах документации. Обратите внимание, что эта документация использует настраиваемую тему.
+> Tip: you can play with the documentation theme object in **your console**, as the `theme` variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.
Подробности о структуре темы изнутри можно посмотреть здесь [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js), а также изучив зависимости, используемые `createMuiTheme`.
diff --git a/docs/src/pages/customization/default-theme/default-theme-zh.md b/docs/src/pages/customization/default-theme/default-theme-zh.md
index 83b769af2c75b7..ff78ca9ea7847a 100644
--- a/docs/src/pages/customization/default-theme/default-theme-zh.md
+++ b/docs/src/pages/customization/default-theme/default-theme-zh.md
@@ -8,7 +8,7 @@
{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
-> 提示：你可以在**您的控制台**使用文档主题对象. 我们在所有文档页面上都公开了一个文档`主题`对象。 请注意，文档站点正在使用自定义主题。
+> Tip: you can play with the documentation theme object in **your console**, as the `theme` variable is exposed on all the documentation pages. Please note that the documentation site is using a custom theme.
如果你想了解更多有关主题是如何组合的信息，请看看 [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js) 和 如何用`createMuiTheme` 导入主题
diff --git a/docs/src/pages/customization/density/density-aa.md b/docs/src/pages/customization/density/density-aa.md
index 8d17422330b8db..9a951183891120 100644
--- a/docs/src/pages/customization/density/density-aa.md
+++ b/docs/src/pages/customization/density/density-aa.md
@@ -4,7 +4,7 @@
## crwdns93464:0crwdne93464:0
-crwdns93466:0crwdne93466:0 crwdns93468:0crwdne93468:0
+crwdns101176:0crwdne101176:0 crwdns101178:0crwdne101178:0 crwdns101180:0crwdne101180:0
## crwdns93470:0crwdne93470:0
diff --git a/docs/src/pages/customization/density/density-de.md b/docs/src/pages/customization/density/density-de.md
index 98cf181234dd04..a0499c30560dd5 100644
--- a/docs/src/pages/customization/density/density-de.md
+++ b/docs/src/pages/customization/density/density-de.md
@@ -4,7 +4,7 @@
## Applying density
-We won't cover possible use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
+This section explains how to apply density. It doesn't cover petential use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
## Implementing density
diff --git a/docs/src/pages/customization/density/density-es.md b/docs/src/pages/customization/density/density-es.md
index ea25cae998c425..700f8dc4dc3ca6 100644
--- a/docs/src/pages/customization/density/density-es.md
+++ b/docs/src/pages/customization/density/density-es.md
@@ -4,7 +4,7 @@
## Applying density
-We won't cover possible use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
+This section explains how to apply density. It doesn't cover petential use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
## Implementing density
diff --git a/docs/src/pages/customization/density/density-fr.md b/docs/src/pages/customization/density/density-fr.md
index ea25cae998c425..700f8dc4dc3ca6 100644
--- a/docs/src/pages/customization/density/density-fr.md
+++ b/docs/src/pages/customization/density/density-fr.md
@@ -4,7 +4,7 @@
## Applying density
-We won't cover possible use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
+This section explains how to apply density. It doesn't cover petential use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
## Implementing density
diff --git a/docs/src/pages/customization/density/density-ja.md b/docs/src/pages/customization/density/density-ja.md
index 9c04734051c3ee..7b4df6fa7e01c0 100644
--- a/docs/src/pages/customization/density/density-ja.md
+++ b/docs/src/pages/customization/density/density-ja.md
@@ -4,7 +4,7 @@
## 密度を適用する
-ここでは、使用例や密度をアプリケーションで使用する場合の考慮事項については説明しません。 Material design ガイドラインには、これらのトピックの詳細を説明した[comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) があります。
+This section explains how to apply density. It doesn't cover petential use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
## 実装密度
diff --git a/docs/src/pages/customization/density/density-pt.md b/docs/src/pages/customization/density/density-pt.md
index 7b1b2150da7b18..fe9477c370309f 100644
--- a/docs/src/pages/customization/density/density-pt.md
+++ b/docs/src/pages/customization/density/density-pt.md
@@ -4,7 +4,7 @@
## Aplicando densidade
-Não abordaremos possíveis casos de uso ou considerações sobre o uso de densidade em seu aplicativo. As diretrizes de Material design tem um [abrangente guia](https://material.io/design/layout/applying-density.html#typographic-density) cobrindo estes tópicos com mais detalhes.
+This section explains how to apply density. It doesn't cover petential use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
## Implementando densidade
diff --git a/docs/src/pages/customization/density/density-ru.md b/docs/src/pages/customization/density/density-ru.md
index 1dafed229cb48e..34fc41e727c880 100644
--- a/docs/src/pages/customization/density/density-ru.md
+++ b/docs/src/pages/customization/density/density-ru.md
@@ -4,7 +4,7 @@
## Applying density
-We won't cover possible use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
+This section explains how to apply density. It doesn't cover petential use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
## Implementing density
diff --git a/docs/src/pages/customization/density/density-zh.md b/docs/src/pages/customization/density/density-zh.md
index 05b4e53421c023..dc09d335f39a49 100644
--- a/docs/src/pages/customization/density/density-zh.md
+++ b/docs/src/pages/customization/density/density-zh.md
@@ -4,7 +4,7 @@
## 使用 `Density`
-我们不会覆盖您的应用程序中的样式，考虑一下在你的应用中使用density吧。 <https://material.io/design/layout/applying-density. html#typographic-density>使用案例</>
+This section explains how to apply density. It doesn't cover petential use cases, or considerations for using density in your application. The Material design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail.
## Implementing density
diff --git a/docs/src/pages/customization/globals/globals-aa.md b/docs/src/pages/customization/globals/globals-aa.md
index 0b2ec1c0f10abb..7aa75d8809aac6 100644
--- a/docs/src/pages/customization/globals/globals-aa.md
+++ b/docs/src/pages/customization/globals/globals-aa.md
@@ -16,7 +16,7 @@ crwdns93566:0crwdne93566:0 crwdns93568:0crwdne93568:0 crwdns93570:0crwdne93570:0
## crwdns93572:0crwdne93572:0
-crwdns93574:0crwdne93574:0 crwdns93576:0crwdne93576:0
+crwdns93574:0crwdne93574:0 crwdns101182:0crwdne101182:0
```js
crwdns93578:0crwdne93578:0
diff --git a/docs/src/pages/customization/globals/globals-de.md b/docs/src/pages/customization/globals/globals-de.md
index 7c87a76880cc72..fd975e5d9981dd 100644
--- a/docs/src/pages/customization/globals/globals-de.md
+++ b/docs/src/pages/customization/globals/globals-de.md
@@ -27,7 +27,7 @@ Die Liste dieser Anpassungspunkte für jede Komponente ist unter der **Komponent
## Standard-Eigenschaften
-Sie können die Standard-Eigenschaften aller Komponenten der Material-UI ändern. Wir stellen einen `props` Schlüssel im `Theme` für diesen Anwendungsfall zur Verfügung.
+Sie können die Standard-Eigenschaften aller Komponenten der Material-UI ändern. A `props` key is exposed in the `theme` for this use case.
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/globals/globals-es.md b/docs/src/pages/customization/globals/globals-es.md
index 66ad2a55fd4162..375fd0dbb53174 100644
--- a/docs/src/pages/customization/globals/globals-es.md
+++ b/docs/src/pages/customization/globals/globals-es.md
@@ -27,7 +27,7 @@ The list of these customization points for each component is documented under th
## Default props
-You can change the default props of all the Material-UI components. We expose a `props` key in the `theme` for this use case.
+You can change the default props of all the Material-UI components. A `props` key is exposed in the `theme` for this use case.
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/globals/globals-fr.md b/docs/src/pages/customization/globals/globals-fr.md
index 01d6bb0f271702..b4a6ded1e179d8 100644
--- a/docs/src/pages/customization/globals/globals-fr.md
+++ b/docs/src/pages/customization/globals/globals-fr.md
@@ -27,7 +27,7 @@ The list of these customization points for each component is documented under th
## Default props
-You can change the default props of all the Material-UI components. We expose a `props` key in the `theme` for this use case.
+You can change the default props of all the Material-UI components. A `props` key is exposed in the `theme` for this use case.
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/globals/globals-ja.md b/docs/src/pages/customization/globals/globals-ja.md
index 15fcabd901d7aa..c011e1daeacf17 100644
--- a/docs/src/pages/customization/globals/globals-ja.md
+++ b/docs/src/pages/customization/globals/globals-ja.md
@@ -27,7 +27,7 @@
## Default props
-すべての Material-UI コンポーネントのdefault propsを変更できます。 このユースケースでは、 `theme`で`props`キーを公開します。
+すべての Material-UI コンポーネントのdefault propsを変更できます。 A `props` key is exposed in the `theme` for this use case.
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/globals/globals-pt.md b/docs/src/pages/customization/globals/globals-pt.md
index 4717d151d83e87..d34057e64f87c7 100644
--- a/docs/src/pages/customization/globals/globals-pt.md
+++ b/docs/src/pages/customization/globals/globals-pt.md
@@ -27,7 +27,7 @@ A lista desses pontos de customização de cada componente está documentada na
## Propriedades padrão
-Você pode alterar as propriedades padrão de todos os componentes de Material-UI. Nós expomos uma `props`, chave do `theme` para este caso de uso.
+Você pode alterar as propriedades padrão de todos os componentes de Material-UI. A `props` key is exposed in the `theme` for this use case.
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/globals/globals-ru.md b/docs/src/pages/customization/globals/globals-ru.md
index 7afde8b47bd653..812c1792999566 100644
--- a/docs/src/pages/customization/globals/globals-ru.md
+++ b/docs/src/pages/customization/globals/globals-ru.md
@@ -27,7 +27,7 @@ const theme = createMuiTheme({
## Настройка props
-Вы можете изменить свойство props любой из компонент Material-UI. Для этого мы предоставляем ключ `props` объекта `theme`.
+Вы можете изменить свойство props любой из компонент Material-UI. A `props` key is exposed in the `theme` for this use case.
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/globals/globals-zh.md b/docs/src/pages/customization/globals/globals-zh.md
index 4eba996b85f09d..30ccac88985011 100644
--- a/docs/src/pages/customization/globals/globals-zh.md
+++ b/docs/src/pages/customization/globals/globals-zh.md
@@ -27,7 +27,7 @@ const theme = createMuiTheme({
## 默认属性
-您可以更改所有Material-UI组件的默认属性。 在`theme`上有一个键值`props`是用来作这个用途的。
+您可以更改所有Material-UI组件的默认属性。 A `props` key is exposed in the `theme` for this use case.
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/palette/palette-aa.md b/docs/src/pages/customization/palette/palette-aa.md
index ecc89e1c1ed0f5..04cfed6cd85f34 100644
--- a/docs/src/pages/customization/palette/palette-aa.md
+++ b/docs/src/pages/customization/palette/palette-aa.md
@@ -47,12 +47,11 @@ crwdns93622:0[300]crwdnd93622:0[500]crwdnd93622:0[700]crwdnd93622:0[500]crwdnd93
crwdns93624:0crwdne93624:0
```js
-crwdns93626:0{ createMuiTheme }crwdne93626:0
-crwdns93628:0crwdne93628:0
-crwdns93630:0crwdne93630:0
- crwdns93632:0crwdne93632:0
- crwdns93634:0crwdne93634:0
- crwdns93636:0crwdne93636:0
+crwdns101184:0{ createMuiTheme }crwdne101184:0
+crwdns101186:0crwdne101186:0
+ crwdns101188:0crwdne101188:0
+ crwdns101190:0crwdne101190:0
+ crwdns101192:0crwdne101192:0
```
**crwdns93638:0crwdne93638:0**
@@ -98,4 +97,8 @@ crwdns93684:0{
}crwdne93684:0
```
-crwdns93686:0crwdne93686:0
\ No newline at end of file
+crwdns93686:0crwdne93686:0
+
+## crwdns100956:0crwdne100956:0
+
+crwdns100958:0crwdne100958:0
\ No newline at end of file
diff --git a/docs/src/pages/customization/palette/palette-de.md b/docs/src/pages/customization/palette/palette-de.md
index 3f69f3b6ef7f74..771f85aaa9eff6 100644
--- a/docs/src/pages/customization/palette/palette-de.md
+++ b/docs/src/pages/customization/palette/palette-de.md
@@ -81,19 +81,18 @@ import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
-// Alle folgende Schlüssel sind optional.
-// Wir versuchen unser Bestes, um einen hervorragenden Standardwert bereitzustellen.
+// All the following keys are optional, as default values are provided.
const theme = createMuiTheme({
palette: {
primary: indigo,
secondary: pink,
error: red,
- // Wird von `getContrastText()` benutzt, um den Kontrast zwischen Text und
- // Hintergrund zu maximieren.
+ // Used by `getContrastText()` to maximize the contrast between the background and
+ // the text.
contrastThreshold: 3,
- // Wird verwendet, um die Luminanz einer Farbe um ungefähr
- // zwei Indizes in der Tonpalette zu verschieben.
- // Zum Beispiel von Red 500 zu Red 300 oder Red 700 zu wechseln.
+ // Used to shift a color's luminance by approximately
+ // two indexes within its tonal palette.
+ // E.g., shift from Red 500 to Red 300 or Red 700.
tonalOffset: 0.2,
},
});
@@ -162,4 +161,8 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
+
+## Default values
+
+You can explore the default values of the palette using [the theme explorer](/customization/default-theme/?expend-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/palette/palette-es.md b/docs/src/pages/customization/palette/palette-es.md
index 705a7477e9904c..0f6bb9efadc22f 100644
--- a/docs/src/pages/customization/palette/palette-es.md
+++ b/docs/src/pages/customization/palette/palette-es.md
@@ -81,8 +81,7 @@ import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
-// All the following keys are optional.
-// We try our best to provide a great default value.
+// All the following keys are optional, as default values are provided.
const theme = createMuiTheme({
palette: {
primary: indigo,
@@ -162,4 +161,8 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
+
+## Default values
+
+You can explore the default values of the palette using [the theme explorer](/customization/default-theme/?expend-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/palette/palette-fr.md b/docs/src/pages/customization/palette/palette-fr.md
index d1f6e96def826c..fb62af81894cd3 100644
--- a/docs/src/pages/customization/palette/palette-fr.md
+++ b/docs/src/pages/customization/palette/palette-fr.md
@@ -81,8 +81,7 @@ import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
-// All the following keys are optional.
-// We try our best to provide a great default value.
+// All the following keys are optional, as default values are provided.
const theme = createMuiTheme({
palette: {
primary: indigo,
@@ -135,7 +134,7 @@ Both the `tonalOffset` and `contrastThreshold` values may be customized as neede
Note that `contrastThreshold` follows a non-linear curve.
-## Example
+## Exemple
{{"demo": "pages/customization/palette/Palette.js"}}
@@ -162,4 +161,8 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
+
+## Default values
+
+You can explore the default values of the palette using [the theme explorer](/customization/default-theme/?expend-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/palette/palette-ja.md b/docs/src/pages/customization/palette/palette-ja.md
index 7af5e90038e527..b038f96a6d09b7 100644
--- a/docs/src/pages/customization/palette/palette-ja.md
+++ b/docs/src/pages/customization/palette/palette-ja.md
@@ -1,28 +1,28 @@
# パレット
-<p class="description">The palette enables you to modify the color of the components to suit your brand.</p>
+<p class="description">パレットを使用すると、ブランドに合わせてコンポーネントの色を変更できます。</p>
## Intentions
-A color intention is a mapping of a palette to a given intention within your application.
+A color intention とは、パレットをアプリケーション内の特定の意図にマッピングすることです。
-The theme exposes the following color intentions:
+このテーマは、次の色の目的を明らかにします。
-- primary - used to represent primary interface elements for a user.
-- secondary - used to represent secondary interface elements for a user.
-- error - used to represent interface elements that the user should be made aware of.
+- primary-ユーザのプライマリインタフェース要素を表すために使用します。
+- secondary - ユーザーの二次インタフェース要素を表します。
+- error-ユーザが認識すべきインタフェース要素を表すために使用されます。
-The default palette uses the shades prefixed with `A` (`A200`, etc.) for the secondary intention, and the un-prefixed shades for the other intentions.
+既定のパレットでは、副次的な意図を表すために、先頭に`A`(`A200`など。) が付いたシェーディングが使用されます。 他の目的のために省略されたシェードがあります。
-If you want to learn more about color, you can check out [the color section](/customization/color/).
+色の詳細については、[色セクション](/customization/color/)をご覧ください。
-## Custom palette
+## カスタムパレット
-You may override the default palette values by including a `palette` object as part of your theme.
+テーマの一部として `palette` オブジェクトを含めると、パレットの既定値を変更できます。
-If any of the [`palette.primary`](/customization/default-theme/?expend-path=$.palette.primary), [`palette.secondary`](/customization/default-theme/?expend-path=$.palette.secondary) or [`palette.error`](/customization/default-theme/?expend-path=$.palette.error) 'intention' objects are provided, they will replace the defaults.
+[` palette.primary`](/customization/default-theme/?expend-path=$.palette.primary) のいずれか、 [` palette.secondary `](/customization/default-theme/?expend-path=$.palette.secondary)または [` palette.error `](/customization/default-theme/?expend-path=$.palette.error) 'intention'オブジェクトが指定されている場合は、デフォルト値が置き換えられます。
-The intention value can either be a [color](/customization/color/) object, or an object with one or more of the keys specified by the following TypeScript interface:
+Intention値は、 [color](/customization/color/)オブジェクト、または次のTypeScriptインターフェイスで指定されたキーを持つオブジェクトのいずれかです。
```ts
interface PaletteIntention {
@@ -33,9 +33,9 @@ interface PaletteIntention {
};
```
-**Using a color object**
+**カラーオブジェクトを使用する**
-The simplest way to customize an intention is to import one or more of the provided colors and apply them to a palette intention:
+意図をカスタマイズする最も簡単な方法は、提供されている1つまたは複数のカラーをインポートすることです。 次のようにパレット意図に適用します。
```js
import { createMuiTheme } from '@material-ui/core/styles';
@@ -48,7 +48,7 @@ const theme = createMuiTheme({
});
```
-If the intention key receives a color object as in the example above, the following mapping is used to populate the required keys:
+上記の例のようにインテンションキーがカラーオブジェクトを受け取った場合、 は次のマッピングを使用して必要なキーを設定します。
```js
palette: {
@@ -73,7 +73,7 @@ palette: {
},
```
-This example illustrates how you could recreate the default palette values:
+この例は、デフォルトのパレット値を再作成する方法を示しています。
```js
import { createMuiTheme } from '@material-ui/core/styles';
@@ -81,8 +81,7 @@ import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
-// All the following keys are optional.
-// We try our best to provide a great default value.
+// All the following keys are optional, as default values are provided.
const theme = createMuiTheme({
palette: {
primary: indigo,
@@ -99,9 +98,9 @@ const theme = createMuiTheme({
});
```
-**Providing the colors directly**
+**色を直接提供する**
-If you wish to provide more customized colors, you can either create your own color object, or directly supply colors to some or all of the intention's keys:
+よりカスタマイズされた色を提供する場合は、独自の色オブジェクト 作成するか、意図のキーの一部またはすべてに直接色を指定できます。
```js
import { createMuiTheme } from '@material-ui/core/styles';
@@ -125,29 +124,29 @@ const theme = createMuiTheme({
});
```
-As in the example above, if the intention object contains custom colors using any of the `main`, `light`, `dark` or `contrastText` keys, these map as follows:
+上記の例のように、intentionオブジェクトに `main`、`light`、`dark`または`contrastText`キーは、次のようにマップされます。
-- If the `dark` and / or `light` keys are omitted, their value(s) will be calculated from `main`, according to the `tonalOffset` value.
+- `dark`キーまたは`light`キーを省略すると、その値は`main`から計算されます。 `tonalOffset`値の従います。
-- If `contrastText` is omitted, its value will be calculated to contrast with `main`, according to the`contrastThreshold` value.
+- `contrastText`を省略すると、その値は`main`と対比するように計算されます。 これは、`contrastThreshold`の値によって決まります。
-Both the `tonalOffset` and `contrastThreshold` values may be customized as needed. A higher value for `tonalOffset` will make calculated values for `light` lighter, and `dark` darker. A higher value for `contrastThreshold` increases the point at which a background color is considered light, and given a dark `contrastText`.
+`tonalOffset`値と`contrastThreshold`値は、必要に応じてカスタマイズできます。 `tonalOffset`の値を大きくすると、`light`の計算値は明るくなり、`dark`は暗くなります。v `contrastThresholdの高い値`は、バックグラウンドカラーが明るいとみなされるポイントを増やし、暗い`contrastText`が指定されます。
-Note that `contrastThreshold` follows a non-linear curve.
+` contrastThreshold `非線形曲線に従います。
## 例
{{"demo": "pages/customization/palette/Palette.js"}}
-## Color tool
+## カラーツール
-Need inspiration? The Material Design team has built an awesome [palette configuration tool](/customization/color/#color-tool) to help you.
+インスピレーションが必要ですか？ Material Designチームは、あなたを助ける素晴らしい[パレット設定ツール](/customization/color/#color-tool)を構築しました。
## Type (light /dark theme)
-Material-UI comes with two theme variants, light (the default) and dark.
+Material-UIには、light（デフォルト）と dark の2つのテーマがあります。
-You can make the theme dark by setting `type` to `dark`. While it's only a single property value change, internally it modifies the value of the following keys:
+` type`を`dark`に設定して、テーマを暗くすることができます 。 プロパティ値の変更は1つだけですが、内部的には次のキーの値を変更します。
- `palette.text`
- `palette.divider`
@@ -162,4 +161,8 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
+
+## Default values
+
+You can explore the default values of the palette using [the theme explorer](/customization/default-theme/?expend-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/palette/palette-pt.md b/docs/src/pages/customization/palette/palette-pt.md
index 5bbe8e82df853d..99aa6768ef7e32 100644
--- a/docs/src/pages/customization/palette/palette-pt.md
+++ b/docs/src/pages/customization/palette/palette-pt.md
@@ -81,19 +81,18 @@ import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
-// Todas as chaves a seguir são opcionais.
-// Nós tentamos nosso melhor para fornecer um ótimo valor padrão.
+// All the following keys are optional, as default values are provided.
const theme = createMuiTheme({
palette: {
primary: indigo,
secondary: pink,
error: red,
- // Usado por `getContrastText ()` para maximizar o contraste entre o segundo plano e
- // o texto.
+ // Used by `getContrastText()` to maximize the contrast between the background and
+ // the text.
contrastThreshold: 3,
- // Usado para alterar a luminosidade de uma cor em aproximadamente
- // dois índices em sua paleta de tons.
- // Por exemplo, mude de Red 500 para Red 300 ou Red 700.
+ // Used to shift a color's luminance by approximately
+ // two indexes within its tonal palette.
+ // E.g., shift from Red 500 to Red 300 or Red 700.
tonalOffset: 0.2,
},
});
@@ -162,4 +161,8 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
+
+## Default values
+
+You can explore the default values of the palette using [the theme explorer](/customization/default-theme/?expend-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/palette/palette-ru.md b/docs/src/pages/customization/palette/palette-ru.md
index 9e563afc57b5df..9b3d30e27cc449 100644
--- a/docs/src/pages/customization/palette/palette-ru.md
+++ b/docs/src/pages/customization/palette/palette-ru.md
@@ -81,8 +81,7 @@ import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
-// All the following keys are optional.
-// We try our best to provide a great default value.
+// All the following keys are optional, as default values are provided.
const theme = createMuiTheme({
palette: {
primary: indigo,
@@ -162,4 +161,8 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
+
+## Default values
+
+You can explore the default values of the palette using [the theme explorer](/customization/default-theme/?expend-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/palette/palette-zh.md b/docs/src/pages/customization/palette/palette-zh.md
index bf619042ad1316..b307a6eb0daef1 100644
--- a/docs/src/pages/customization/palette/palette-zh.md
+++ b/docs/src/pages/customization/palette/palette-zh.md
@@ -81,8 +81,7 @@ import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';
import red from '@material-ui/core/colors/red';
-// All the following keys are optional.
-// We try our best to provide a great default value.
+// All the following keys are optional, as default values are provided.
const theme = createMuiTheme({
palette: {
primary: indigo,
@@ -162,4 +161,8 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
+
+## Default values
+
+You can explore the default values of the palette using [the theme explorer](/customization/default-theme/?expend-path=$.palette) or by opening the dev tools console on this page (`window.theme.palette`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-aa.md b/docs/src/pages/customization/spacing/spacing-aa.md
index 6ca0a21092eba8..a18cc127c6988a 100644
--- a/docs/src/pages/customization/spacing/spacing-aa.md
+++ b/docs/src/pages/customization/spacing/spacing-aa.md
@@ -2,13 +2,14 @@
<p class="description">crwdns93690:0crwdne93690:0</p>
-crwdns93692:0crwdne93692:0
+crwdns100960:0crwdne100960:0
```js
-crwdns93694:0crwdne93694:0
- crwdns93696:0crwdne93696:0
+crwdns100962:0crwdne100962:0
```
+## crwdns100964:0crwdne100964:0
+
crwdns93698:0crwdne93698:0
- crwdns93700:0crwdne93700:0
@@ -29,10 +30,16 @@ crwdns93706:0crwdne93706:0
crwdns93710:0[factor]crwdne93710:0
```
-## crwdns93712:0crwdne93712:0
+## crwdns100966:0crwdne100966:0
+
+crwdns93714:0crwdne93714:0 crwdns100968:0crwdne100968:0 crwdns100970:0crwdne100970:0
+
+```js
+crwdns100972:0crwdne100972:0
+```
-crwdns93714:0crwdne93714:0 crwdns93716:0crwdne93716:0
+crwdns100974:0crwdne100974:0
-```diff
-<br />crwdns93718:0crwdne93718:0
+```js
+crwdns100976:0crwdne100976:0
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-de.md b/docs/src/pages/customization/spacing/spacing-de.md
index 6340593d6bd6a7..1eb88810ac1647 100644
--- a/docs/src/pages/customization/spacing/spacing-de.md
+++ b/docs/src/pages/customization/spacing/spacing-de.md
@@ -2,17 +2,16 @@
<p class="description">Verwende den theme.spacing() Helfer, um einen konsistenten Abstand zwischen den Elementen Ihrer Benutzeroberfläche zu erstellen.</p>
-Die Material-UI verwendet standardmäßig den [empfohlenen 8px-Skalierungsfaktor](https://material.io/design/layout/understanding-layout.html).
+Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default.
```js
-const styles = theme => ({
- root: {
- // JSS verwendet px als Standardeinheiten für diese CSS-Eigenschaft.
- padding: theme.spacing(2), // = 8 * 2
- },
-});
+const theme = createMuiTheme();
+
+theme.spacing(2) // = 8 * 2
```
+## Custom spacing
+
Sie können die Abstandstransformation ändern, indem Sie Folgendes angeben:
- eine Zahl
@@ -45,11 +44,16 @@ const theme = createMuiTheme({
theme.spacing(2); // = 8
```
-## Mehrere Aritäten
+## Multiple arity
+
+Der `theme.spacing ()` Helfer akzeptiert bis zu 4 Argumente. You can use the arguments to reduce the boilerplate. Instead of doing:
-Der `theme.spacing ()` Helfer akzeptiert bis zu 4 Argumente. Sie können die Argumente verwenden, um den Boilerplate zu reduzieren:
+```js
+padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```
-```diff
-<br />- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
-+ padding: theme.spacing(1, 2), // '8px 16px'
+you can do:
+
+```js
+padding: theme.spacing(1, 2), // '8px 16px'
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-es.md b/docs/src/pages/customization/spacing/spacing-es.md
index 3a03c430597e2c..2564c9a4e366ee 100644
--- a/docs/src/pages/customization/spacing/spacing-es.md
+++ b/docs/src/pages/customization/spacing/spacing-es.md
@@ -2,17 +2,16 @@
<p class="description">Use the theme.spacing() helper to create consistent spacing between the elements of your UI.</p>
-Material-UI uses [a recommended 8px scaling factor by default](https://material.io/design/layout/understanding-layout.html).
+Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default.
```js
-const styles = theme => ({
- root: {
- // JSS uses px as the default units for this CSS property.
- padding: theme.spacing(2), // = 8 * 2
- },
-});
+const theme = createMuiTheme();
+
+theme.spacing(2) // = 8 * 2
```
+## Custom spacing
+
You can change the spacing transformation by providing:
- a number
@@ -47,9 +46,14 @@ theme.spacing(2); // = 8
## Multiple arity
-The `theme.spacing()` helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate:
+The `theme.spacing()` helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate. Instead of doing:
+
+```js
+padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```
-```diff
-<br />- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
-+ padding: theme.spacing(1, 2), // '8px 16px'
+you can do:
+
+```js
+padding: theme.spacing(1, 2), // '8px 16px'
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-fr.md b/docs/src/pages/customization/spacing/spacing-fr.md
index 6c589bb7c92db7..aa04f43a22ee0e 100644
--- a/docs/src/pages/customization/spacing/spacing-fr.md
+++ b/docs/src/pages/customization/spacing/spacing-fr.md
@@ -2,17 +2,16 @@
<p class="description">Use the theme.spacing() helper to create consistent spacing between the elements of your UI.</p>
-Material-UI uses [a recommended 8px scaling factor by default](https://material.io/design/layout/understanding-layout.html).
+Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default.
```js
-const styles = theme => ({
- root: {
- // JSS uses px as the default units for this CSS property.
- padding: theme.spacing(2), // = 8 * 2
- },
-});
+const theme = createMuiTheme();
+
+theme.spacing(2) // = 8 * 2
```
+## Custom spacing
+
You can change the spacing transformation by providing:
- a number
@@ -47,9 +46,14 @@ theme.spacing(2); // = 8
## Multiple arity
-The `theme.spacing()` helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate:
+The `theme.spacing()` helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate. Instead of doing:
+
+```js
+padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```
-```diff
-<br />- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
-+ padding: theme.spacing(1, 2), // '8px 16px'
+you can do:
+
+```js
+padding: theme.spacing(1, 2), // '8px 16px'
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-ja.md b/docs/src/pages/customization/spacing/spacing-ja.md
index 84a1a083ad9e81..1df389b5a15521 100644
--- a/docs/src/pages/customization/spacing/spacing-ja.md
+++ b/docs/src/pages/customization/spacing/spacing-ja.md
@@ -1,19 +1,18 @@
-# Spacing
+# 間隔
-<p class="description">Use the theme.spacing() helper to create consistent spacing between the elements of your UI.</p>
+<p class="description">theme.spacing() ヘルパーを使用して、 UIの要素間の間隔を一定にします。</p>
-Material-UI uses [a recommended 8px scaling factor by default](https://material.io/design/layout/understanding-layout.html).
+Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default.
```js
-const styles = theme => ({
- root: {
- // JSS uses px as the default units for this CSS property.
- padding: theme.spacing(2), // = 8 * 2
- },
-});
+const theme = createMuiTheme();
+
+theme.spacing(2) // = 8 * 2
```
-You can change the spacing transformation by providing:
+## Custom spacing
+
+間隔の変換は、次の方法で変更できます。
- a number
@@ -47,9 +46,14 @@ theme.spacing(2); // = 8
## Multiple arity
-The `theme.spacing()` helper accepts up to 4 arguments. You can use the arguments to reduce the boilerplate:
+`theme.spacing()` ヘルパーは最大4つの引数を受け入れます。 You can use the arguments to reduce the boilerplate. Instead of doing:
+
+```js
+padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```
-```diff
-<br />- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
-+ padding: theme.spacing(1, 2), // '8px 16px'
+you can do:
+
+```js
+padding: theme.spacing(1, 2), // '8px 16px'
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-pt.md b/docs/src/pages/customization/spacing/spacing-pt.md
index 2ad2cbeb7e8ba8..9429a1c9f9a5e4 100644
--- a/docs/src/pages/customization/spacing/spacing-pt.md
+++ b/docs/src/pages/customization/spacing/spacing-pt.md
@@ -2,17 +2,16 @@
<p class="description">Use o auxiliar theme.spacing() para criar um espaçamento consistente entre os elementos da sua UI.</p>
-Material-UI usa [um fator de escala recomendado de 8px por padrão](https://material.io/design/layout/understanding-layout.html).
+Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default.
```js
-const styles = theme => ({
- root: {
- // O JSS usa px como unidade padrão para essa propriedade CSS.
- padding: theme.spacing(2), // = 8 * 2
- },
-});
+const theme = createMuiTheme();
+
+theme.spacing(2) // = 8 * 2
```
+## Custom spacing
+
Você pode alterar a transformação do espaçamento fornecendo:
- um número
@@ -45,11 +44,16 @@ const theme = createMuiTheme({
theme.spacing(2); // = 8
```
-## Aridade múltipla
+## Multiple arity
+
+O auxiliar ` theme.spacing()` aceita até 4 argumentos. You can use the arguments to reduce the boilerplate. Instead of doing:
-O auxiliar ` theme.spacing()` aceita até 4 argumentos. Você pode usar os argumentos para reduzir o boilerplate:
+```js
+padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```
-```diff
-<br />- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
-+ padding: theme.spacing(1, 2), // '8px 16px'
+you can do:
+
+```js
+padding: theme.spacing(1, 2), // '8px 16px'
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-ru.md b/docs/src/pages/customization/spacing/spacing-ru.md
index 8c720abe2a779e..ac2bf1b7cf4ceb 100644
--- a/docs/src/pages/customization/spacing/spacing-ru.md
+++ b/docs/src/pages/customization/spacing/spacing-ru.md
@@ -2,17 +2,16 @@
<p class="description">Use the theme.spacing() helper to create consistent spacing between the elements of your UI.</p>
-Material-UI uses [a recommended 8px scaling factor by default](https://material.io/design/layout/understanding-layout.html).
+Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default.
```js
-const styles = theme => ({
- root: {
- // JSS использует пиксели в качестве дефолтных единиц измерения для этого CSS свойства.
- padding: theme.spacing(2), // = 8 * 2
- },
-});
+const theme = createMuiTheme();
+
+theme.spacing(2) // = 8 * 2
```
+## Custom spacing
+
Вы можете изменить преобразование расстояния, передав:
- число
@@ -47,9 +46,14 @@ theme.spacing(2); // = 8
## Multiple arity
-Вспомогательная функция ` theme.spacing () ` принимает до 4 аргументов. Вы можете использовать аргументы, чтобы уменьшить шаблон:
+Вспомогательная функция ` theme.spacing () ` принимает до 4 аргументов. You can use the arguments to reduce the boilerplate. Instead of doing:
+
+```js
+padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```
-```diff
-<br />- padding: `$ {theme.spacing (1)} px $ {theme.spacing (2)} px`,
-+ padding: theme.spacing (1, 2), // '8px 16px'
+you can do:
+
+```js
+padding: theme.spacing(1, 2), // '8px 16px'
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/spacing/spacing-zh.md b/docs/src/pages/customization/spacing/spacing-zh.md
index fb18cf2a476458..2279d89c63fd77 100644
--- a/docs/src/pages/customization/spacing/spacing-zh.md
+++ b/docs/src/pages/customization/spacing/spacing-zh.md
@@ -2,17 +2,16 @@
<p class="description">Use the theme.spacing() helper to create consistent spacing between the elements of your UI.</p>
-Material-UI默认使用[8px的缩放系数](https://material.io/design/layout/understanding-layout.html) 。
+Material-UI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default.
```js
-const styles = theme => ({
- root: {
- // JSS使用px作为此CSS属性的默认单位。
- padding: theme.spacing(2), // = 8 * 2
- },
-});
+const theme = createMuiTheme();
+
+theme.spacing(2) // = 8 * 2
```
+## Custom spacing
+
您可以通过提供以下内容来更改间距转换值：
- 一个数字
@@ -45,11 +44,16 @@ const theme = createMuiTheme({
theme.spacing(2); // = 8
```
-## 多个参数
+## Multiple arity
+
+` theme.spacing() ` 最多接受4个参数。 You can use the arguments to reduce the boilerplate. Instead of doing:
-` theme.spacing() ` 最多接受4个参数。 您可以使用参数来减少样板：
+```js
+padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`, // '8px 16px'
+```
-```diff
-<br />- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
-+ padding: theme.spacing(1, 2), // '8px 16px'
+you can do:
+
+```js
+padding: theme.spacing(1, 2), // '8px 16px'
```
\ No newline at end of file
diff --git a/docs/src/pages/customization/theming/theming-aa.md b/docs/src/pages/customization/theming/theming-aa.md
index c62f3b3aeeb036..c8ab98b3767c12 100644
--- a/docs/src/pages/customization/theming/theming-aa.md
+++ b/docs/src/pages/customization/theming/theming-aa.md
@@ -29,7 +29,7 @@ crwdns93910:0crwdne93910:0
### crwdns93912:0crwdne93912:0
-crwdns93914:0crwdne93914:0 crwdns93916:0crwdne93916:0 crwdns93918:0crwdne93918:0
+crwdns101194:0crwdne101194:0 crwdns93916:0crwdne93916:0 crwdns93918:0crwdne93918:0
crwdns93920:0crwdne93920:0
@@ -88,10 +88,10 @@ crwdns93970:0crwdne93970:0
1. crwdns93974:0crwdne93974:0
2. crwdns93976:0[optional]crwdne93976:0
-- crwdns93978:0[optional]crwdne93978:0 crwdns93980:0crwdne93980:0
+- crwdns101196:0[optional]crwdne101196:0 crwdns93980:0crwdne93980:0
- crwdns93982:0[optional]crwdne93982:0 crwdns93984:0crwdne93984:0 crwdns93986:0crwdne93986:0
- crwdns93988:0[optional]crwdne93988:0 crwdns93990:0crwdne93990:0 crwdns93992:0crwdne93992:0 crwdns93994:0crwdne93994:0 crwdns93996:0crwdne93996:0
-- crwdns93998:0[optional]crwdne93998:0 crwdns94000:0crwdne94000:0
+- crwdns101198:0[optional]crwdne101198:0 crwdns94000:0crwdne94000:0
#### crwdns94002:0crwdne94002:0
diff --git a/docs/src/pages/customization/theming/theming-de.md b/docs/src/pages/customization/theming/theming-de.md
index d970b449c7dc58..6c4d9713d286b3 100644
--- a/docs/src/pages/customization/theming/theming-de.md
+++ b/docs/src/pages/customization/theming/theming-de.md
@@ -29,7 +29,7 @@ You can check out the [default theme section](/customization/default-theme/) to
### Custom variables
-When using Material-UI's theme with our [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
+When using Material-UI's theme with the [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
{{"demo": "pages/customization/theming/CustomStyles.js"}}
@@ -95,10 +95,10 @@ Generieren Sie responsive Typografieeinstellungen basierend auf den erhaltenen O
1. `theme` (*Object*): Das zu verbessernde Themeobjekt.
2. `options` (*Object* [optional]):
-- ` Haltepunkte (Breakpoints)` (* Array <string> * [optional]): Standardmäßig auf ` ['sm', 'md', 'lg'] `. Array von [Haltepunkten](/customization/breakpoints/) (Bezeichner).
+- `breakpoints` (*Array<String>* [optional]): Default to `['sm', 'md', 'lg']`. Array von [Haltepunkten](/customization/breakpoints/) (Bezeichner).
- `disableAlign` (*Boolean* [optional]): Standardmäßig auf `false`. Ob sich die Schriftgrößen geringfügig ändern, um die Höhen der Linie beizubehalten und an das 4px-Linienhöhenraster von Material Design anzupassent. Dies erfordert eine einheitlose Zeilenhöhe in den Stilen des Designs.
- `factor` (*Nummer* [optional]): Standardmäßig auf `2`. Dieser Wert bestimmt die Stärke der Größenänderung der Schriftgröße. Je höher der Wert, desto geringer ist der Unterschied zwischen den Schriftgrößen auf kleinen Bildschirmen. Je niedriger der Wert, desto größer die Schriftgröße für kleine Bildschirme. The value must be greater than 1.
-- `variants` (*Array<string>* [optional]): Standardmäßig auf alle. Die zu behandelnden Typografie-Varianten.
+- `variants` (*Array<String>* [optional]): Default to all. Die zu behandelnden Typografie-Varianten.
#### Rückgabewerte
diff --git a/docs/src/pages/customization/theming/theming-es.md b/docs/src/pages/customization/theming/theming-es.md
index d08ad7820024eb..222bddf6060efd 100644
--- a/docs/src/pages/customization/theming/theming-es.md
+++ b/docs/src/pages/customization/theming/theming-es.md
@@ -29,7 +29,7 @@ Puede consultar la sección de [Tema predeterminado](/customization/default-them
### Variables personalizadas
-Al usar el tema de Material-UI con nuestra [solución de estilo](/styles/basics/) o [ cualquier otro ](/guides/interoperability/#themeprovider). Puede ser conveniente agregar variables adicionales al tema para que pueda usarlas en cualquier lugar. Por ejemplo:
+When using Material-UI's theme with the [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). Puede ser conveniente agregar variables adicionales al tema para que pueda usarlas en cualquier lugar. Por ejemplo:
{{"demo": "pages/customization/theming/CustomStyles.js"}}
@@ -95,10 +95,10 @@ Generate responsive typography settings based on the options received.
1. `theme` (*Object*): The theme object to enhance.
2. `options` (*Object* [optional]):
-- `breakpoints` (*Array<string>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
+- `breakpoints` (*Array<String>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
- `disableAlign` (*Boolean* [optional]): Default to `false`. Whether font sizes change slightly so line heights are preserved and align to Material Design's 4px line height grid. This requires a unitless line height in the theme's styles.
- `factor` (*Number* [optional]): Default to `2`. This value determines the strength of font size resizing. The higher the value, the less difference there is between font sizes on small screens. The lower the value, the bigger font sizes for small screens. The value must be greater than 1.
-- `variants` (*Array<string>* [optional]): Default to all. The typography variants to handle.
+- `variants` (*Array<String>* [optional]): Default to all. The typography variants to handle.
#### Devuelve
diff --git a/docs/src/pages/customization/theming/theming-fr.md b/docs/src/pages/customization/theming/theming-fr.md
index 5ad9ae27f8e9ee..78d48b8efedf49 100644
--- a/docs/src/pages/customization/theming/theming-fr.md
+++ b/docs/src/pages/customization/theming/theming-fr.md
@@ -29,7 +29,7 @@ Vous pouvez consulter la section [thème par défaut](/customization/default-the
### Variables personnalisées
-Lorsque vous utilisez le thème Material-UI avec notre [solution de style](/styles/basics/) ou [n'importe quel autre](/guides/interoperability/#themeprovider). Il peut être pratique d'ajouter des variables supplémentaires au thème afin que vous puissiez les utiliser partout. Par exemple:
+When using Material-UI's theme with the [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). Il peut être pratique d'ajouter des variables supplémentaires au thème afin que vous puissiez les utiliser partout. Par exemple:
{{"demo": "pages/customization/theming/CustomStyles.js"}}
@@ -95,10 +95,10 @@ Generate responsive typography settings based on the options received.
1. `theme` (*Object*): The theme object to enhance.
2. `options` (*Object* [optional]):
-- `breakpoints` (*Array<string>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
+- `breakpoints` (*Array<String>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
- `disableAlign` (*Boolean* [optional]): Default to `false`. Whether font sizes change slightly so line heights are preserved and align to Material Design's 4px line height grid. This requires a unitless line height in the theme's styles.
- `factor` (*Number* [optional]): Default to `2`. This value determines the strength of font size resizing. The higher the value, the less difference there is between font sizes on small screens. The lower the value, the bigger font sizes for small screens. The value must be greater than 1.
-- `variants` (*Array<string>* [optional]): Default to all. The typography variants to handle.
+- `variants` (*Array<String>* [optional]): Default to all. The typography variants to handle.
#### Valeur de retour
diff --git a/docs/src/pages/customization/theming/theming-ja.md b/docs/src/pages/customization/theming/theming-ja.md
index 72951140d851d8..95bd0287cd6e52 100644
--- a/docs/src/pages/customization/theming/theming-ja.md
+++ b/docs/src/pages/customization/theming/theming-ja.md
@@ -29,7 +29,7 @@
### カスタム変数
-Material-UIのテーマを、[styling solution](/styles/basics/)また[any others](/guides/interoperability/#themeprovider)と一緒に使用する場合。 テーマに変数を追加すると、どこでも使用できるので便利です。 例えば：
+When using Material-UI's theme with the [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). テーマに変数を追加すると、どこでも使用できるので便利です。 例えば：
{{"demo": "pages/customization/theming/CustomStyles.js"}}
@@ -95,10 +95,10 @@ const theme = createMuiTheme({
1. `theme` (*Object*): 強化するテーマオブジェクト。
2. `オプション` (*オプジェクト* [任意]):
-- `breakpoints` (*Array<string>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
+- `breakpoints` (*Array<String>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
- `disableAlign` (*Boolean* [optional]): Default to `false`. フォントサイズがわずかに変化して線が表示されるかどうか 高さは保持され、Material Designの4pxライン高さグリッドに位置合わせされます。 これには、テーマのスタイルで単位なしの行の高さが必要です。
- `factor` (*Number* [optional]): Default to `2`. この値は、フォントサイズのサイズ変更の強度を決定します。 値が大きいほど、小さな画面のフォントサイズの差は小さくなります。 値が小さいほど、小さい画面のフォントサイズが大きくなります。 値は1より大きくなければなりません。
-- `variants` (*Array<string>* [optional]): Default to all. 処理するタイポグラフィバリアント。
+- `variants` (*Array<String>* [optional]): Default to all. 処理するタイポグラフィバリアント。
#### 戻り値
diff --git a/docs/src/pages/customization/theming/theming-pt.md b/docs/src/pages/customization/theming/theming-pt.md
index 733d96e6fee01b..df0ac7fa2c5248 100644
--- a/docs/src/pages/customization/theming/theming-pt.md
+++ b/docs/src/pages/customization/theming/theming-pt.md
@@ -29,7 +29,7 @@ Você pode conferir a [seção de tema padrão](/customization/default-theme/) p
### Variáveis customizáveis
-Quando usando o tema do Material-UI com nossa [solução de estilo](/styles/basics/) ou [quaisquer outras](/guides/interoperability/#themeprovider), surgem algumas necessidades de customização. Pode ser conveniente adicionar variáveis adicionais ao tema para que você possa usá-las em todos os lugares. Por exemplo:
+When using Material-UI's theme with the [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). Pode ser conveniente adicionar variáveis adicionais ao tema para que você possa usá-las em todos os lugares. Por exemplo:
{{"demo": "pages/customization/theming/CustomStyles.js"}}
@@ -95,10 +95,10 @@ Gera configurações de tipografia responsivas com base nas opções recebidas.
1. `theme` (*Object*): O objeto de tema a ser aplicado as alterações.
2. `options` (*Object* [opcional]):
-- `breakpoints` (*Array<string>* [opcional]): Padrão `['sm', 'md', 'lg']`. Array de [pontos de quebra](/customization/breakpoints/) (identificadores).
+- `breakpoints` (*Array<String>* [optional]): Default to `['sm', 'md', 'lg']`. Array de [pontos de quebra](/customization/breakpoints/) (identificadores).
- `disableAlign` (*Boolean* [opcional]): Padrão `false`. Se os tamanhos de fonte mudam pouco, as alturas da linha são preservadas e alinhadas à altura da linha da grade em 4px do Material Design. Isso requer uma altura de linha sem unidade nos estilos do tema.
- `factor` (*Number* [opcional]): Padrão `2`. Este valor determina o fator de redimensionamento do tamanho da fonte. Quanto maior o valor, menor a diferença entre tamanhos de fonte em telas pequenas. Quanto menor o valor, maiores os tamanhos de fonte para telas pequenas. O valor deve ser maior que 1.
-- `variants` (*Array<string>* [opcional]): Padrão todos. As variantes de tipografia para manipular.
+- `variants` (*Array<String>* [optional]): Default to all. As variantes de tipografia para manipular.
#### Retornos
diff --git a/docs/src/pages/customization/theming/theming-ru.md b/docs/src/pages/customization/theming/theming-ru.md
index 96801c5f4e9a32..6a07d0fcbdbcdb 100644
--- a/docs/src/pages/customization/theming/theming-ru.md
+++ b/docs/src/pages/customization/theming/theming-ru.md
@@ -29,7 +29,7 @@ You can check out the [default theme section](/customization/default-theme/) to
### Custom variables
-When using Material-UI's theme with our [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
+When using Material-UI's theme with the [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
{{"demo": "pages/customization/theming/CustomStyles.js"}}
@@ -95,10 +95,10 @@ Generate responsive typography settings based on the options received.
1. `theme` (*Object*): The theme object to enhance.
2. `options` (*Object* [optional]):
-- `breakpoints` (*Array<string>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
+- `breakpoints` (*Array<String>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
- `disableAlign` (*Boolean* [optional]): Default to `false`. Whether font sizes change slightly so line heights are preserved and align to Material Design's 4px line height grid. This requires a unitless line height in the theme's styles.
- `factor` (*Number* [optional]): Default to `2`. This value determines the strength of font size resizing. The higher the value, the less difference there is between font sizes on small screens. The lower the value, the bigger font sizes for small screens. The value must be greater than 1.
-- `variants` (*Array<string>* [optional]): Default to all. The typography variants to handle.
+- `variants` (*Array<String>* [optional]): Default to all. The typography variants to handle.
#### Возвращает
diff --git a/docs/src/pages/customization/theming/theming-zh.md b/docs/src/pages/customization/theming/theming-zh.md
index 867472b602934d..4ba375da9bbf17 100644
--- a/docs/src/pages/customization/theming/theming-zh.md
+++ b/docs/src/pages/customization/theming/theming-zh.md
@@ -29,7 +29,7 @@ You can check out the [default theme section](/customization/default-theme/) to
### Custom variables
-当您使用 Material-UI 的主题通过我们的[造型解决方案](/styles/basics/)或[任何其他](/guides/interoperability/#themeprovider)的时候。 It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
+When using Material-UI's theme with the [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
{{"demo": "pages/customization/theming/CustomStyles.js"}}
@@ -95,10 +95,10 @@ Generate responsive typography settings based on the options received.
1. `theme` (*Object*): The theme object to enhance.
2. `options` (*Object* [optional]):
-- `breakpoints` (*Array<string>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
+- `breakpoints` (*Array<String>* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
- `disableAlign` (*Boolean* [optional]): Default to `false`. Whether font sizes change slightly so line heights are preserved and align to Material Design's 4px line height grid. This requires a unitless line height in the theme's styles.
- `factor` (*Number* [optional]): Default to `2`. This value determines the strength of font size resizing. The higher the value, the less difference there is between font sizes on small screens. The lower the value, the bigger font sizes for small screens. 该值必须大于1。
-- `variants` (*Array<string>* [optional]): Default to all. The typography variants to handle.
+- `variants` (*Array<String>* [optional]): Default to all. The typography variants to handle.
#### 返回结果
diff --git a/docs/src/pages/customization/typography/typography-aa.md b/docs/src/pages/customization/typography/typography-aa.md
index 7506fba443298c..a12543a8b42740 100644
--- a/docs/src/pages/customization/typography/typography-aa.md
+++ b/docs/src/pages/customization/typography/typography-aa.md
@@ -2,52 +2,52 @@
<p class="description">crwdns94012:0crwdne94012:0</p>
-crwdns94014:0crwdne94014:0 crwdns94016:0crwdne94016:0
-
-crwdns94018:0crwdne94018:0
-
## crwdns94020:0crwdne94020:0
-crwdns94022:0crwdne94022:0
+crwdns100978:0crwdne100978:0
+
+crwdns100980:0crwdne100980:0
```js
crwdns94024:0crwdne94024:0
```
-## crwdns94026:0crwdne94026:0
+### crwdns100982:0crwdne100982:0
-crwdns94028:0crwdne94028:0
+crwdns100984:0crwdne100984:0
-crwdns94030:0crwdne94030:0 crwdns94032:0crwdne94032:0 crwdns94034:0crwdne94034:0
+crwdns100986:0crwdne100986:0 crwdns100988:0crwdne100988:0 crwdns100990:0crwdne100990:0
```js
crwdns94036:0${RalewayWoff2}crwdne94036:0
```
-crwdns94038:0crwdne94038:0 crwdns94040:0crwdne94040:0
+crwdns100992:0crwdne100992:0 crwdns100994:0crwdne100994:0
```js
-crwdns94042:0[raleway]crwdne94042:0
+crwdns100996:0{
+ fontFamily: 'Raleway, Arial',
+ }crwdnd100996:0[raleway]crwdne100996:0
```
-## crwdns94044:0crwdne94044:0
+## crwdns100998:0crwdne100998:0
-crwdns94046:0crwdne94046:0 crwdns94048:0crwdne94048:0 crwdns94050:0crwdne94050:0
+crwdns101000:0crwdne101000:0 crwdns101002:0crwdne101002:0 crwdns101004:0crwdne101004:0
-crwdns94052:0crwdne94052:0 crwdns94054:0crwdne94054:0
+crwdns101006:0crwdne101006:0 crwdns101008:0crwdne101008:0
```js
crwdns94056:0crwdne94056:0
crwdns94058:0crwdne94058:0
```
-crwdns94060:0crwdne94060:0
+crwdns101010:0crwdne101010:0
- <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
+ <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## crwdns94066:0crwdne94066:0
+### crwdns101016:0crwdne101016:0
-crwdns94068:0crwdne94068:0 crwdns94070:0crwdne94070:0 crwdns94072:0crwdne94072:0 crwdns94074:0crwdne94074:0 crwdns94076:0crwdne94076:0
+crwdns101018:0crwdne101018:0 crwdns101020:0crwdne101020:0 crwdns101200:0crwdne101200:0 crwdns101202:0crwdne101202:0
```js
crwdns94078:0crwdne94078:0
@@ -58,13 +58,13 @@ crwdns94078:0crwdne94078:0
crwdns94082:0crwdne94082:0
```
-*crwdns94084:0crwdne94084:0*
+*crwdns101028:0crwdne101028:0*
-crwdns94086:0crwdne94086:0
+crwdns101030:0crwdne101030:0
-## crwdns94088:0crwdne94088:0
+### crwdns101032:0crwdne101032:0
-crwdns94090:0crwdne94090:0 crwdns94092:0crwdne94092:0
+crwdns101034:0crwdne101034:0 crwdns101036:0crwdne101036:0
```js
crwdns94094:0{
@@ -74,14 +74,54 @@ crwdns94094:0{
}crwdne94094:0
```
-crwdns94096:0crwdne94096:0
+crwdns101038:0crwdne101038:0
+
+crwdns101040:0crwdne101040:0
+
+crwdns101042:0crwdne101042:0 crwdns101044:0crwdne101044:0
+
+```js
+crwdns101046:0{ createMuiTheme, responsiveFontSizes }crwdne101046:0
+```
+
+crwdns101048:0crwdne101048:0
+
+### crwdns101050:0crwdne101050:0
+
+crwdns101052:0crwdne101052:0
+
+## crwdns101054:0crwdne101054:0
-crwdns94098:0crwdne94098:0
+crwdns101056:0crwdne101056:0
-crwdns94100:0crwdne94100:0 crwdns94102:0crwdne94102:0
+- crwdns101058:0crwdne101058:0
+- crwdns101060:0crwdne101060:0
+- crwdns101062:0crwdne101062:0
+- crwdns101064:0crwdne101064:0
+- crwdns101066:0crwdne101066:0
+- crwdns101068:0crwdne101068:0
+- crwdns101070:0crwdne101070:0
+- crwdns101072:0crwdne101072:0
+- crwdns101074:0crwdne101074:0
+- crwdns101076:0crwdne101076:0
+- crwdns101078:0crwdne101078:0
+- crwdns101080:0crwdne101080:0
+- crwdns101082:0crwdne101082:0
+
+crwdns101084:0crwdne101084:0
+
+```js
+crwdns101086:0{
+ fontSize: 12,
+ }crwdnd101086:0{
+ fontWeight: 500,
+ }crwdnd101086:0{
+ fontStyle: 'italic',
+ }crwdne101086:0
+```
-crwdns94104:0crwdne94104:0
+crwdns101088:0crwdne101088:0
-## crwdns94106:0crwdne94106:0
+## crwdns101090:0crwdne101090:0
-crwdns94108:0crwdne94108:0
\ No newline at end of file
+crwdns101092:0crwdne101092:0
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-de.md b/docs/src/pages/customization/typography/typography-de.md
index bf445eba4a05c9..c2553050e31d04 100644
--- a/docs/src/pages/customization/typography/typography-de.md
+++ b/docs/src/pages/customization/typography/typography-de.md
@@ -2,13 +2,11 @@
<p class="description">Das Theme bietet eine Anzahl von Schriftgrößen, die gut zusammen mit dem Layoutraster funktionieren.</p>
-The following example demonstrates how to change the [default values](/customization/default-theme/?expend-path=$.typography) of the typography in the theme. You can learn more about how to use the [Typography component](/components/typography/) by checking out the dedicated page.
-
-{{"demo": "pages/customization/typography/TypographyTheme.js"}}
-
## Schriftfamilie
-Sie können die Systemschriftart anstelle der Standardschriftart Roboto verwenden.
+You can change the font family with the `theme.typography.fontFamily` property.
+
+For instance, this demo use the system font instead of the default Roboto font:
```js
const theme = createMuiTheme({
@@ -29,11 +27,11 @@ const theme = createMuiTheme({
});
```
-## Bereitstellen von eigenen Schriftarten
+### Self-hosted fonts
-Um Schriftarten selbst zu hosten, laden Sie diese als ` ttf`, ` woff ` und/oder ` woff2 ` herunter und importieren Sie diese in Ihren Code.
+To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
-⚠️ Voraussetzung dafür ist, dass Sie in Ihrem Build-Prozess ein Plugin oder Loader haben, dass das Laden von `ttf`, `woff` und `woff2` Datein ermöglicht. Schriftarten werden *nicht * in deinen Bundle eingebettet sein. Sie werden von Ihrem Webserver anstelle von CDN geladen.
+⚠️ This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and `woff2` files. Fonts will *not* be embedded within your bundle. They will be loaded from your webserver instead of a CDN.
```js
import RalewayWoff2 from './fonts/Raleway-Regular.woff2';
@@ -52,24 +50,12 @@ const raleway = {
};
```
-Dann können Sie das Theme ändern, um diese neue Schriftart zu verwenden. Um Raleway global als Schriftart zu definieren, verwenden Sie die [`CssBaseline`](/components/css-baseline/) Komponente.
+Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
```js
const theme = createMuiTheme({
typography: {
- fontFamily: [
- 'Raleway',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
+ fontFamily: 'Raleway, Arial',
},
overrides: {
MuiCssBaseline: {
@@ -83,9 +69,9 @@ const theme = createMuiTheme({
## Schriftgröße
-Material-UI verwendet `rem` Einheiten für die Schriftgröße. Die Standardschriftgröße des Browsers `<html>` ist `16px`, aber Browser haben eine Option, um diesen Wert zu ändern, deshalb ermöglichen es uns `rem` Einheiten, die Einstellungen des Benutzers anzupassen, was zu einer viel besseren Benutzererfahrung führt. Benutzer ändern Schriftgröße aus alle Arten von Gründen, von Sehschwäche bis zu optimalen Einstellungen für Geräte, die sehr unterschiedlich in Größe und Betrachtungsabstand sein können.
+Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
-Um die Schriftgröße der Material-UI zu ändern, können Sie eine `fontSize` Eigenschaft angeben. Der Standardwert ist `14px`.
+To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`.
```js
const theme = createMuiTheme({
@@ -97,13 +83,13 @@ const theme = createMuiTheme({
});
```
-Die vom Browser berechnete Schriftgröße folgt dieser mathematischen Gleichung:
+The computed font size by the browser follows this mathematical equation:
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## HTML-Schriftgröße
+### HTML font size
-Möglicherweise möchten Sie die Standardschriftgröße des `<html>` Elements ändern. Zum Beispiel bei der Verwendung der [10px-Vereinfachung](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). Wir bieten eine `htmlFontSize` Theme-Eigenschaft für diesen Anwendungsfall an. Es sagt dem Material-UI, was die Schriftgröße des `<html>`-Elements ist. Es wird verwendet, um den `rem` Wert einzustellen, damit die berechnete Schriftgröße immer der Spezifikation entspricht.
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `<html>` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification.
```js
const theme = createMuiTheme({
@@ -120,13 +106,13 @@ html {
}
```
-*Sie müssen das obige CSS auf das HTML-Element dieser Seite anwenden, um die unten stehende Demo korrekt anzuzeigen*
+*You need to apply the above CSS on the html element of this page to see the below demo rendered correctly*
{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-## Responsive Schriftgrößen
+### Responsive font sizes
-Die Eigenschaften der Typografievarianten werden direkt dem generierten CSS zugeordnet. Sie können in ihnen [Medienabfragen](/customization/breakpoints/#api) verwenden:
+The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them:
```js
const theme = createMuiTheme();
@@ -146,10 +132,59 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
-Sie können dies in dem folgenden Beispiel in Aktion sehen. Passen Sie die Fenstergröße Ihres Browsers an und beachten Sie, wie sich die Schriftgröße ändert, wenn die Breite die unterschiedlichen [Haltepunkte](/customization/breakpoints/) überschreitet:
+You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/):
+
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
{{"demo": "pages/customization/typography/ResponsiveFontSizes.js"}}
-## Fließende Schriftgrößen
+### Fluid font sizes
+
+To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
+
+## Varianten
+
+The typography object comes with [13 variants](/components/typography/#component) by default:
+
+- h1
+- h2
+- h3
+- h4
+- h5
+- h6
+- subtitle1
+- subtitle2
+- body1
+- body2
+- button
+- caption
+- overline
+
+Each of these variants can be customized individually:
+
+```js
+const theme = createMuiTheme({
+ typography: {
+ subtitle1: {
+ fontSize: 12,
+ },
+ body1: {
+ fontWeight: 500,
+ },
+ button: {
+ fontStyle: 'italic',
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/typography/TypographyVariants.js"}}
+
+## Default values
-Noch zu tun: [#15251](https://github.com/mui-org/material-ui/issues/15251).
\ No newline at end of file
+You can explore the default values of the typography using [the theme explorer](/customization/default-theme/?expend-path=$.typography) or by opening the dev tools console on this page (`window.theme.typography`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-es.md b/docs/src/pages/customization/typography/typography-es.md
index 546269eb1e35a4..ac13c4213444a9 100644
--- a/docs/src/pages/customization/typography/typography-es.md
+++ b/docs/src/pages/customization/typography/typography-es.md
@@ -2,13 +2,11 @@
<p class="description">The theme provides a set of type sizes that work well together, and also with the layout grid.</p>
-The following example demonstrates how to change the [default values](/customization/default-theme/?expend-path=$.typography) of the typography in the theme. You can learn more about how to use the [Typography component](/components/typography/) by checking out the dedicated page.
-
-{{"demo": "pages/customization/typography/TypographyTheme.js"}}
-
## Font family
-You can use the system font instead of the default Roboto font.
+You can change the font family with the `theme.typography.fontFamily` property.
+
+For instance, this demo use the system font instead of the default Roboto font:
```js
const theme = createMuiTheme({
@@ -29,7 +27,7 @@ const theme = createMuiTheme({
});
```
-## Self-host fonts
+### Self-hosted fonts
To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
@@ -52,24 +50,12 @@ const raleway = {
};
```
-Then, you can change the theme to use this new font. In order to globally define Raleway as a font face the [`CssBaseline`](/components/css-baseline/) component needs to be used.
+Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
```js
const theme = createMuiTheme({
typography: {
- fontFamily: [
- 'Raleway',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
+ fontFamily: 'Raleway, Arial',
},
overrides: {
MuiCssBaseline: {
@@ -83,7 +69,7 @@ const theme = createMuiTheme({
## Font size
-Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a much better user experience. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
+Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`.
@@ -101,9 +87,9 @@ The computed font size by the browser follows this mathematical equation:
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## HTML font size
+### HTML font size
-You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). We provide a `htmlFontSize` theme property for this use case. It's telling Material-UI what's the font-size on the `<html>` element is. It's used to adjust the `rem` value so the calculated font-size always match the specification.
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `<html>` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification.
```js
const theme = createMuiTheme({
@@ -124,7 +110,7 @@ html {
{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-## Responsive font sizes
+### Responsive font sizes
The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them:
@@ -148,8 +134,57 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization
You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/):
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
+
{{"demo": "pages/customization/typography/ResponsiveFontSizes.js"}}
-## Fluid font sizes
+### Fluid font sizes
+
+To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
+
+## Variants
+
+The typography object comes with [13 variants](/components/typography/#component) by default:
+
+- h1
+- h2
+- h3
+- h4
+- h5
+- h6
+- subtitle1
+- subtitle2
+- body1
+- body2
+- button
+- caption
+- overline
+
+Each of these variants can be customized individually:
+
+```js
+const theme = createMuiTheme({
+ typography: {
+ subtitle1: {
+ fontSize: 12,
+ },
+ body1: {
+ fontWeight: 500,
+ },
+ button: {
+ fontStyle: 'italic',
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/typography/TypographyVariants.js"}}
+
+## Default values
-To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
\ No newline at end of file
+You can explore the default values of the typography using [the theme explorer](/customization/default-theme/?expend-path=$.typography) or by opening the dev tools console on this page (`window.theme.typography`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-fr.md b/docs/src/pages/customization/typography/typography-fr.md
index 5227f497e37265..9c5970d05848fc 100644
--- a/docs/src/pages/customization/typography/typography-fr.md
+++ b/docs/src/pages/customization/typography/typography-fr.md
@@ -2,13 +2,11 @@
<p class="description">The theme provides a set of type sizes that work well together, and also with the layout grid.</p>
-The following example demonstrates how to change the [default values](/customization/default-theme/?expend-path=$.typography) of the typography in the theme. You can learn more about how to use the [Typography component](/components/typography/) by checking out the dedicated page.
-
-{{"demo": "pages/customization/typography/TypographyTheme.js"}}
-
## Font family
-You can use the system font instead of the default Roboto font.
+You can change the font family with the `theme.typography.fontFamily` property.
+
+For instance, this demo use the system font instead of the default Roboto font:
```js
const theme = createMuiTheme({
@@ -29,7 +27,7 @@ const theme = createMuiTheme({
});
```
-## Self-host fonts
+### Self-hosted fonts
To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
@@ -52,24 +50,12 @@ const raleway = {
};
```
-Then, you can change the theme to use this new font. In order to globally define Raleway as a font face the [`CssBaseline`](/components/css-baseline/) component needs to be used.
+Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
```js
const theme = createMuiTheme({
typography: {
- fontFamily: [
- 'Raleway',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
+ fontFamily: 'Raleway, Arial',
},
overrides: {
MuiCssBaseline: {
@@ -83,7 +69,7 @@ const theme = createMuiTheme({
## Font size
-Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a much better user experience. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
+Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`.
@@ -101,9 +87,9 @@ The computed font size by the browser follows this mathematical equation:
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## HTML font size
+### HTML font size
-You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). We provide a `htmlFontSize` theme property for this use case. It's telling Material-UI what's the font-size on the `<html>` element is. It's used to adjust the `rem` value so the calculated font-size always match the specification.
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `<html>` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification.
```js
const theme = createMuiTheme({
@@ -124,7 +110,7 @@ html {
{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-## Responsive font sizes
+### Responsive font sizes
The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them:
@@ -148,8 +134,57 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization
You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/):
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
+
{{"demo": "pages/customization/typography/ResponsiveFontSizes.js"}}
-## Fluid font sizes
+### Fluid font sizes
+
+To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
+
+## Variants
+
+The typography object comes with [13 variants](/components/typography/#component) by default:
+
+- h1
+- h2
+- h3
+- h4
+- h5
+- h6
+- subtitle1
+- subtitle2
+- body1
+- body2
+- button
+- caption
+- overline
+
+Each of these variants can be customized individually:
+
+```js
+const theme = createMuiTheme({
+ typography: {
+ subtitle1: {
+ fontSize: 12,
+ },
+ body1: {
+ fontWeight: 500,
+ },
+ button: {
+ fontStyle: 'italic',
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/typography/TypographyVariants.js"}}
+
+## Default values
-To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
\ No newline at end of file
+You can explore the default values of the typography using [the theme explorer](/customization/default-theme/?expend-path=$.typography) or by opening the dev tools console on this page (`window.theme.typography`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-ja.md b/docs/src/pages/customization/typography/typography-ja.md
index 18f327f29cf811..dd4e634ef321d4 100644
--- a/docs/src/pages/customization/typography/typography-ja.md
+++ b/docs/src/pages/customization/typography/typography-ja.md
@@ -2,13 +2,11 @@
<p class="description">このテーマには、一緒に使用できるタイプサイズのセットと、レイアウトグリッドがあります。</p>
-次の例に、テーマの体裁の[default values](/customization/default-theme/?expend-path=$.typography)を変更する方法を示します。 [Typography component](/components/typography/)の使用方法については、専用ページを参照してください。
-
-{{"demo": "pages/customization/typography/TypographyTheme.js"}}
-
## フォントファミリー
-デフォルトのRobotoフォントの代わりにシステムフォントを使用できます。
+You can change the font family with the `theme.typography.fontFamily` property.
+
+For instance, this demo use the system font instead of the default Roboto font:
```js
const theme = createMuiTheme({
@@ -29,11 +27,11 @@ const theme = createMuiTheme({
});
```
-## セルフホストフォント
+### Self-hosted fonts
-セルフホストフォントを作成するには、`ttf`、`woff`、または`woff2`形式のフォントファイルをダウンロードし、コードに読み込みます。
+To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
-⚠️これには、ビルドプロセスに`ttf`、` woff ` 、および ` woff2 `の読み込みを処理できるプラグインまたはローダーが必要です。 フォントはバンドルに*埋め込まれません*。 それらは、 CDNの代わりにWebサーバーからロードされます。
+⚠️ This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and `woff2` files. Fonts will *not* be embedded within your bundle. They will be loaded from your webserver instead of a CDN.
```js
import RalewayWoff2 from './fonts/Raleway-Regular.woff2';
@@ -52,24 +50,12 @@ const raleway = {
};
```
-次に、この新しいフォントを使用するようにテーマを変更できます。 Ralewayをフォントフェースとしてグローバルに定義するには、[`CssBaseline`](/components/css-baseline/)コンポーネントを使用する必要があります。
+Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
```js
const theme = createMuiTheme({
typography: {
- fontFamily: [
- 'Raleway',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
+ fontFamily: 'Raleway, Arial',
},
overrides: {
MuiCssBaseline: {
@@ -83,9 +69,9 @@ const theme = createMuiTheme({
## フォントサイズ
-Material-UIでは、フォントサイズに`rem`単位を使用します。 ブラウザ`<html>`要素のデフォルトのフォントサイズは`16px`ですが、ブラウザにはこの値を変更するオプションがあります。 そのため、`rem`ユニットを使用することで、ユーザの設定に対応し、より優れたユーザエクスペリエンスを実現できます。 ユーザーは、視力の低下から最適な設定の選択まで、さまざまな理由でフォントサイズの設定を変更できます。サイズや表示距離が大幅に異なるデバイスにも対応できます。
+Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
-Material-UIのフォントサイズを変更するには、` fontSize `プロパティを。 デフォルト値は` 14pxです` 。
+To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`.
```js
const theme = createMuiTheme({
@@ -97,13 +83,13 @@ const theme = createMuiTheme({
});
```
-ブラウザで計算されるフォントサイズは、次の数式に従います。
+The computed font size by the browser follows this mathematical equation:
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## HTMLフォントサイズ
+### HTML font size
-`<html>`要素のデフォルトのフォントサイズを変更することもできます。 たとえば、[ 10pxの単純化を使用する場合](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) 。 この使用例には、`htmlFontSize`テーマのプロパティが用意されています。 Material-UIに、`<html>`要素のfont-sizeが何であるかを伝えています。 これは`rem`値を調整するために使用され、計算されたfont-sizeが常に指定と一致するようにします。
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `<html>` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification.
```js
const theme = createMuiTheme({
@@ -120,13 +106,13 @@ html {
}
```
-*以下のデモを正しく表示するには、このページのhtml要素に上記のCSSを適用する必要があります*
+*You need to apply the above CSS on the html element of this page to see the below demo rendered correctly*
{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-## レスポンシブフォントサイズ
+### Responsive font sizes
-Typographyバリアント型プロパティは、生成されたCSSに直接マップされます。 [media queries](/customization/breakpoints/#api) を使用できます：
+The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them:
```js
const theme = createMuiTheme();
@@ -142,14 +128,63 @@ theme.typography.h1 = {
};
```
-この設定を自動化するには、[`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme)ヘルパーを使用して、テーマのタイポグラフィフォントサイズを応答可能にします。
+To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
-以下の例で実際にこれを見ることができます。 ブラウザのウィンドウサイズを調整し、幅が異なる[ブレークポイント](/customization/breakpoints/)を横切るときにフォントサイズがどのように変化するかを確認します。
+You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/):
+
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
{{"demo": "pages/customization/typography/ResponsiveFontSizes.js"}}
-## 滑らかなフォントサイズ
+### Fluid font sizes
+
+To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
+
+## Variants
+
+The typography object comes with [13 variants](/components/typography/#component) by default:
+
+- h1
+- h2
+- h3
+- h4
+- h5
+- h6
+- subtitle1
+- subtitle2
+- body1
+- body2
+- button
+- caption
+- overline
+
+Each of these variants can be customized individually:
+
+```js
+const theme = createMuiTheme({
+ typography: {
+ subtitle1: {
+ fontSize: 12,
+ },
+ body1: {
+ fontWeight: 500,
+ },
+ button: {
+ fontStyle: 'italic',
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/typography/TypographyVariants.js"}}
+
+## Default values
-完了予定：[＃15251 ](https://github.com/mui-org/material-ui/issues/15251) 。
\ No newline at end of file
+You can explore the default values of the typography using [the theme explorer](/customization/default-theme/?expend-path=$.typography) or by opening the dev tools console on this page (`window.theme.typography`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-pt.md b/docs/src/pages/customization/typography/typography-pt.md
index ccf6025030cfce..4b37371db923da 100644
--- a/docs/src/pages/customization/typography/typography-pt.md
+++ b/docs/src/pages/customization/typography/typography-pt.md
@@ -2,13 +2,11 @@
<p class="description">O tema fornece um conjunto de tamanhos de tipos que funcionam bem juntos e também com a grade de leiaute.</p>
-O exemplo a seguir demonstra como alterar o [valores padrão](/customization/default-theme/?expend-path=$.typography) da tipografia no tema. Você pode aprender mais sobre como usar o [componente de tipografia](/components/typography/), verificando a página dedicada.
-
-{{"demo": "pages/customization/typography/TypographyTheme.js"}}
-
## Família da fonte
-Você pode usar fonte do sistema em vez da fonte Roboto padrão.
+You can change the font family with the `theme.typography.fontFamily` property.
+
+For instance, this demo use the system font instead of the default Roboto font:
```js
const theme = createMuiTheme({
@@ -29,11 +27,11 @@ const theme = createMuiTheme({
});
```
-## Fontes próprias
+### Self-hosted fonts
-Para utilizar fontes próprias, baixe os arquivos de fonte em formatos `ttf`, `woff`, e/ou `woff2` e importe-os em seu código.
+To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
-⚠️ Isso requer que você tenha um plugin ou loader em seu processo de compilação que possa manipular o carregamento de arquivos `ttf`, `woff` e `woff2`. Fontes *não* serão embutidas dentro do seu pacote. Elas serão carregadas de seu servidor da Web em vez de uma CDN.
+⚠️ This requires that you have a plugin or loader in your build process that can handle loading `ttf`, `woff`, and `woff2` files. Fonts will *not* be embedded within your bundle. They will be loaded from your webserver instead of a CDN.
```js
import RalewayWoff2 from './fonts/Raleway-Regular.woff2';
@@ -52,24 +50,12 @@ const raleway = {
};
```
-Então, você pode alterar o tema para usar essa nova fonte. Para definir globalmente Raleway como uma fonte, o componente [`CssBaseline`](/components/css-baseline/) precisa ser usado.
+Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
```js
const theme = createMuiTheme({
typography: {
- fontFamily: [
- 'Raleway',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
+ fontFamily: 'Raleway, Arial',
},
overrides: {
MuiCssBaseline: {
@@ -83,9 +69,9 @@ const theme = createMuiTheme({
## Tamanho da fonte
-Material-UI usa a unidade `rem` para o tamanho da fonte. O tamanho da fonte padrão do elemento `<html>` do navegador é `16px`, mas os navegadores têm a opção de alterar esse valor, a unidade `rem` nos permite acomodar as configurações do usuário, resultando em uma experiência de usuário muito melhor. Os usuários alteram as configurações de tamanho da fonte por vários motivos, desde problemas de visão, até a escolha de configurações ideais para dispositivos que podem ser muito diferentes em tamanho e distância de visualização.
+Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
-Para alterar o tamanho da fonte do Material-UI, você pode definir a propriedade `fontSize`. O valor padrão é `14px`.
+To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`.
```js
const theme = createMuiTheme({
@@ -97,13 +83,13 @@ const theme = createMuiTheme({
});
```
-O tamanho da fonte computada pelo navegador segue esta equação matemática:
+The computed font size by the browser follows this mathematical equation:
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## Tamanho da fonte no HTML
+### HTML font size
-Você pode querer alterar o tamanho da fonte padrão do elemento `<html>`. Por exemplo, quando usando a [simplificação de 10px](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). Nós fornecemos uma propriedade `htmlFontSize` no tema, para estas necessidades. Ela diz ao Material-UI qual é o tamanho da fonte no elemento `<html>`. É usada para ajustar o valor `rem`, para que o tamanho da fonte calculado sempre corresponda à especificação.
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `<html>` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification.
```js
const theme = createMuiTheme({
@@ -120,13 +106,13 @@ html {
}
```
-*Você precisa aplicar o CSS acima no elemento html desta página para ver a demonstração abaixo renderizada corretamente*
+*You need to apply the above CSS on the html element of this page to see the below demo rendered correctly*
{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-## Tamanhos da fonte responsivo
+### Responsive font sizes
-As propriedades de variações de tipografia são mapeadas diretamente para o CSS gerado. Você pode usar [consultas de mídia](/customization/breakpoints/#api) dentro delas:
+The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them:
```js
const theme = createMuiTheme();
@@ -146,10 +132,59 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
-Você pode ver isso em ação no exemplo abaixo. Ajuste o tamanho da janela do navegador e observe como o tamanho da fonte muda à medida que a largura cruza os diferentes [pontos de quebra](/customization/breakpoints/):
+You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/):
+
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
{{"demo": "pages/customization/typography/ResponsiveFontSizes.js"}}
-## Tamanhos da fonte fluido
+### Fluid font sizes
+
+To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
+
+## Variantes
+
+The typography object comes with [13 variants](/components/typography/#component) by default:
+
+- h1
+- h2
+- h3
+- h4
+- h5
+- h6
+- subtitle1
+- subtitle2
+- body1
+- body2
+- button
+- caption
+- overline
+
+Each of these variants can be customized individually:
+
+```js
+const theme = createMuiTheme({
+ typography: {
+ subtitle1: {
+ fontSize: 12,
+ },
+ body1: {
+ fontWeight: 500,
+ },
+ button: {
+ fontStyle: 'italic',
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/typography/TypographyVariants.js"}}
+
+## Default values
-Para ser feito: [#15251](https://github.com/mui-org/material-ui/issues/15251).
\ No newline at end of file
+You can explore the default values of the typography using [the theme explorer](/customization/default-theme/?expend-path=$.typography) or by opening the dev tools console on this page (`window.theme.typography`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-ru.md b/docs/src/pages/customization/typography/typography-ru.md
index a143f6f2f86834..2c3d696ab520b7 100644
--- a/docs/src/pages/customization/typography/typography-ru.md
+++ b/docs/src/pages/customization/typography/typography-ru.md
@@ -2,13 +2,11 @@
<p class="description">The theme provides a set of type sizes that work well together, and also with the layout grid.</p>
-The following example demonstrates how to change the [default values](/customization/default-theme/?expend-path=$.typography) of the typography in the theme. You can learn more about how to use the [Typography component](/components/typography/) by checking out the dedicated page.
-
-{{"demo": "pages/customization/typography/TypographyTheme.js"}}
-
## Шрифт
-You can use the system font instead of the default Roboto font.
+You can change the font family with the `theme.typography.fontFamily` property.
+
+For instance, this demo use the system font instead of the default Roboto font:
```js
const theme = createMuiTheme({
@@ -29,7 +27,7 @@ const theme = createMuiTheme({
});
```
-## Self-host fonts
+### Self-hosted fonts
To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
@@ -52,24 +50,12 @@ const raleway = {
};
```
-Then, you can change the theme to use this new font. In order to globally define Raleway as a font face the [`CssBaseline`](/components/css-baseline/) component needs to be used.
+Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
```js
const theme = createMuiTheme({
typography: {
- fontFamily: [
- 'Raleway',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
+ fontFamily: 'Raleway, Arial',
},
overrides: {
MuiCssBaseline: {
@@ -83,7 +69,7 @@ const theme = createMuiTheme({
## Font size
-Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a much better user experience. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
+Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`.
@@ -101,9 +87,9 @@ The computed font size by the browser follows this mathematical equation:
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## HTML font size
+### HTML font size
-You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). We provide a `htmlFontSize` theme property for this use case. It's telling Material-UI what's the font-size on the `<html>` element is. It's used to adjust the `rem` value so the calculated font-size always match the specification.
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `<html>` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification.
```js
const theme = createMuiTheme({
@@ -124,7 +110,7 @@ html {
{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-## Responsive font sizes
+### Responsive font sizes
The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them:
@@ -148,8 +134,57 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization
You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/):
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
+
{{"demo": "pages/customization/typography/ResponsiveFontSizes.js"}}
-## Fluid font sizes
+### Fluid font sizes
+
+To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
+
+## Variants
+
+The typography object comes with [13 variants](/components/typography/#component) by default:
+
+- h1
+- h2
+- h3
+- h4
+- h5
+- h6
+- subtitle1
+- subtitle2
+- body1
+- body2
+- button
+- caption
+- overline
+
+Each of these variants can be customized individually:
+
+```js
+const theme = createMuiTheme({
+ typography: {
+ subtitle1: {
+ fontSize: 12,
+ },
+ body1: {
+ fontWeight: 500,
+ },
+ button: {
+ fontStyle: 'italic',
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/typography/TypographyVariants.js"}}
+
+## Default values
-To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
\ No newline at end of file
+You can explore the default values of the typography using [the theme explorer](/customization/default-theme/?expend-path=$.typography) or by opening the dev tools console on this page (`window.theme.typography`).
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-zh.md b/docs/src/pages/customization/typography/typography-zh.md
index c8b12aa6ff57c4..8a73fff49f21f0 100644
--- a/docs/src/pages/customization/typography/typography-zh.md
+++ b/docs/src/pages/customization/typography/typography-zh.md
@@ -2,13 +2,11 @@
<p class="description">The theme provides a set of type sizes that work well together, and also with the layout grid.</p>
-The following example demonstrates how to change the [default values](/customization/default-theme/?expend-path=$.typography) of the typography in the theme. You can learn more about how to use the [Typography component](/components/typography/) by checking out the dedicated page.
-
-{{"demo": "pages/customization/typography/TypographyTheme.js"}}
-
## 字体系列
-您可以使用系统字体而不是默认的Roboto字体。
+You can change the font family with the `theme.typography.fontFamily` property.
+
+For instance, this demo use the system font instead of the default Roboto font:
```js
const theme = createMuiTheme({
@@ -29,7 +27,7 @@ const theme = createMuiTheme({
});
```
-## Self-host fonts
+### Self-hosted fonts
To self-host fonts, download the font files in `ttf`, `woff`, and/or `woff2` formats and import them into your code.
@@ -52,24 +50,12 @@ const raleway = {
};
```
-Then, you can change the theme to use this new font. In order to globally define Raleway as a font face the [`CssBaseline`](/components/css-baseline/) component needs to be used.
+Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
```js
const theme = createMuiTheme({
typography: {
- fontFamily: [
- 'Raleway',
- '-apple-system',
- 'BlinkMacSystemFont',
- '"Segoe UI"',
- 'Roboto',
- '"Helvetica Neue"',
- 'Arial',
- 'sans-serif',
- '"Apple Color Emoji"',
- '"Segoe UI Emoji"',
- '"Segoe UI Symbol"',
- ].join(','),
+ fontFamily: 'Raleway, Arial',
},
overrides: {
MuiCssBaseline: {
@@ -83,7 +69,7 @@ const theme = createMuiTheme({
## 字体大小
-Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a much better user experience. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
+Material-UI uses `rem` units for the font size. The browser `<html>` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.
To change the font-size of Material-UI you can provide a `fontSize` property. The default value is `14px`.
@@ -101,9 +87,9 @@ The computed font size by the browser follows this mathematical equation:
 <!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
-## HTML字体大小
+### HTML font size
-You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). We provide a `htmlFontSize` theme property for this use case. It's telling Material-UI what's the font-size on the `<html>` element is. It's used to adjust the `rem` value so the calculated font-size always match the specification.
+You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/). An `htmlFontSize` theme property is provided for this use case, which tells Material-UI what the font-size on the `<html>` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification.
```js
const theme = createMuiTheme({
@@ -124,7 +110,7 @@ html {
{{"demo": "pages/customization/typography/FontSizeTheme.js"}}
-## 响应的字体大小
+### Responsive font sizes
The typography variants properties map directly to the generated CSS. You can use [media queries](/customization/breakpoints/#api) inside them:
@@ -148,8 +134,57 @@ To automate this setup, you can use the [`responsiveFontSizes()`](/customization
You can see this in action in the example below. adjust your browser's window size, and notice how the font size changes as the width crosses the different [breakpoints](/customization/breakpoints/):
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
+
{{"demo": "pages/customization/typography/ResponsiveFontSizes.js"}}
-## Fluid font sizes
+### Fluid font sizes
+
+To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
+
+## 变种(Variants)
+
+The typography object comes with [13 variants](/components/typography/#component) by default:
+
+- h1
+- h2
+- h3
+- h4
+- h5
+- h6
+- subtitle1
+- subtitle2
+- body1
+- body2
+- button
+- caption
+- overline
+
+Each of these variants can be customized individually:
+
+```js
+const theme = createMuiTheme({
+ typography: {
+ subtitle1: {
+ fontSize: 12,
+ },
+ body1: {
+ fontWeight: 500,
+ },
+ button: {
+ fontStyle: 'italic',
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/typography/TypographyVariants.js"}}
+
+## Default values
-To be done: [#15251](https://github.com/mui-org/material-ui/issues/15251).
\ No newline at end of file
+You can explore the default values of the typography using [the theme explorer](/customization/default-theme/?expend-path=$.typography) or by opening the dev tools console on this page (`window.theme.typography`).
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/changelog/changelog-ja.md b/docs/src/pages/discover-more/changelog/changelog-ja.md
index f29f65fc2cae73..269104bbf3ad5a 100644
--- a/docs/src/pages/discover-more/changelog/changelog-ja.md
+++ b/docs/src/pages/discover-more/changelog/changelog-ja.md
@@ -2,4 +2,4 @@
<p class="description">Material-UIは厳密にSemantic Versioning 2.0. 0に従います。</p>
-All notable changes are described in the [CHANGELOG.md file](https://github.com/mui-org/material-ui/blob/master/CHANGELOG.md).
\ No newline at end of file
+重要な変更はすべて[ CHANGELOG.mdファイルに記載されています](https://github.com/mui-org/material-ui/blob/master/CHANGELOG.md) 。
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/languages/languages-ja.md b/docs/src/pages/discover-more/languages/languages-ja.md
index 65f8840b1a064e..e17738ee7cdd12 100644
--- a/docs/src/pages/discover-more/languages/languages-ja.md
+++ b/docs/src/pages/discover-more/languages/languages-ja.md
@@ -1,5 +1,5 @@
# 言語設定
-<p class="description">The Material-UI documentation is available in the following languages.</p>
+<p class="description">Material-UIドキュメントは、次の言語で利用可能です。</p>
{{"demo": "pages/discover-more/languages/Languages.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-aa.md b/docs/src/pages/discover-more/related-projects/related-projects-aa.md
index df2c2454e58c91..f0982127377255 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-aa.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-aa.md
@@ -1,22 +1,49 @@
# crwdns94158:0crwdne94158:0
-<p class="description">crwdns94160:0crwdne94160:0</p>
+<p class="description">crwdns101204:0crwdne101204:0</p>
-crwdns94162:0crwdne94162:0 crwdns94164:0crwdne94164:0
+crwdns94162:0crwdne94162:0 crwdns101206:0crwdne101206:0
## crwdns94166:0crwdne94166:0
- crwdns94168:0crwdne94168:0
-## crwdns94170:0crwdne94170:0
+## crwdns100880:0crwdne100880:0
-crwdns94172:0crwdne94172:0
+- crwdns100882:0crwdne100882:0
+- crwdns100884:0crwdne100884:0
-- crwdns94174:0crwdne94174:0
-- crwdns94176:0crwdne94176:0
-- crwdns94178:0crwdne94178:0
-- crwdns94180:0crwdne94180:0
-- crwdns94182:0crwdne94182:0
-- crwdns94184:0crwdne94184:0
-- crwdns94186:0crwdne94186:0
-- crwdns94188:0crwdne94188:0 crwdns94190:0crwdne94190:0
\ No newline at end of file
+## crwdns100886:0crwdne100886:0
+
+crwdns100888:0crwdne100888:0
+
+### crwdns100890:0crwdne100890:0
+
+- crwdns100892:0crwdne100892:0 crwdns100894:0crwdne100894:0 crwdns100896:0crwdne100896:0
+- crwdns100898:0crwdne100898:0
+- crwdns100900:0crwdne100900:0
+
+### crwdns100902:0crwdne100902:0
+
+- crwdns100904:0crwdne100904:0
+- crwdns100906:0crwdne100906:0
+- crwdns100908:0crwdne100908:0
+- crwdns100910:0crwdne100910:0
+
+### crwdns100912:0crwdne100912:0
+
+- crwdns100914:0crwdne100914:0
+
+### crwdns100916:0crwdne100916:0
+
+- crwdns100918:0crwdne100918:0
+
+### crwdns100920:0crwdne100920:0
+
+- crwdns100922:0crwdne100922:0 crwdns100924:0crwdne100924:0 crwdns100926:0crwdne100926:0
+
+## crwdns100928:0crwdne100928:0
+
+- crwdns100930:0crwdne100930:0
+- crwdns100932:0crwdne100932:0
+- crwdns100934:0crwdne100934:0
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-de.md b/docs/src/pages/discover-more/related-projects/related-projects-de.md
index 70e34e050583d9..c43f9700ca543a 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-de.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-de.md
@@ -1,22 +1,49 @@
# Verwandte Projekte
-<p class="description">Wir haben sorgfältig eine Liste von Bibliotheken zusammengestellt, die einen Blick wert sind.</p>
+<p class="description">A carefully curated list of libraries that are worth having a look at.</p>
-Da der Umfang der Probleme, die Material-UI löst, begrenzt ist, versuchen wir, mit anderen Bibliotheken gut zusammen zu arbeiten. Fühlen Sie sich frei, eine Pull-Anfrage einzureichen, um weitere Projekte hinzuzufügen. wir akzeptieren sie, wenn sie unseren Kriterien entsprechen.
+Da der Umfang der Probleme, die Material-UI löst, begrenzt ist, versuchen wir, mit anderen Bibliotheken gut zusammen zu arbeiten. Feel free to submit a pull request to add another project; it will be accepted if it is suitable.
## Design-Ressourcen
- [Figma UI Kit](https://material.5ly.co/) für Material-UI.
-## Bibliotheken
+## Images and illustrations
-Dies ist eine Sammlung von Projekten, die wir auf den Dokumentationsseiten nicht besser in Zusammenhang bringen können.
+- [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
+- [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
-- [Advanced Filter Builder](https://github.com/logipro/logi-filter-builder) Die Komponente hilft Ihren Benutzern, leistungsfähige Filterkriterien zu erstellen.
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Online-Tool zum Erstellen von Material-UI-Designs mit dem Material Design Color Tool.
-- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) Ein Diagramm für die Material-UI, das Daten mit einer Reihe von Serientypen visualisiert, einschließlich Balken, Linien, Flächen, Streuungen, Kreisen usw. ([benutzerdefinierte Lizenz](https://js.devexpress.com/licensing/)).
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) Eine Fuzzy-Suchkomponente für React und Material-UI.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) Ein Tool zum Erstellen von Designs für Ihre Material-UI-Anwendungen, indem Sie einfach die Farben auswählen und eine Live-Vorschau angezeigt bekommen.
-- [mui-downshift](https://github.com/techniq/mui-downshift) Dünne Schicht über dem Herunterschalten von Paypal, um visuelle Komponenten von Material-UI zu verwenden.
-- [react-basket](https://github.com/mbrn/react-basket) A shopping basket components library based on Material-UI components.
-- [Wertarbyte](https://mui.wertarbyte.com/) Dies ist eine Sammlung ergänzender Komponenten, die Wertarbyte gebaut hat. Karussell, Bild, Passwörter, Bewertungen, Symbole, etc.
\ No newline at end of file
+## Komponenten
+
+This is a collection of third-party projects that extend Material-UI.
+
+### Tabellen (Tables)
+
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
+
+### Autovervollständigung (Autocomplete)
+
+- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
+- [mui-downshift](https://github.com/techniq/mui-downshift): Thin layer over paypal's downshift to use Material-UI visual components.
+- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
+- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
+
+### Notifications
+
+- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
+
+### Carousel
+
+- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel): Introduce new users to your app.
+
+### Image
+
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
+
+## Theming
+
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): An online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): Mit dem Material-Palettengenerator können Sie eine Palette für jede von Ihnen eingegebene Farbe erstellen.
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-es.md b/docs/src/pages/discover-more/related-projects/related-projects-es.md
index 80af33db238d6f..29a44b58a4887f 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-es.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-es.md
@@ -1,22 +1,49 @@
# Related projects
-<p class="description">We have carefully curated a list of libraries that are worth having a look at.</p>
+<p class="description">A carefully curated list of libraries that are worth having a look at.</p>
-Because the scope of problems Material-UI solves is limited, we try to play nicely with other libraries. Feel free to submit a pull request to add more projects; we will accept them if they match our criteria.
+Because the scope of problems Material-UI solves is limited, we try to play nicely with other libraries. Feel free to submit a pull request to add another project; it will be accepted if it is suitable.
## Design resources
- [Figma UI Kit](https://material.5ly.co/) for Material-UI.
-## Libraries
+## Images and illustrations
-This is a collection of projects that we couldn't better contextualize in the documentation pages.
+- [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
+- [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
-- [Advanced Filter Builder](https://github.com/logipro/logi-filter-builder) Component will help your users create powerful filter criterias.
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Online tool for creating Material-UI themes via Material Design Color Tool.
-- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) A chart for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more ([custom license](https://js.devexpress.com/licensing/)).
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) A fuzzy-search component for React and Material-UI.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [mui-downshift](https://github.com/techniq/mui-downshift) Thin layer over paypal's downshift to use Material-UI visual components.
-- [react-basket](https://github.com/mbrn/react-basket) A shopping basket components library based on Material-UI components.
-- [Wertarbyte](https://mui.wertarbyte.com/) This is a collection of complementary components Wertarbyte have built. Carousel, Image, Password, Rating, Icons, etc.
\ No newline at end of file
+## Componentes
+
+This is a collection of third-party projects that extend Material-UI.
+
+### Tablas
+
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
+
+### Autocompletado
+
+- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
+- [mui-downshift](https://github.com/techniq/mui-downshift): Thin layer over paypal's downshift to use Material-UI visual components.
+- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
+- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
+
+### Notifications
+
+- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
+
+### Carousel
+
+- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel): Introduce new users to your app.
+
+### Image
+
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
+
+## Temática
+
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): An online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-fr.md b/docs/src/pages/discover-more/related-projects/related-projects-fr.md
index 0536ff4030d836..b5465dce4b3804 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-fr.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-fr.md
@@ -1,22 +1,49 @@
# Projets liés
-<p class="description">Nous avons soigneusement préparé une liste de bibliothèques qui méritent d’être examinées.</p>
+<p class="description">A carefully curated list of libraries that are worth having a look at.</p>
-Les problèmes résolus par Material-UI étant limités, nous essayons de jouer avec autres bibliothèques. N'hésitez pas à soumettre une pull request pour ajouter plus de projets; nous les accepterons s'ils correspondent à nos critères.
+Les problèmes résolus par Material-UI étant limités, nous essayons de jouer avec autres bibliothèques. Feel free to submit a pull request to add another project; it will be accepted if it is suitable.
## Design resources
- [Figma UI Kit](https://material.5ly.co/) for Material-UI.
-## Libraries
+## Images and illustrations
-This is a collection of projects that we couldn't better contextualize in the documentation pages.
+- [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
+- [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
-- [Advanced Filter Builder](https://github.com/logipro/logi-filter-builder) Component will help your users create powerful filter criterias.
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Online tool for creating Material-UI themes via Material Design Color Tool.
-- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) A chart for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more ([custom license](https://js.devexpress.com/licensing/)).
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) A fuzzy-search component for React and Material-UI.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [mui-downshift](https://github.com/techniq/mui-downshift) Thin layer over paypal's downshift to use Material-UI visual components.
-- [react-basket](https://github.com/mbrn/react-basket) A shopping basket components library based on Material-UI components.
-- [Wertarbyte](https://mui.wertarbyte.com/) This is a collection of complementary components Wertarbyte have built. Carousel, Image, Password, Rating, Icons, etc.
\ No newline at end of file
+## Composants
+
+This is a collection of third-party projects that extend Material-UI.
+
+### Table (Tableaux)
+
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
+
+### Autocomplete (Auto-complétion)
+
+- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
+- [mui-downshift](https://github.com/techniq/mui-downshift): Thin layer over paypal's downshift to use Material-UI visual components.
+- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
+- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
+
+### Notifications
+
+- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
+
+### Carousel
+
+- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel): Introduce new users to your app.
+
+### Image
+
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
+
+## Theming
+
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): An online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-ja.md b/docs/src/pages/discover-more/related-projects/related-projects-ja.md
index ecf932bc38af4a..c03250b6133761 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-ja.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-ja.md
@@ -1,22 +1,49 @@
# Related projects
-<p class="description">We have carefully curated a list of libraries that are worth having a look at.</p>
+<p class="description">A carefully curated list of libraries that are worth having a look at.</p>
-Because the scope of problems Material-UI solves is limited, we try to play nicely with other libraries. Feel free to submit a pull request to add more projects; we will accept them if they match our criteria.
+Because the scope of problems Material-UI solves is limited, we try to play nicely with other libraries. Feel free to submit a pull request to add another project; it will be accepted if it is suitable.
## Design resources
- [Figma UI Kit](https://material.5ly.co/) for Material-UI.
-## ライブラリ
+## Images and illustrations
-This is a collection of projects that we couldn't better contextualize in the documentation pages.
+- [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
+- [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
-- [Advanced Filter Builder](https://github.com/logipro/logi-filter-builder) Component will help your users create powerful filter criterias.
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Online tool for creating Material-UI themes via Material Design Color Tool.
-- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) A chart for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more ([custom license](https://js.devexpress.com/licensing/)).
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) A fuzzy-search component for React and Material-UI.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [mui-downshift](https://github.com/techniq/mui-downshift) Thin layer over paypal's downshift to use Material-UI visual components.
-- [react-basket](https://github.com/mbrn/react-basket) A shopping basket components library based on Material-UI components.
-- [Wertarbyte](https://mui.wertarbyte.com/) This is a collection of complementary components Wertarbyte have built. Carousel, Image, Password, Rating, Icons, etc.
\ No newline at end of file
+## コンポーネント
+
+This is a collection of third-party projects that extend Material-UI.
+
+### Tables
+
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
+
+### Autocomplete
+
+- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
+- [mui-downshift](https://github.com/techniq/mui-downshift): Thin layer over paypal's downshift to use Material-UI visual components.
+- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
+- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
+
+### Notifications
+
+- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
+
+### Carousel
+
+- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel): Introduce new users to your app.
+
+### Image
+
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
+
+## テーマ
+
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): An online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [マテリアルパレットジェネレータ](https://material.io/inline-tools/color/) : マテリアルパレットジェネレータを使用して、入力した任意のカラーのパレットを生成できます。
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-pt.md b/docs/src/pages/discover-more/related-projects/related-projects-pt.md
index f717693f9f8516..7cc4e4502a8fd7 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-pt.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-pt.md
@@ -1,22 +1,49 @@
# Projetos Relacionados
-<p class="description">Temos cuidadosamente organizado uma lista de bibliotecas que vale a pena dar uma olhada.</p>
+<p class="description">A carefully curated list of libraries that are worth having a look at.</p>
-Como o escopo dos problemas que o Material-UI resolve é limitado, tentamos interagir bem com outras bibliotecas. Sinta-se à vontade para enviar um Pull Request e adicionar mais projetos; vamos aceitá-los se corresponderem aos nossos critérios.
+Como o escopo dos problemas que o Material-UI resolve é limitado, tentamos interagir bem com outras bibliotecas. Feel free to submit a pull request to add another project; it will be accepted if it is suitable.
## Recursos de Design
- [Figma UI Kit](https://material.5ly.co/) for Material-UI.
-## Bibliotecas
+## Images and illustrations
-Esta é uma coleção de projetos que não podemos contextualizar melhor nas páginas de documentação.
+- [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
+- [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
-- [Advanced Filter Builder](https://github.com/logipro/logi-filter-builder) O componente ajudará seus usuários a criar poderosos critérios de filtro.
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Ferramenta online para criação de temas de Material-UI por meio da ferramenta Material Design Color.
-- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) Um gráfico para Material-UI que visualiza dados usando uma variedade de tipos de série, incluindo barra, linha, área, dispersão, pizza e muito mais ([licença customizada](https://js.devexpress.com/licensing/)).
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) Um componente de pesquisa difusa para React e Material-UI.
-- [material-ui-tema-editor](https://in-your-saas.github.io/material-ui-theme-editor/) Uma ferramenta para gerar temas para seus aplicativos de Material-UI, basta selecionar as cores e ter uma visualização ao vivo.
-- [mui-downshift](https://github.com/techniq/mui-downshift) Camada fina sobre o downshift do paypal para usar componentes visuais do Material-UI.
-- [react-basket](https://github.com/mbrn/react-basket) Uma biblioteca de componentes de carrinho de compras baseada em componentes Material-UI.
-- [Wertarbyte](https://mui.wertarbyte.com/) Esta é uma coleção de componentes complementares que a Wertarbyte construiu. Carrossel, imagem, senha, classificação, ícones, etc.
\ No newline at end of file
+## Componentes
+
+This is a collection of third-party projects that extend Material-UI.
+
+### Tabelas
+
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
+
+### Autocompletar
+
+- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
+- [mui-downshift](https://github.com/techniq/mui-downshift): Thin layer over paypal's downshift to use Material-UI visual components.
+- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
+- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
+
+### Notifications
+
+- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
+
+### Carousel
+
+- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel): Introduce new users to your app.
+
+### Image
+
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
+
+## Theming
+
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): An online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): O gerador de paleta do Material pode ser usado para gerar uma paleta para qualquer cor que você inserir.
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-ru.md b/docs/src/pages/discover-more/related-projects/related-projects-ru.md
index 696e21a0956dbf..aa06bab326607a 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-ru.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-ru.md
@@ -1,22 +1,49 @@
# Related projects
-<p class="description">We have carefully curated a list of libraries that are worth having a look at.</p>
+<p class="description">A carefully curated list of libraries that are worth having a look at.</p>
-Because the scope of problems Material-UI solves is limited, we try to play nicely with other libraries. Feel free to submit a pull request to add more projects; we will accept them if they match our criteria.
+Because the scope of problems Material-UI solves is limited, we try to play nicely with other libraries. Feel free to submit a pull request to add another project; it will be accepted if it is suitable.
## Design resources
- [Figma UI Kit](https://material.5ly.co/) for Material-UI.
-## Libraries
+## Images and illustrations
-This is a collection of projects that we couldn't better contextualize in the documentation pages.
+- [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
+- [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
-- [Advanced Filter Builder](https://github.com/logipro/logi-filter-builder) Component will help your users create powerful filter criterias.
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) Online tool for creating Material-UI themes via Material Design Color Tool.
-- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) A chart for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more ([custom license](https://js.devexpress.com/licensing/)).
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) A fuzzy-search component for React and Material-UI.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) Инструмент с функцией предварительного просмотра в реальном времени, который позволяет создавать темы для ваших Material-UI приложений, просто выбирая цвета.
-- [mui-downshift](https://github.com/techniq/mui-downshift) Thin layer over paypal's downshift to use Material-UI visual components.
-- [react-basket](https://github.com/mbrn/react-basket) A shopping basket components library based on Material-UI components.
-- [Wertarbyte](https://mui.wertarbyte.com/) This is a collection of complementary components Wertarbyte have built. Carousel, Image, Password, Rating, Icons, etc.
\ No newline at end of file
+## Компоненты
+
+This is a collection of third-party projects that extend Material-UI.
+
+### Таблицы
+
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
+
+### Автодополнение
+
+- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
+- [mui-downshift](https://github.com/techniq/mui-downshift): Thin layer over paypal's downshift to use Material-UI visual components.
+- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
+- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
+
+### Notifications
+
+- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
+
+### Carousel
+
+- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel): Introduce new users to your app.
+
+### Image
+
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
+
+## Theming
+
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): An online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): Этот инструмент можно использовать для создания палитры на основе любого выбранного цвета.
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/related-projects/related-projects-zh.md b/docs/src/pages/discover-more/related-projects/related-projects-zh.md
index ac1eb533c4d961..9856aa8b6d9c9f 100644
--- a/docs/src/pages/discover-more/related-projects/related-projects-zh.md
+++ b/docs/src/pages/discover-more/related-projects/related-projects-zh.md
@@ -1,22 +1,49 @@
# 相关项目
-<p class="description">我们精心挑选了一系列的库，他们都值得一阅。</p>
+<p class="description">A carefully curated list of libraries that are worth having a look at.</p>
-因为 Material-UI 能够解决的问题范围有限，我们尽量会与其他库好好合作。 不用读提交 pull request 来添加更多的项目感到拘束；如果它们符合我们的标准，我们都会纳入其中。
+因为 Material-UI 能够解决的问题范围有限，我们尽量会与其他库好好合作。 Feel free to submit a pull request to add another project; it will be accepted if it is suitable.
## 设计资源
- Material-UI 的[Figma UI 包](https://material.5ly.co/)。
-## 库
+## Images and illustrations
-这是一个我们无法在文档页面中更好地说明情况的项目集合。
+- [Unsplash](https://unsplash.com): 📷 A great resource for finding beautiful, high-resolution, free photos that you can use in your projects.
+- [unDraw](https://undraw.co/): 📐 Like Unsplash but for amazing vector illustrations.
-- [Advanced Filter Builder](https://github.com/logipro/logi-filter-builder) 一个帮助您创建强大的过滤标准的组件。
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/) 用于通过Material Design Color Tool创建Material-UI主题的在线工具.
-- [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/) 一个 Material-UI 的图标库，它能够用一系列形形色色的类别来视化数据，包含了条形图，折线图，区域图，散点图，饼图，等等（[自定义许可证](https://js.devexpress.com/licensing/)）。
-- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest) 一个 React 和 Material-UI 的模糊搜索的组件。
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/) 一款只需要选择颜色即可为你的 Material-UI 应用生成主题的工具，同时还支持在线预览。
-- [mui-downshift](https://github.com/techniq/mui-downshift) paypal 的 downshift 上薄薄的一层，这样可以使用 Material-UI 可视化组件。
-- [react-basket](https://github.com/mbrn/react-basket) 一个基于 Material-UI组件的购物车组件库。
-- [Wertarbyte](https://mui.wertarbyte.com/) 这是 Wertarbyte 开发的一个补充组件的集合。 Carousel，Image，Password，Rating，Icons，等等。
\ No newline at end of file
+## 组件
+
+This is a collection of third-party projects that extend Material-UI.
+
+### Table（表格）
+
+- [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out.
+- [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)).
+- [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more.
+
+### Autocomplete（自动补全）
+
+- [material-ui-chip-input](https://mui.wertarbyte.com/#material-ui-chip-input): The chip input is used to allow selecting multiple text values.
+- [mui-downshift](https://github.com/techniq/mui-downshift): Thin layer over paypal's downshift to use Material-UI visual components.
+- [material-ui-autosuggest](https://github.com/plan-three/material-ui-autosuggest): A fuzzy-search component for React and Material-UI.
+- [react-select-material-ui](https://github.com/iulian-radu-at/react-select-material-ui): Extend react-select with Material-UI.
+
+### Notifications
+
+- [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them).
+
+### Carousel
+
+- [material-auto-rotating-carousel](https://mui.wertarbyte.com/#material-auto-rotating-carousel): Introduce new users to your app.
+
+### Image
+
+- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.
+
+## Theming
+
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): An online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material调色板生成器](https://material.io/inline-tools/color/)：Material调色板生成器可用于通过您输入的任何颜色生成调色板。
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/showcase/showcase-aa.md b/docs/src/pages/discover-more/showcase/showcase-aa.md
index 38dfdbab09e797..bfe31545c53904 100644
--- a/docs/src/pages/discover-more/showcase/showcase-aa.md
+++ b/docs/src/pages/discover-more/showcase/showcase-aa.md
@@ -2,9 +2,9 @@
<p class="description">crwdns94194:0crwdne94194:0</p>
-crwdns94196:0crwdne94196:0 crwdns94198:0crwdne94198:0 crwdns94200:0crwdne94200:0 crwdns94202:0crwdne94202:0
+crwdns94196:0crwdne94196:0 crwdns94198:0crwdne94198:0 crwdns94200:0crwdne94200:0 crwdns101208:0crwdne101208:0
-- crwdns94204:0crwdne94204:0
+- crwdns101210:0crwdne101210:0
- crwdns94206:0crwdne94206:0
- crwdns94208:0crwdne94208:0
diff --git a/docs/src/pages/discover-more/showcase/showcase-de.md b/docs/src/pages/discover-more/showcase/showcase-de.md
index 7ac571b283ac59..0f3d0577b9e036 100644
--- a/docs/src/pages/discover-more/showcase/showcase-de.md
+++ b/docs/src/pages/discover-more/showcase/showcase-de.md
@@ -2,9 +2,9 @@
<p class="description">Im Folgenden finden Sie eine Liste einiger öffentlicher Apps, die Material-UI verwenden.</p>
-Möchten Sie Ihre App hinzufügen? App gefunden, die nicht mehr funktioniert oder Material-UI nicht mehr verwendet? Bitte senden Sie eine Pull-Request auf [Github](https://github.com/mui-org/material-ui), um [diese Seite](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js) zu aktualisieren! Wir suchen nach Websites, die in diesen Dimensionen gut abschneiden:
+Möchten Sie Ihre App hinzufügen? App gefunden, die nicht mehr funktioniert oder Material-UI nicht mehr verwendet? Bitte senden Sie eine Pull-Request auf [Github](https://github.com/mui-org/material-ui), um [diese Seite](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js) zu aktualisieren! Good candidates are websites that rank well within these dimensions:
-- Non-Material Design-Anpassung
+- Non Material Design customization
- Viel Verkehr
- Open Source
diff --git a/docs/src/pages/discover-more/showcase/showcase-es.md b/docs/src/pages/discover-more/showcase/showcase-es.md
index 41fe81b6358a66..7bd15b55358127 100644
--- a/docs/src/pages/discover-more/showcase/showcase-es.md
+++ b/docs/src/pages/discover-more/showcase/showcase-es.md
@@ -2,9 +2,9 @@
<p class="description">The following is a list of some of the public apps using Material-UI.</p>
-Want to add your app? Found an app that no longer works or no longer uses Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update [this page](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! We are looking for websites that rank well within these dimensions:
+Want to add your app? Found an app that no longer works or no longer uses Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update [this page](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! Good candidates are websites that rank well within these dimensions:
-- Non-Material Design customization
+- Non Material Design customization
- High traffic
- Open source
diff --git a/docs/src/pages/discover-more/showcase/showcase-fr.md b/docs/src/pages/discover-more/showcase/showcase-fr.md
index 795a9c31cf6f7b..da90e825ffea4d 100644
--- a/docs/src/pages/discover-more/showcase/showcase-fr.md
+++ b/docs/src/pages/discover-more/showcase/showcase-fr.md
@@ -2,9 +2,9 @@
<p class="description">Vous trouverez ci-dessous une liste de certaines applications publiques utilisant Material-UI.</p>
-Voulez-vous ajouter votre application? Vous avez trouvé une application qui ne fonctionne plus ou n'utilise plus Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update [this page](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! We are looking for websites that rank well within these dimensions:
+Voulez-vous ajouter votre application? Vous avez trouvé une application qui ne fonctionne plus ou n'utilise plus Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update [this page](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! Good candidates are websites that rank well within these dimensions:
-- Non-Material Design customization
+- Non Material Design customization
- High traffic
- Open source
diff --git a/docs/src/pages/discover-more/showcase/showcase-ja.md b/docs/src/pages/discover-more/showcase/showcase-ja.md
index c07ad826b1984e..298d1c9db921e9 100644
--- a/docs/src/pages/discover-more/showcase/showcase-ja.md
+++ b/docs/src/pages/discover-more/showcase/showcase-ja.md
@@ -2,9 +2,9 @@
<p class="description">The following is a list of some of the public apps using Material-UI.</p>
-Want to add your app? Found an app that no longer works or no longer uses Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update [this page](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! We are looking for websites that rank well within these dimensions:
+Want to add your app? Found an app that no longer works or no longer uses Material-UI? Please submit a pull request on [GitHub](https://github.com/mui-org/material-ui) to update [this page](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! Good candidates are websites that rank well within these dimensions:
-- Non-Material Design customization
+- Non Material Design customization
- High traffic
- オープンソース
diff --git a/docs/src/pages/discover-more/showcase/showcase-pt.md b/docs/src/pages/discover-more/showcase/showcase-pt.md
index bc6d98328648a3..673f5910049de1 100644
--- a/docs/src/pages/discover-more/showcase/showcase-pt.md
+++ b/docs/src/pages/discover-more/showcase/showcase-pt.md
@@ -2,9 +2,9 @@
<p class="description">A seguir uma lista de algumas aplicações que estão utilizando Material-UI.</p>
-Quer adicionar sua aplicação? Encontrou uma aplicação que não funciona mais ou já não está utilizando Material-UI? Por favor, envie um pull request no [GitHub](https://github.com/mui-org/material-ui) para atualizar [esta página](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! Estamos à procura de sites que se enquadram bem dentro destas dimensões:
+Quer adicionar sua aplicação? Encontrou uma aplicação que não funciona mais ou já não está utilizando Material-UI? Por favor, envie um pull request no [GitHub](https://github.com/mui-org/material-ui) para atualizar [esta página](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! Good candidates are websites that rank well within these dimensions:
-- Sem customização Material Design
+- Non Material Design customization
- Alto tráfego
- Código aberto
diff --git a/docs/src/pages/discover-more/showcase/showcase-ru.md b/docs/src/pages/discover-more/showcase/showcase-ru.md
index fa3bc087134c53..280f643d44067f 100644
--- a/docs/src/pages/discover-more/showcase/showcase-ru.md
+++ b/docs/src/pages/discover-more/showcase/showcase-ru.md
@@ -2,9 +2,9 @@
<p class="description">The following is a list of some of the public apps using Material-UI.</p>
-Want to add your app? Found an app that no longer works or no longer uses Material-UI? Пожалуйста, отправьте pull request на [ GitHub ](https://github.com/mui-org/material-ui) чтобы обновить [ эту страницу ](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! We are looking for websites that rank well within these dimensions:
+Want to add your app? Found an app that no longer works or no longer uses Material-UI? Пожалуйста, отправьте pull request на [ GitHub ](https://github.com/mui-org/material-ui) чтобы обновить [ эту страницу ](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js)! Good candidates are websites that rank well within these dimensions:
-- Non-Material Design customization
+- Non Material Design customization
- High traffic
- Open source
diff --git a/docs/src/pages/discover-more/showcase/showcase-zh.md b/docs/src/pages/discover-more/showcase/showcase-zh.md
index 992842a8887e58..d3142a84b82c8e 100644
--- a/docs/src/pages/discover-more/showcase/showcase-zh.md
+++ b/docs/src/pages/discover-more/showcase/showcase-zh.md
@@ -2,9 +2,9 @@
<p class="description">以下列表展示了使用 Material-UI 的一些公共的应用程序。</p>
-想要你的应用程序出现在使用列表里面吗？ 您发现了一个不再有效或停止使用 Material-UI 的应用程序吗？ 请在[GitHub](https://github.com/mui-org/material-ui)上提交 Pull Request 来更新[此页面](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js) ！ 我们与一些在这些方面排名比较好的网站有在合作：
+想要你的应用程序出现在使用列表里面吗？ 您发现了一个不再有效或停止使用 Material-UI 的应用程序吗？ 请在[GitHub](https://github.com/mui-org/material-ui)上提交 Pull Request 来更新[此页面](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/discover-more/showcase/appList.js) ！ Good candidates are websites that rank well within these dimensions:
-- 非 Material Design 自定义化
+- Non Material Design customization
- 高流量
- 开源
diff --git a/docs/src/pages/discover-more/team/team-aa.md b/docs/src/pages/discover-more/team/team-aa.md
index 99934f6284d564..05e9a18eda75d6 100644
--- a/docs/src/pages/discover-more/team/team-aa.md
+++ b/docs/src/pages/discover-more/team/team-aa.md
@@ -2,10 +2,10 @@
<p class="description">crwdns94214:0crwdne94214:0</p>
-crwdns94216:0crwdne94216:0
+crwdns101212:0crwdne101212:0
crwdns94218:0crwdne94218:0
-crwdns94220:0crwdne94220:0 crwdns94222:0crwdne94222:0
+crwdns94220:0crwdne94220:0 crwdns101214:0crwdne101214:0
[crwdns94226:0crwdne94226:0](crwdns94224:0crwdne94224:0)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/team/team-de.md b/docs/src/pages/discover-more/team/team-de.md
index a0a2d08ff36d50..e38a1c6d8ab531 100644
--- a/docs/src/pages/discover-more/team/team-de.md
+++ b/docs/src/pages/discover-more/team/team-de.md
@@ -2,10 +2,10 @@
<p class="description">Eine Übersicht über das Gründerteam und die wichtigsten Mitarbeiter der Material-UI.</p>
-Die Material-UI wird von einer kleinen Gruppe von unschätzbaren Kernteilnehmern mit massiver Unterstützung und Beteiligung unserer Community gepflegt.
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}}
-Machen Sie mit in der Entwicklung von Material-UI indem Sie ein [ Problem melden](https://github.com/mui-org/material-ui/issues/new) oder eine Pull-Anfrage absenden. Lesen Sie unsere [ Richtlinien ](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) um Informationen darüber zu erhalten, wie wir uns entwickeln.
+Machen Sie mit in der Entwicklung von Material-UI indem Sie ein [ Problem melden](https://github.com/mui-org/material-ui/issues/new) oder eine Pull-Anfrage absenden. Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
[Treten Sie der Material-UI-Community bei!](/discover-more/community/)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/team/team-es.md b/docs/src/pages/discover-more/team/team-es.md
index 5647eb8c969ba3..2b6b494d7b72b4 100644
--- a/docs/src/pages/discover-more/team/team-es.md
+++ b/docs/src/pages/discover-more/team/team-es.md
@@ -2,10 +2,10 @@
<p class="description">An overview of the founding team and core contributors to Material-UI.</p>
-Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of our community.
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}}
-Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
+Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request. Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
[Join the Material-UI Community!](/discover-more/community/)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/team/team-fr.md b/docs/src/pages/discover-more/team/team-fr.md
index 0a8724ef81a6b6..1706feced38d1e 100644
--- a/docs/src/pages/discover-more/team/team-fr.md
+++ b/docs/src/pages/discover-more/team/team-fr.md
@@ -2,10 +2,10 @@
<p class="description">Un aperçu de l'équipe fondatrice et des principaux contributeurs à Material-UI.</p>
-Material-UI est géré par un petit groupe de contributeurs essentiels, avec le soutien et la participation massifs de notre communauté.
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}}
-Impliquez-vous dans le développement de Material-UI en [ouvrant un problème](https://github.com/mui-org/material-ui/issues/new) ou soumettre une demande de tirage. Lisez nos [directives de contribution](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) pour plus d'informations sur notre développement.
+Impliquez-vous dans le développement de Material-UI en [ouvrant un problème](https://github.com/mui-org/material-ui/issues/new) ou soumettre une demande de tirage. Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
[Rejoignez la communauté Material-UI!](/discover-more/community/)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/team/team-ja.md b/docs/src/pages/discover-more/team/team-ja.md
index 37ba3ac667dd64..344a26a5ba354c 100644
--- a/docs/src/pages/discover-more/team/team-ja.md
+++ b/docs/src/pages/discover-more/team/team-ja.md
@@ -2,10 +2,10 @@
<p class="description">An overview of the founding team and core contributors to Material-UI.</p>
-Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of our community.
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}}
-Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
+Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request. Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
[Join the Material-UI Community!](/discover-more/community/)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/team/team-pt.md b/docs/src/pages/discover-more/team/team-pt.md
index 70edf8beaa1654..a758350078e70f 100644
--- a/docs/src/pages/discover-more/team/team-pt.md
+++ b/docs/src/pages/discover-more/team/team-pt.md
@@ -2,10 +2,10 @@
<p class="description">Uma visão geral da equipe fundadora e principais colaboradores da Material-UI.</p>
-Material-UI é mantida por um pequeno grupo de contribuidores essenciais de valor inestimável, com o apoio e envolvimento maciço de nossa comunidade.
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}}
-Colabore com o desenvolvimento de Material-UI [abrindo uma issue](https://github.com/mui-org/material-ui/issues/new) ou enviando um pull request. Leia nossas [diretrizes de contribuição](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) para informações sobre como nós desenvolvemos.
+Colabore com o desenvolvimento de Material-UI [abrindo uma issue](https://github.com/mui-org/material-ui/issues/new) ou enviando um pull request. Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
[Junte-se à Comunidade Material-UI!](/discover-more/community/)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/team/team-ru.md b/docs/src/pages/discover-more/team/team-ru.md
index 9a086d0bb45030..a99e40bedac5bc 100644
--- a/docs/src/pages/discover-more/team/team-ru.md
+++ b/docs/src/pages/discover-more/team/team-ru.md
@@ -2,10 +2,10 @@
<p class="description">An overview of the founding team and core contributors to Material-UI.</p>
-Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of our community.
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}}
-Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request. Read our [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
+Get involved with Material-UI development by [opening an issue](https://github.com/mui-org/material-ui/issues/new) or submitting a pull request. Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
[Присоединяйтесь к сообществу Material-UI!](/discover-more/community/)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/team/team-zh.md b/docs/src/pages/discover-more/team/team-zh.md
index 93a6090da946ce..49da7037c4f254 100644
--- a/docs/src/pages/discover-more/team/team-zh.md
+++ b/docs/src/pages/discover-more/team/team-zh.md
@@ -2,10 +2,10 @@
<p class="description">这是我们 Material-UI 的创始团队和核心贡献者的总览。</p>
-Material-UI 由一小群宝贵的核心贡献者维护，它也得到了社区的大力支持和参与。
+Material-UI is maintained by a small group of invaluable core contributors, with the massive support and involvement of the community.
{{"demo": "pages/discover-more/team/Team.js", "hideHeader": true}}
-通过 [打开问题](https://github.com/mui-org/material-ui/issues/new) 或提交一个 pull request 来参与到 Material-UI 开发中来吧。 请阅读一下我们的[贡献者指南](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md)来了解我们如何发展的吧。
+通过 [打开问题](https://github.com/mui-org/material-ui/issues/new) 或提交一个 pull request 来参与到 Material-UI 开发中来吧。 Read the [contributing guidelines](https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md) for information on how we develop.
[加入 Material-UI 社区中来！](/discover-more/community/)
\ No newline at end of file
diff --git a/docs/src/pages/discover-more/vision/vision-ja.md b/docs/src/pages/discover-more/vision/vision-ja.md
index b532683889b968..4fb8e9415c0ed1 100644
--- a/docs/src/pages/discover-more/vision/vision-ja.md
+++ b/docs/src/pages/discover-more/vision/vision-ja.md
@@ -1,16 +1,16 @@
-# Material-UI’s Vision
+# Material-UIの ビジョン
-<p class="description">Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.</p>
+<p class="description">私たちのビジョンは、お客様のブランドに完全にマッチするようにカスタマイズできるマテリアルデザインガイドラインのエレガントなReact実装を提供することです。</p>
-The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
+マテリアルデザインガイドラインは素晴らしい出発点ですが、アプリケーションのすべての側面やニーズに関するガイダンスを提供するものではありません。 ガイドライン固有の実装に加えて、Material-UIをアプリケーション開発に一般的に役立つものにしたいと考えています。これはすべて、Material Designガイドラインの精神に基づいています。
-Therefore, Material-UI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines.
+したがって、Material-UIはMaterial Designガイドラインの実装であるだけでなく、多くのユーザが必要とするコンポーネントの一般的なUIライブラリでもあります。 この一般的な使用は、他の設計方法論を意味するものではありません。 また、設計ガイドラインでは扱われていないコンポーネントや組み合わせもあります。
-We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material design specification (which is a bar set quite high), you should be able to take advantage of it for you own business with any style customization needed. We want to see companies succeeding using Material-UI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product.
+私たちは、Reactでリッチなユーザインターフェイスを構築するために必要な低レベルのツールを提供することに焦点を当てます。 Material design仕様 (これは非常に高いバーセットで) を実装すると、スタイルのカスタマイズが必要な場合に、ビジネスで利用できるようになります。 私たちは、企業がマテリアル・フィロソフィーに近いかどうかに関わらず、自社のブランドに合った方法でMaterial-UIを使って成功することを望んでいます。 我々はUIがGoogleの別の製品のように見えるだけだと思われたくない。
From a developer's point of view, we want Material-UI to:
-- Deliver on fully encapsulated / composable React components.
-- Be themeable / customizable.
-- Be cross browser compatible and accessible.
-- Promote developer joy, a sense of community, and an environment where new and experienced developers can learn from each other.
\ No newline at end of file
+- 完全にカプセル化された/構成可能なReactコンポーネントを提供します。
+- テーマ化/カスタマイズ可能。
+- クロスブラウザー互換でアクセス可能です。
+- 開発者の喜び、コミュニティ意識、および新しい経験豊富な開発者がお互いから学ぶことができる環境を促進します。
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-aa.md b/docs/src/pages/getting-started/example-projects/example-projects-aa.md
index e4bf3bfc17cd99..4c8bf008a981d7 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-aa.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-aa.md
@@ -2,7 +2,7 @@
<p class="description">crwdns94262:0crwdne94262:0</p>
-crwdns94264:0crwdne94264:0
+crwdns101216:0crwdne101216:0
- [crwdns94268:0crwdne94268:0](crwdns94266:0crwdne94266:0)
- [crwdns94272:0crwdne94272:0](crwdns94270:0crwdne94270:0)
@@ -20,7 +20,7 @@ crwdns94296:0crwdne94296:0 crwdns94298:0crwdne94298:0 crwdns94300:0crwdne94300:0
crwdns94304:0crwdne94304:0
-crwdns94306:0crwdne94306:0
+crwdns101218:0crwdne101218:0
- crwdns94308:0crwdne94308:0
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-de.md b/docs/src/pages/getting-started/example-projects/example-projects-de.md
index 6a9847c9a55fe1..708b854eae50e7 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-de.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-de.md
@@ -2,7 +2,7 @@
<p class="description">Suchen Sie ein Beispielprojekt, um anzufangen?</p>
-Wir hosten einige Beispielprojekte, die Sie im [GitHub-Repository](https://github.com/mui-org/material-ui) finden unter dem [` /examples`](https://github.com/mui-org/material-ui/tree/master/examples) Ordner:
+You can find some example projects in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
- [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)
- [Gatsby](https://github.com/mui-org/material-ui/tree/master/examples/gatsby)
@@ -20,7 +20,7 @@ Der Quellcode für diese Dokumentationsseite ist auch im Repository enthalten. D
Suchen Sie nach einem fortgeschritteneren Beispielprojekt?
-If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+If you want to start with a more complete and real world example, you could take a look at the [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-es.md b/docs/src/pages/getting-started/example-projects/example-projects-es.md
index f119c31471ae45..245deacac092c9 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-es.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-es.md
@@ -2,7 +2,7 @@
<p class="description">¿Estás buscando un proyecto de ejemplo para empezar?</p>
-Contamos con algunos proyectos de ejemplo que puedes encontrar en el [repositorio de GitHub](https://github.com/mui-org/material-ui) bajo el directorio llamado [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples):
+You can find some example projects in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
- [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)
- [Gatsby](https://github.com/mui-org/material-ui/tree/master/examples/gatsby)
@@ -20,7 +20,7 @@ El código fuente de esta documentación también está incluido en el repositor
¿Buscas un proyecto de ejemplo más avanzado?
-If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+If you want to start with a more complete and real world example, you could take a look at the [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-fr.md b/docs/src/pages/getting-started/example-projects/example-projects-fr.md
index b97142b39e54a5..dcd1dc15db1040 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-fr.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-fr.md
@@ -2,7 +2,7 @@
<p class="description">Vous cherchez un exemple de projet pour commencer ?</p>
-Nous hébergeons quelques exemples de projets que vous pouvez trouver dans le référentiel [GitHub.](https://github.com/mui-org/material-ui) sous les [`/exemples`](https://github.com/mui-org/material-ui/tree/master/examples) dossier:
+You can find some example projects in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
- [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)
- [Gatsby](https://github.com/mui-org/material-ui/tree/master/examples/gatsby)
@@ -20,7 +20,7 @@ Le code source de ce site de documentation est également disponible sur GitHub.
Vous recherchez un exemple de projet plus avancé ?
-If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+If you want to start with a more complete and real world example, you could take a look at the [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-ja.md b/docs/src/pages/getting-started/example-projects/example-projects-ja.md
index b0e531b8cb5bc0..cae974ca48eb98 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-ja.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-ja.md
@@ -2,7 +2,7 @@
<p class="description">最初のサンプルプロジェクトをお探しですか？</p>
-[GitHubリポジトリ](https://github.com/mui-org/material-ui)の下の[`/examples`](https://github.com/mui-org/material-ui/tree/master/examples)フォルダにいくつかのサンプルプロジェクトを用意しています。
+You can find some example projects in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
- [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)
- [Gatsby](https://github.com/mui-org/material-ui/tree/master/examples/gatsby)
@@ -20,22 +20,22 @@ Create React AppはReactを学ぶのに良いプロジェクトです。 どの
更に高度なサンプルプロジェクトをお探しですか？
-If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+If you want to start with a more complete and real world example, you could take a look at the [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
- [Create React App](https://facebook.github.io/create-react-app/)による生成
- - Custom Create React App script to start a new project with just a single CLI command
- - Build for Firebase including Authentication using the official Firebase Web Auth UI
- - Routing with React Router including error handling (404) and lazy loading
- - All PWA features included (SW, Notifications, deffered installation prompt and more)
- - Optimized and scalable performance (all ~100 points on Lighthouse)
+ - 単一のCLIコマンドで新しいプロジェクトを開始するカスタムCreate React Appスクリプト
+ - 公式のFirebase Web Auth UIを使用した認証を含むFirebase用のビルド
+ - エラー処理（404）および遅延ロードを含むReact Routerによるルーティング
+ - すべてのPWA機能が含まれています（SW、通知、遅延インストールプロンプトなど）
+ - 最適化されたスケーラブルなパフォーマンス（すべてLighthouseで最大100ポイント）
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
- - Bootstrapped with Create React App, the same tooling works out of the box
- - Built on top of Firebase with Authentication, Cloud Firestore, Cloud Functions, Storage, and Performance Monitoring working from the start
- - Robust routing with React Router including error handling
- - Extensive mobile support with full-screen dialogs and [react-swipeable-views](https://react-swipeable-views.com) for tabs
+ - React Appの作成でブートストラップされ、同じツールがすぐに使用できます
+ - 認証、Cloud Firestore、Cloud Functions、Storage、およびPerformance Monitoringを最初から使用できるFirebaseの上に構築
+ - エラー処理を含むReact Routerによる堅牢なルーティング
+ - フルスクリーンダイアログと[ react-swipeable-viewsによる広範なモバイルサポート](https://react-swipeable-views.com)タブ用
- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
- rechartsを用いたグラフ
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-pt.md b/docs/src/pages/getting-started/example-projects/example-projects-pt.md
index ba91bb08e82614..4c2f742d5ac0dc 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-pt.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-pt.md
@@ -2,7 +2,7 @@
<p class="description">Você está procurando um projeto de exemplo para começar?</p>
-Nós hospedamos alguns projetos de exemplo que você pode encontrar no repositório [GitHub](https://github.com/mui-org/material-ui) sob a pasta [`/exemplos`](https://github.com/mui-org/material-ui/tree/master/examples):
+You can find some example projects in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
- [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)
- [Gatsby](https://github.com/mui-org/material-ui/tree/master/examples/gatsby)
@@ -20,7 +20,7 @@ O código-fonte deste site de documentação também está incluído no reposit
Procurando por um projeto de exemplo mais avançado?
-If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+If you want to start with a more complete and real world example, you could take a look at the [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-ru.md b/docs/src/pages/getting-started/example-projects/example-projects-ru.md
index dd1d18c888a253..a410ee3b5714e3 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-ru.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-ru.md
@@ -2,7 +2,7 @@
<p class="description">Вы ищете пример проекта, чтобы начать?</p>
-We host some example projects which you can find in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
+You can find some example projects in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
- [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)
- [Gatsby](https://github.com/mui-org/material-ui/tree/master/examples/gatsby)
@@ -20,7 +20,7 @@ Create React App - отличный проект для изучения React.
Ищете более продвинутый пример проекта?
-If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+If you want to start with a more complete and real world example, you could take a look at the [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-zh.md b/docs/src/pages/getting-started/example-projects/example-projects-zh.md
index 2e6f456d0afd1c..252030b2886a2b 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-zh.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-zh.md
@@ -2,7 +2,7 @@
<p class="description">您是否正在寻找一个范例项目来开始？</p>
-您可以在[GitHub存储库中](https://github.com/mui-org/material-ui)的[`/examples`](https://github.com/mui-org/material-ui/tree/master/examples)的文件夹下面，找到一些我们托管一些范例项目：
+You can find some example projects in the [GitHub repository](https://github.com/mui-org/material-ui) under the [`/examples`](https://github.com/mui-org/material-ui/tree/master/examples) folder:
- [Create React App](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app)
- [Gatsby](https://github.com/mui-org/material-ui/tree/master/examples/gatsby)
@@ -20,7 +20,7 @@ Create React App 是一个很棒的学习 React 的项目。 请看一下这些[
你在寻找更高级的示范例项目吗？
-If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+If you want to start with a more complete and real world example, you could take a look at the [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
diff --git a/docs/src/pages/getting-started/faq/faq-aa.md b/docs/src/pages/getting-started/faq/faq-aa.md
index 399d02f64e0b31..737926746c6060 100644
--- a/docs/src/pages/getting-started/faq/faq-aa.md
+++ b/docs/src/pages/getting-started/faq/faq-aa.md
@@ -1,6 +1,6 @@
# crwdns94342:0crwdne94342:0
-<p class="description">crwdns94344:0crwdne94344:0 crwdns94346:0crwdne94346:0</p>
+<p class="description">crwdns94344:0crwdne94344:0 crwdns101220:0crwdne101220:0</p>
crwdns94348:0crwdne94348:0 crwdns94350:0crwdne94350:0 crwdns94352:0crwdne94352:0
@@ -22,7 +22,7 @@ crwdns94374:0crwdne94374:0
## crwdns94376:0crwdne94376:0
-crwdns94378:0crwdne94378:0 crwdns94380:0crwdne94380:0 crwdns94382:0crwdne94382:0
+crwdns101222:0crwdne101222:0 crwdns94380:0crwdne94380:0 crwdns94382:0crwdne94382:0
## crwdns94384:0crwdne94384:0
@@ -67,7 +67,7 @@ crwdns94420:0crwdne94420:0 crwdns94422:0crwdne94422:0
## crwdns94432:0crwdne94432:0
-crwdns94434:0crwdne94434:0 crwdns94436:0crwdne94436:0 crwdns94438:0crwdne94438:0
+crwdns101224:0crwdne101224:0 crwdns101226:0crwdne101226:0 crwdns94438:0crwdne94438:0
## crwdns94440:0crwdne94440:0
@@ -139,7 +139,7 @@ crwdns94510:0crwdne94510:0 crwdns94512:0crwdne94512:0
## crwdns94516:0crwdne94516:0
-crwdns94518:0crwdne94518:0 crwdns94520:0crwdne94520:0 crwdns94522:0crwdne94522:0
+crwdns94518:0crwdne94518:0 crwdns94520:0crwdne94520:0 crwdns101228:0crwdne101228:0
### crwdns94524:0crwdne94524:0
@@ -147,7 +147,7 @@ crwdns94526:0crwdne94526:0 crwdns94528:0crwdne94528:0
#### crwdns94530:0crwdne94530:0
-crwdns94532:0crwdne94532:0 crwdns94534:0crwdne94534:0
+crwdns101230:0crwdne101230:0 crwdns94534:0crwdne94534:0
*crwdns94536:0crwdne94536:0*
@@ -229,4 +229,23 @@ crwdns94650:0crwdne94650:0
```jsx
crwdns94652:0[setContainer]crwdnd94652:0{container}crwdnd94652:0{handleRef}crwdne94652:0
+```
+
+## crwdns100936:0crwdne100936:0
+
+crwdns100938:0crwdne100938:0
+
+crwdns100940:0crwdne100940:0
+
+```jsx
+crwdns100942:0crwdne100942:0 crwdns100944:0crwdne100944:0 crwdns100946:0crwdne100946:0
+```
+
+crwdns100948:0crwdne100948:0
+
+```jsx
+crwdns100950:0{
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ }crwdne100950:0
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/faq/faq-de.md b/docs/src/pages/getting-started/faq/faq-de.md
index 10650cefa1321d..5e2b51bef70691 100644
--- a/docs/src/pages/getting-started/faq/faq-de.md
+++ b/docs/src/pages/getting-started/faq/faq-de.md
@@ -1,6 +1,6 @@
# Häufige Fragen
-<p class="description">Festgefahren bei einem bestimmten Problem? Sehen Sie sich zuerst einige dieser häufig vorkommenden Probleme in unseren FAQ an.</p>
+<p class="description">Festgefahren bei einem bestimmten Problem? Check some of these common gotchas first in the FAQ.</p>
Wenn Sie immer noch nicht finden, wonach Sie suchen, können Sie die Community auf [Spectrum](https://spectrum.chat/material-ui) fragen. Verwenden Sie für Fragen zur Vorgehensweise und zu anderen Problemen [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) anstelle von Github-Problemen. Es gibt ein StackOverflow-Tag namens `material-ui` welchen Sie verwenden können, um Ihre Fragen zu kennzeichnen.
@@ -22,7 +22,7 @@ Im Allgemeinen ist es einfach, dieses Problem zu beheben, indem jede Material-UI
## Warum bewegen sich die fest positionierten Elemente, wenn ein Modal geöffnet wird?
-Wir blockieren die Blättern, sobald eine Modalität geöffnet ist. Dies verhindert die Interaktion mit dem Hintergrund, wenn der Modal der einzige interaktive Inhalt sein sollte. Wenn Sie jedoch die Bildlaufleiste entfernen, können Sie Ihre **fest positionierten Elemente ** bewegen. In dieser Situation können Sie einen globalen `.mui-fixed` Klassennamen anwenden, damit Material-UI mit diesen Elementen umgehen kann.
+Scroll is blocked as soon as a modal is opened. Dies verhindert die Interaktion mit dem Hintergrund, wenn der Modal der einzige interaktive Inhalt sein sollte. Wenn Sie jedoch die Bildlaufleiste entfernen, können Sie Ihre **fest positionierten Elemente ** bewegen. In dieser Situation können Sie einen globalen `.mui-fixed` Klassennamen anwenden, damit Material-UI mit diesen Elementen umgehen kann.
## Wie kann ich den Ripple-Effekt global deaktivieren?
@@ -108,7 +108,7 @@ Verwenden Sie als Faustregel Inline-Style nur für dynamische Stileigenschaften.
## Wie verwende ich den react-router?
-Wir haben dokumentiert, wie Sie eine [Routing-Bibliothek von Drittanbietern](/components/buttons/#third-party-routing-library) mit der `ButtonBase` Komponente verwenden. Viele interaktive Komponenten verwenden dies intern: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, usw. Sie können dieselbe Lösung mit ihnen verwenden.
+How to use a [third-party routing library](/components/buttons/#third-party-routing-library) is documented with the `ButtonBase` component. A lot of the interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. Sie können dieselbe Lösung mit ihnen verwenden.
## Wie kann ich auf das DOM-Element zugreifen?
@@ -215,7 +215,7 @@ Wenn Sie mehrere Anwendungen auf einer Seite ausführen, sollten Sie ein @materi
## Meine App wird auf dem Server nicht richtig dargestellt
-Wenn dies nicht funktioniert, handelt es sich in 99% der Fälle um ein Konfigurationsproblem. Eine fehlende Eigenschaft, eine falsche Aufrufreihenfolge oder eine fehlende Komponente. Bei der Konfiguration sind wir sehr streng. Um herauszufinden, was falsch ist, können Sie am besten Ihr Projekt mit einem bereits funktionierenden Setup vergleichen. Schauen Sie sich unsere [Referenzimplementierungen](/guides/server-rendering/#reference-implementations) an, Stück für Stück.
+Wenn dies nicht funktioniert, handelt es sich in 99% der Fälle um ein Konfigurationsproblem. Eine fehlende Eigenschaft, eine falsche Aufrufreihenfolge oder eine fehlende Komponente. Server side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
### CSS funktioniert nur beim ersten Laden, dann fehlt es
@@ -223,7 +223,7 @@ Das CSS wird nur beim ersten Laden der Seite generiert. Auf dem Server fehlt dan
#### Zu ergreifende Maßnahmen
-Wir setzen auf einen Cache, den Sheets-Manager, um das CSS nur einmal pro Komponententyp (wenn Sie zwei Schaltflächen verwenden, benötigen Sie nur einmal das CSS der Schaltfläche) zu injizieren. Sie müssen **eine neue ` sheets `Instanze für jede Anfrage** erstellen.
+The styling solution relies on a cache, the *sheets manager*, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). Sie müssen **eine neue ` sheets `Instanze für jede Anfrage** erstellen.
*beispiel für fix:*
@@ -358,4 +358,33 @@ function App() {
</div>
);
}
+```
+
+## What's the clsx dependency for?
+
+[clsx](https://github.com/lukeed/clsx) is a tiny utility for constructing `className` strings conditionally.
+
+Instead of writing:
+
+```jsx
+return (
+ <div
+ className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`}
+ />
+);
+```
+
+you can do:
+
+```jsx
+import clsx from 'clsx';
+
+return (
+ <div
+ className={clsx('MuiButton-root', {
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ })}
+ />
+);
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/faq/faq-es.md b/docs/src/pages/getting-started/faq/faq-es.md
index 7f8162677f289a..59e0b8f1b70607 100644
--- a/docs/src/pages/getting-started/faq/faq-es.md
+++ b/docs/src/pages/getting-started/faq/faq-es.md
@@ -1,6 +1,6 @@
# Preguntas frecuentes
-<p class="description">¿Atrapado en un problema en particular? Revisa las dudas más comunes primero en nuestras Preguntas frecuentes.</p>
+<p class="description">¿Atrapado en un problema en particular? Check some of these common gotchas first in the FAQ.</p>
If you still can't find what you're looking for, you can ask the community in [Spectrum](https://spectrum.chat/material-ui). Para preguntas how-to y otros non-issues, por favor utiliza [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) en lugar de los issues en Github. Existe una etiqueta en StackOverflow llamada `material-ui` que puedes usar para etiquetar tus preguntas.
@@ -22,7 +22,7 @@ Overall, it's simple to recover from this problem by wrapping each Material-UI a
## ¿Por qué los elementos de posición fija se mueven cuando se abre un modal?
-We block the scroll as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content, however, removing the scrollbar can make your **fixed positioned elements** move. In this situation, you can apply a global `.mui-fixed` class name to tell Material-UI to handle those elements.
+Scroll is blocked as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content, however, removing the scrollbar can make your **fixed positioned elements** move. In this situation, you can apply a global `.mui-fixed` class name to tell Material-UI to handle those elements.
## How can I disable the ripple effect globally?
@@ -108,7 +108,7 @@ As a rule of thumb, only use inline-style for dynamic style properties. The CSS
## How do I use react-router?
-We have documented how to use a [third-party routing library](/components/buttons/#third-party-routing-library) with the `ButtonBase` component. A lot of our interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. You can use the same solution with them.
+How to use a [third-party routing library](/components/buttons/#third-party-routing-library) is documented with the `ButtonBase` component. A lot of the interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. You can use the same solution with them.
## How can I access the DOM element?
@@ -215,7 +215,7 @@ If you have several applications running on one page, consider using one @materi
## My App doesn't render correctly on the server
-If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. We are very strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out our [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
+If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. Server side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
### CSS works only on first load then is missing
@@ -223,7 +223,7 @@ The CSS is only generated on the first load of the page. Then, the CSS is missin
#### Action to Take
-We rely on a cache, the sheets manager, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
+The styling solution relies on a cache, the *sheets manager*, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
*example of fix:*
@@ -358,4 +358,33 @@ function App() {
</div>
);
}
+```
+
+## What's the clsx dependency for?
+
+[clsx](https://github.com/lukeed/clsx) is a tiny utility for constructing `className` strings conditionally.
+
+Instead of writing:
+
+```jsx
+return (
+ <div
+ className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`}
+ />
+);
+```
+
+you can do:
+
+```jsx
+import clsx from 'clsx';
+
+return (
+ <div
+ className={clsx('MuiButton-root', {
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ })}
+ />
+);
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/faq/faq-fr.md b/docs/src/pages/getting-started/faq/faq-fr.md
index 6a56c7152ff039..3062c105264359 100644
--- a/docs/src/pages/getting-started/faq/faq-fr.md
+++ b/docs/src/pages/getting-started/faq/faq-fr.md
@@ -1,6 +1,6 @@
# FAQ
-<p class="description">Bloqué sur un problème particulier ? Vérifiez les solutions proposées dans la FAQ.</p>
+<p class="description">Bloqué sur un problème particulier ? Check some of these common gotchas first in the FAQ.</p>
If you still can't find what you're looking for, you can ask the community in [Spectrum](https://spectrum.chat/material-ui). Pour les demandes d'aide qui ne relèvent pas de bug, merci d'utiliser [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) à la place des issues Github. Il y a un tag StackOverflow, `material-ui` que vous pouvez utiliser pour tagger vos questions.
@@ -22,7 +22,7 @@ Overall, it's simple to recover from this problem by wrapping each Material-UI a
## Why do the fixed positioned elements move when a modal is opened?
-We block the scroll as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content, however, removing the scrollbar can make your **fixed positioned elements** move. In this situation, you can apply a global `.mui-fixed` class name to tell Material-UI to handle those elements.
+Scroll is blocked as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content, however, removing the scrollbar can make your **fixed positioned elements** move. In this situation, you can apply a global `.mui-fixed` class name to tell Material-UI to handle those elements.
## How can I disable the ripple effect globally?
@@ -108,7 +108,7 @@ As a rule of thumb, only use inline-style for dynamic style properties. The CSS
## How do I use react-router?
-We have documented how to use a [third-party routing library](/components/buttons/#third-party-routing-library) with the `ButtonBase` component. A lot of our interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. You can use the same solution with them.
+How to use a [third-party routing library](/components/buttons/#third-party-routing-library) is documented with the `ButtonBase` component. A lot of the interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. You can use the same solution with them.
## How can I access the DOM element?
@@ -215,7 +215,7 @@ If you have several applications running on one page, consider using one @materi
## My App doesn't render correctly on the server
-If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. We are very strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out our [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
+If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. Server side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
### CSS works only on first load then is missing
@@ -223,7 +223,7 @@ The CSS is only generated on the first load of the page. Then, the CSS is missin
#### Action to Take
-We rely on a cache, the sheets manager, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
+The styling solution relies on a cache, the *sheets manager*, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
*example of fix:*
@@ -358,4 +358,33 @@ function App() {
</div>
);
}
+```
+
+## What's the clsx dependency for?
+
+[clsx](https://github.com/lukeed/clsx) is a tiny utility for constructing `className` strings conditionally.
+
+Instead of writing:
+
+```jsx
+return (
+ <div
+ className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`}
+ />
+);
+```
+
+you can do:
+
+```jsx
+import clsx from 'clsx';
+
+return (
+ <div
+ className={clsx('MuiButton-root', {
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ })}
+ />
+);
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/faq/faq-ja.md b/docs/src/pages/getting-started/faq/faq-ja.md
index dd603785d069b0..f7279f77f19849 100644
--- a/docs/src/pages/getting-started/faq/faq-ja.md
+++ b/docs/src/pages/getting-started/faq/faq-ja.md
@@ -1,6 +1,6 @@
# よくある質問と回答
-<p class="description">特定の問題で立ち往生していますか？ よくある質問でこれらのよくある問題のいくつかを最初に確認してください。</p>
+<p class="description">特定の問題で立ち往生していますか？ Check some of these common gotchas first in the FAQ.</p>
もし探しているものがまだ見つからない場合、 [Spectrum](https://spectrum.chat/material-ui)にある我々のコミュニティに質問ができます 使い方の質問やその他重要ではない問題は、Github issuesではなく[StackOverflow](https://stackoverflow.com/questions/tagged/material-ui)を使ってください。 `material-ui`というStackOverflowタグがあります。 質問にはそのタグをつけてください。
@@ -22,7 +22,7 @@
## モーダルを開くと、fixed positionされたDOMが移動するのはなぜですか？
-モーダルが開かれるとすぐにスクロールをブロックします。 モーダルが唯一のインタラクティブなコンテンツであるべき場合、backgroundとの連動を防ぎます。しかし、スクロールバーを取り除くことで**fixed positionされたDOM**を動かすことができます。 この場合、Material-UIにこれらのDOMを処理するように伝えるために、グローバルな `.mui-fixed`クラス名を適用することができます。
+Scroll is blocked as soon as a modal is opened. モーダルが唯一のインタラクティブなコンテンツであるべき場合、backgroundとの連動を防ぎます。しかし、スクロールバーを取り除くことで**fixed positionされたDOM**を動かすことができます。 この場合、Material-UIにこれらのDOMを処理するように伝えるために、グローバルな `.mui-fixed`クラス名を適用することができます。
## 波紋アニメーションをグローバルに無効にする方法は？
@@ -108,7 +108,7 @@ const theme = createMuiTheme({
## react-routerの使い方は？
-私達は[サードパーティ製ルーティングライブラリ](/components/buttons/#third-party-routing-library)で`ButtonBase`コンポーネントの使い方をドキュメント化しました。 多くのインタラクティブなコンポーネントを内部的に使っています：`Button`, `MenuItem`, `<ListItem button />`, `Tab` それらの例を参考にしてください。
+How to use a [third-party routing library](/components/buttons/#third-party-routing-library) is documented with the `ButtonBase` component. A lot of the interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. それらの例を参考にしてください。
## どうやってDOM要素にアクセスできますか？
@@ -215,7 +215,7 @@ Lernaルートフォルダー内のpackage.jsonファイルの例
## サーバーでアプリが正しくレンダリングされない
-動作しない場合は、99%のケースで設定の問題になります。 欠落しているプロパティー、誤った呼び出し順序、または欠落しているコンポーネント。 調べてみることです。私たちは設定に関して非常に厳格であり、何が間違っているのかを知る最善の方法は、あなたのプロジェクトを既に動作しているセットアップと比較し、私たちの[reference implementations](/guides/server-rendering/#reference-implementations)を少しずつ調べてみることです。
+動作しない場合は、99%のケースで設定の問題になります。 欠落しているプロパティー、誤った呼び出し順序、または欠落しているコンポーネント。 Server side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
### CSSは最初のロードでのみ機能し、その後欠落します
@@ -223,7 +223,7 @@ CSSは、ページの最初のロード時にのみ生成されます。 この
#### 実行するアクション
-キャッシュ、つまりシートマネージャに依存して、コンポーネントタイプごとに1回だけCSSを注入します。 (2つのボタンを使用する場合は、ボタンのCSSが1回だけ必要です。)。 要求ごとに**新しい`シート`インスタンスを作成する必要があります**。
+The styling solution relies on a cache, the *sheets manager*, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). 要求ごとに**新しい`シート`インスタンスを作成する必要があります**。
*修正の例：*
@@ -323,7 +323,7 @@ function App() {
}
```
-ここで、`Portal`は、`container.current`が使用可能の場合にのみ、子をコンテナーにマウントします。 Here is a naive implementation of Portal:
+ここで、`Portal`は、`container.current`が使用可能の場合にのみ、子をコンテナーにマウントします。 ポータルの単純な実装は次のとおりです。
```jsx
function Portal({ children, container }) {
@@ -340,9 +340,9 @@ function Portal({ children, container }) {
}
```
-With this simple heuristic `Portal` might re-render after it mounts because refs are up-to-date before any effects run. However, just because a ref is up-to-date doesn't mean it points to a defined instance. If the ref is attached to a ref forwarding component it is not clear when the DOM node will be available. In the above example the `Portal` would run run an effect once but might not re-render because `ref.current` is still `null`. This is especially apparent for React.lazy components in Suspense. The above implementation could also not account for a change in the DOM node.
+この単純なヒューリスティックな` Portal ` refはエフェクトが実行される前に最新であるため、マウント後に再レンダリングされる可能性があります。 ただし、refが最新であるからといって、定義済みインスタンスを指しているわけではありません。 refがref転送コンポーネントに接続されている場合、DOMノードがいつ使用可能になるかは不明です。 上記の例では、`Portal`は効果を一度だけ実行しますが、`ref.current`はまだ`null`です。 これは特に 遅延（Suspense）のReact.lazy components の場合に顕著です。 上記の実装では、DOMノードの変更も考慮できませんでした。
-This is why we require a prop with the actual DOM node so that React can take care of determining when the `Portal` should re-render:
+このため、Reactが`Portal`をいつ再レンダリングするかを決定できるように、実際のDOMノードを持つプロップが必要です。
```jsx
function App() {
@@ -358,4 +358,33 @@ function App() {
</div>
);
}
+```
+
+## Clsxの依存関係は何ですか？
+
+[clsx](https://github.com/lukeed/clsx)は、条件付きで`className`文字列を構築するための小さなユーティリティです。
+
+Instead of writing:
+
+```jsx
+return (
+ <div
+ className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`}
+ />
+);
+```
+
+you can do:
+
+```jsx
+import clsx from 'clsx';
+
+return (
+ <div
+ className={clsx('MuiButton-root', {
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ })}
+ />
+);
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/faq/faq-pt.md b/docs/src/pages/getting-started/faq/faq-pt.md
index 1da6360bc8217d..0dce68a493e32c 100644
--- a/docs/src/pages/getting-started/faq/faq-pt.md
+++ b/docs/src/pages/getting-started/faq/faq-pt.md
@@ -1,6 +1,6 @@
# Perguntas Frequentes
-<p class="description">Preso em um determinado problema? Confira algumas dessas dicas recorrentes em nosso FAQ.</p>
+<p class="description">Preso em um determinado problema? Check some of these common gotchas first in the FAQ.</p>
Se você não encontrou o que procurava, você pode perguntar para a comunidade no [Spectrum](https://spectrum.chat/material-ui). Para perguntas sobre como fazer e outros assuntos, use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) em vez de abrir issues no Github. Há uma tag no StackOverflow chamada `material-ui` que você pode usar para marcar suas perguntas.
@@ -22,7 +22,7 @@ No geral, é simples livrar-se desse problema encapsulando cada aplicação Mate
## Por que os elementos posicionados como fixos se movem quando um modal é aberto?
-Nós bloqueamos a rolagem assim que um modal é aberto. Isso evita a interação com o segundo plano quando o modal deve ser o único conteúdo interativo, no entanto, remover a barra de rolagem pode fazer com que seus **elementos posicionados como fixos** se movam. Nesta situação, você pode aplicar um nome de classe global `.mui-fixed ` para informar ao Material-UI para manipular esses elementos.
+Scroll is blocked as soon as a modal is opened. Isso evita a interação com o segundo plano quando o modal deve ser o único conteúdo interativo, no entanto, remover a barra de rolagem pode fazer com que seus **elementos posicionados como fixos** se movam. Nesta situação, você pode aplicar um nome de classe global `.mui-fixed ` para informar ao Material-UI para manipular esses elementos.
## Como posso desativar o efeito cascata globalmente?
@@ -108,7 +108,7 @@ Como regra geral, use apenas o estilo em linha para propriedades de estilo dinâ
## Como usar react-router?
-Documentamos como usar uma [biblioteca de roteamento de terceiros ](/components/buttons/#third-party-routing-library) com o componente `ButtonBase`. Muitos de nossos componentes interativos usam internamente: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. Você pode usar a mesma solução com eles.
+How to use a [third-party routing library](/components/buttons/#third-party-routing-library) is documented with the `ButtonBase` component. A lot of the interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. Você pode usar a mesma solução com eles.
## Como posso acessar o elemento DOM?
@@ -215,7 +215,7 @@ Se você tiver várias aplicações em execução em uma página, considere o us
## Minha aplicaçao não é renderizada corretamente no servidor
-Se isso não funcionar, em 99% dos casos é um problema de configuração. Uma propriedade ausente, uma ordem de chamada incorreta ou um componente ausente. Somos muito rigorosos quanto à configuração, e a melhor maneira de descobrir o que está errado é comparar seu projeto com uma configuração já em funcionamento, confira nossas [implementações de referência](/guides/server-rendering/#reference-implementations), de ponto a ponto.
+Se isso não funcionar, em 99% dos casos é um problema de configuração. Uma propriedade ausente, uma ordem de chamada incorreta ou um componente ausente. Server side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
### O CSS funciona apenas no primeiro carregamento, em seguida, para de funcionar
@@ -223,7 +223,7 @@ O CSS é gerado apenas no primeiro carregamento da página. Em seguida, o CSS n
#### Ação a tomar
-Contamos com um cache, o gerenciador de folhas (sheets), para injetar apenas o CSS uma vez por tipo de componente (se você usa dois botões, você só precisa do CSS do botão uma vez). Você precisa criar **uma nova instância de `sheets` para cada requisição **.
+The styling solution relies on a cache, the *sheets manager*, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). Você precisa criar **uma nova instância de `sheets` para cada requisição **.
*exemplo de correção:*
@@ -358,4 +358,33 @@ function App() {
</div>
);
}
+```
+
+## What's the clsx dependency for?
+
+[clsx](https://github.com/lukeed/clsx) is a tiny utility for constructing `className` strings conditionally.
+
+Instead of writing:
+
+```jsx
+return (
+ <div
+ className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`}
+ />
+);
+```
+
+you can do:
+
+```jsx
+import clsx from 'clsx';
+
+return (
+ <div
+ className={clsx('MuiButton-root', {
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ })}
+ />
+);
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/faq/faq-ru.md b/docs/src/pages/getting-started/faq/faq-ru.md
index bf46472e6082d3..f590ebd4f0c48a 100644
--- a/docs/src/pages/getting-started/faq/faq-ru.md
+++ b/docs/src/pages/getting-started/faq/faq-ru.md
@@ -1,28 +1,28 @@
# Часто задаваемые вопросы (FAQ)
-<p class="description">Столкнулись с особой проблемой? Сначала посмотрите наиболее распространенные ошибки в нашем FAQ.</p>
+<p class="description">Столкнулись с особой проблемой? Check some of these common gotchas first in the FAQ.</p>
Если вы все еще не можете найти то, что ищете, вы можете задать вопрос сообществу в [Spectrum](https://spectrum.chat/material-ui). Для практических и других вопросов, пожалуйста, используйте [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) вместо вопросов на Github. На StackOverflow существует тег `material-ui`, который вы можете использовать для ваших вопросов.
-## Why aren't my components rendering correctly in production builds?
+## Почему мои компоненты не отображаются корректно в продакшн сборках?
-This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. For Material-UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/styles/advanced/#class-names).
+Скорее всего проблема возникает из-за конфликта имен классов, когда ваш код находится в продакшн пакете. Чтобы Material-UI работал, значения `className` всех компонентов на странице должны генерироваться одним экземпляром [генератора имен классов](/styles/advanced/#class-names).
-To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.
+Чтобы исправить эту проблему, все компоненты на странице должны быть инициализированы так, чтобы между ними был только **один генератор имен классов**.
-You could end up accidentally using two class name generators in a variety of scenarios:
+Два генератора имен классов вы можете получить в различных сценариях:
-- You accidentally **bundle** two versions of Material-UI. You might have a dependency not correctly setting Material-UI as a peer dependency.
-- You are using `StylesProvider` for a **subset** of your React Tree.
-- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
+- Вы случайно используете две версии Material-UI в **пакете**. Возможно, у вас есть зависимость, неправильно устанавливающая Material-UI в качестве одноранговой зависимости.
+- Вы используете `StylesProvider` для **подмножества** вашего Реактивного Дерева.
+- Вы используете сборщик, и он разбивает код таким образом, что создает несколько экземпляров генератора имен классов.
-> If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
+> Если вы используете webpack с [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), попробуйте настроить [`runtimeChunk` в секции `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
-Overall, it's simple to recover from this problem by wrapping each Material-UI application with [`StylesProvider`](/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared between them**.
+В целом, можно легко справиться с этой проблемой, обернув каждое приложение Material-UI компонентом [`StylesProvider`](/styles/api/#stylesprovider) в корне их дерева компонентов **и используя один генератор имен классов, который совместно используется между ними**.
## Why do the fixed positioned elements move when a modal is opened?
-We block the scroll as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content, however, removing the scrollbar can make your **fixed positioned elements** move. In this situation, you can apply a global `.mui-fixed` class name to tell Material-UI to handle those elements.
+Scroll is blocked as soon as a modal is opened. This prevents interacting with the background when the modal should be the only interactive content, however, removing the scrollbar can make your **fixed positioned elements** move. In this situation, you can apply a global `.mui-fixed` class name to tell Material-UI to handle those elements.
## How can I disable the ripple effect globally?
@@ -108,7 +108,7 @@ As a rule of thumb, only use inline-style for dynamic style properties. The CSS
## Как мне использовать react-router?
-Мы описали, как использовать [стороннюю библиотеку маршрутизации](/components/buttons/#third-party-routing-library) с помощью компонента `ButtonBase`. A lot of our interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. Вы можете использовать то же решение с ними.
+How to use a [third-party routing library](/components/buttons/#third-party-routing-library) is documented with the `ButtonBase` component. A lot of the interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. Вы можете использовать то же решение с ними.
## Как я могу получить доступ к элементу DOM?
@@ -215,7 +215,7 @@ If you have several applications running on one page, consider using one @materi
## My App doesn't render correctly on the server
-If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. We are very strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out our [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
+If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. Server side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
### CSS works only on first load then is missing
@@ -223,7 +223,7 @@ The CSS is only generated on the first load of the page. Then, the CSS is missin
#### Action to Take
-We rely on a cache, the sheets manager, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
+The styling solution relies on a cache, the *sheets manager*, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
*example of fix:*
@@ -289,18 +289,18 @@ function handleRender(req, res) {
## Why are the colors I am seeing different from what I see here?
-The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to [this page](/customization/theming/) to learn about theme customization.
+Сайт документации использует пользовательскую тему. Следовательно, цветовая палитра отличается от темы по умолчанию, которую поставляет Material-UI. Пожалуйста, обратитесь к [этой странице](/customization/theming/), чтобы узнать о настройке темы.
-## Material-UI is awesome. How can I support the project?
+## Material-UI потрясающий. Как я могу поддержать проект?
-There are many ways to support Material-UI:
+Есть несколько способов, чтобы поддержать Material-UI:
- Улучшить [документацию](https://github.com/mui-org/material-ui/tree/master/docs).
-- Help others to get started.
-- [Spread the word](https://twitter.com/MaterialUI).
+- Помочь другим начать.
+- [Распространять информацию](https://twitter.com/MaterialUI).
- Отвечать на вопросы на [и StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) или [Spectrum](https://spectrum.chat/material-ui).
-If you use Material-UI in a commercial project and would like to support its continued development by becoming a **Sponsor**, or in a side or hobby project and would like to become a backer, you can do so through [OpenCollective](https://opencollective.com/material-ui).
+Если вы используете Material-UI в коммерческом проекте и хотели бы поддержать его дальнейшее развитие, став **спонсором**, или в стороннем или хобби-проекте, и хотели бы поддержать, вы можете сделать это через [OpenCollective](https://opencollective.com/material-ui).
All funds raised are managed transparently, and Sponsors receive recognition in the README and on the Material-UI home page.
@@ -358,4 +358,33 @@ function App() {
</div>
);
}
+```
+
+## What's the clsx dependency for?
+
+[clsx](https://github.com/lukeed/clsx) is a tiny utility for constructing `className` strings conditionally.
+
+Instead of writing:
+
+```jsx
+return (
+ <div
+ className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`}
+ />
+);
+```
+
+you can do:
+
+```jsx
+import clsx from 'clsx';
+
+return (
+ <div
+ className={clsx('MuiButton-root', {
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ })}
+ />
+);
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/faq/faq-zh.md b/docs/src/pages/getting-started/faq/faq-zh.md
index fa31aa90488d80..eb6c1cea4ec5b3 100644
--- a/docs/src/pages/getting-started/faq/faq-zh.md
+++ b/docs/src/pages/getting-started/faq/faq-zh.md
@@ -1,6 +1,6 @@
# 常见问题解答
-<p class="description">您在一个特定的问题上停滞不前吗？ 您可以先在我们的常见 FAQ (问题解答) 中检索一下常见问题。</p>
+<p class="description">您在一个特定的问题上停滞不前吗？ Check some of these common gotchas first in the FAQ.</p>
当遇到一些无法解决的问题，您可以在[Spectrum](https://spectrum.chat/material-ui)社区中进行提问。 对于如何提问，和其他并非功能性问题的，请使用[StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) 提问，请不要使用 Github 的 issues板块。 在 StackOverflow 里面有一个 ` material-ui `的标签， 您可以用它来标记你的问题。
@@ -14,7 +14,7 @@
- 比如你一不小心 **打包**了 两个版本的 Material-UI。 你可能错误地将一个依赖和 material-ui 设置为同版本依赖了。
- 对于你的React Tree（React树控件）而言，你在使用`StylesProvider`构建**subset（分支）**。
-- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
+- 您正在使用打包的代码分割功能，这会生成多个 class 名字
> 如果你正使用带有[SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/) 的webpack，请尝试在[`优化项(optimizations)`下配置 `runtimeChunk`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk) 。
@@ -22,7 +22,7 @@
## 为什么当打开Modal（模态框）时，fixed positioned（位置固定的）元素会移动？
-一旦打开模态框，我们就会禁用滚动。 而模态框是应该是唯一的交互式内容时，这可以防止与背景交互，但是，删除滚动条可以恢复**fixed positioned(固定位置的)元素**的移动。 在这种情况下，您可以应用全局`.mui-fixed`类名称来告知 Material-UI 来处理这些元素。
+Scroll is blocked as soon as a modal is opened. 而模态框是应该是唯一的交互式内容时，这可以防止与背景交互，但是，删除滚动条可以恢复**fixed positioned(固定位置的)元素**的移动。 在这种情况下，您可以应用全局`.mui-fixed`类名称来告知 Material-UI 来处理这些元素。
## 如何在全局禁用 ripple effect（涟漪效果）？
@@ -42,9 +42,9 @@ const theme = createMuiTheme({
});
```
-## How can I disable transitions globally?
+## 如何禁用全局transition
-You can disable transitions globally by providing the following in your theme:
+您可以通过在主题中提供以下内容来禁用全局动画：
```js
import { createMuiTheme } from '@material-ui/core';
@@ -59,7 +59,7 @@ const theme = createMuiTheme({
有时您会在某些情况下才使用这种行为，例如在测试期间或者在一些低端设备上，在这些情况下，您可以动态地更改主题的值。
-You can go one step further by disabling all the transitions, animations and the ripple effect:
+你可以更进一步，禁用所有的 transition，animations 和 ripple effect::
```js
import { createMuiTheme } from '@material-ui/core';
@@ -91,7 +91,7 @@ const theme = createMuiTheme({
});
```
-## 是否必须使用 JSS 给我的 app 添加样式？
+## 我是否必须使用 JSS 给 app 来设置样式呢？
No, it's not required. But this dependenency comes built in, so carries no additional bundle size overhead.
@@ -108,7 +108,7 @@ No, it's not required. But this dependenency comes built in, so carries no addit
## 如何使用 react-router？
-我们在`ButtonBase` 组件里面解析了如何使用带有[第三方routing的库](/components/buttons/#third-party-routing-library)。 A lot of our interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. 您可以使用相同的解决方案。
+How to use a [third-party routing library](/components/buttons/#third-party-routing-library) is documented with the `ButtonBase` component. A lot of the interactive components use it internally: `Link`, `Button`, `MenuItem`, `<ListItem button />`, `Tab`, etc. 您可以使用相同的解决方案。
## 如何访问 DOM 元素？
@@ -215,7 +215,7 @@ If you have several applications running on one page, consider using one @materi
## My App doesn't render correctly on the server
-If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. We are very strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out our [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
+If it doesn't work, in 99% of cases it's a configuration issue. A missing property, a wrong call order, or a missing component. Server side rendering is strict about configuration, and the best way to find out what's wrong is to compare your project to an already working setup, check out the [reference implementations](/guides/server-rendering/#reference-implementations), bit by bit.
### CSS works only on first load then is missing
@@ -223,7 +223,7 @@ The CSS is only generated on the first load of the page. Then, the CSS is missin
#### 要采取的行动
-We rely on a cache, the sheets manager, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
+The styling solution relies on a cache, the *sheets manager*, to only inject the CSS once per component type (if you use two buttons, you only need the CSS of the button one time). You need to create **a new `sheets` instance for each request**.
*example of fix:*
@@ -358,4 +358,33 @@ function App() {
</div>
);
}
+```
+
+## What's the clsx dependency for?
+
+[clsx](https://github.com/lukeed/clsx) is a tiny utility for constructing `className` strings conditionally.
+
+Instead of writing:
+
+```jsx
+return (
+ <div
+ className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`}
+ />
+);
+```
+
+you can do:
+
+```jsx
+import clsx from 'clsx';
+
+return (
+ <div
+ className={clsx('MuiButton-root', {
+ 'Mui-disabled': disabled,
+ 'Mui-selected': selected,
+ })}
+ />
+);
```
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-aa.md b/docs/src/pages/getting-started/installation/installation-aa.md
index f32555598c071f..4223526b8de295 100644
--- a/docs/src/pages/getting-started/installation/installation-aa.md
+++ b/docs/src/pages/getting-started/installation/installation-aa.md
@@ -42,13 +42,13 @@ crwdns94692:0crwdne94692:0
crwdns94696:0crwdne94696:0
-crwdns94698:0crwdne94698:0
+crwdns101232:0crwdne101232:0
- crwdns94700:0crwdne94700:0
- crwdns94702:0crwdne94702:0
crwdns94704:0crwdne94704:0
-crwdns94706:0crwdne94706:0
+crwdns101234:0crwdne101234:0
-crwdns94708:0crwdne94708:0 crwdns94710:0crwdne94710:0 crwdns94712:0crwdne94712:0
\ No newline at end of file
+crwdns94708:0crwdne94708:0 crwdns94710:0crwdne94710:0 crwdns101236:0crwdne101236:0
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-de.md b/docs/src/pages/getting-started/installation/installation-de.md
index 7e3a318712110d..aec179fc0995b0 100644
--- a/docs/src/pages/getting-started/installation/installation-de.md
+++ b/docs/src/pages/getting-started/installation/installation-de.md
@@ -50,13 +50,13 @@ yarn add @material-ui/icons
Sie können mit der Material-UI mit minimaler Front-End-Infrastruktur verwenden, was sich hervorragend für das Prototyping eignet.
-Wir bieten zwei UMD-Dateien (**Universal Module Definition**) an:
+Two Universal Module Definition (**UMD**) files are provided:
- eine für die Entwicklung: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- eine für die Entwicklung: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
Sie können diesem [CDN-Beispiel](https://github.com/mui-org/material-ui/tree/master/examples/cdn) folgen um schnell anfangen zu können.
-⚠️ Wir **raten davon ab**, diesen Ansatz in der **Produktion** zu verwenden: Der Client muss die gesamte Bibliothek herunterladen, unabhängig davon, welche Komponenten tatsächlich verwendet werden, was die Leistung und Bandbreitennutzung beeinflusst.
+⚠️ Using this approach in **production** is **discouraged** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
-⚠️ Die UMD-Links verwenden den `neueste` Tag, um auf die neueste Version der Bibliothek zu verweisen. Dieser Link ist **instabil**, da er sich verändert, wenn wir neue Versionen veröffentlichen. Sie sollten in Betracht ziehen, auf eine bestimmte Version wie [v3.9.3](https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.development.js) zu verweisen.
\ No newline at end of file
+⚠️ Die UMD-Links verwenden den `neueste` Tag, um auf die neueste Version der Bibliothek zu verweisen. Dieser Link ist **instabil**, da er sich verändert, wenn wir neue Versionen veröffentlichen. You should consider pointing to a specific version, such as [v4.4.0](https://unpkg.com/@material-ui/core@4.4.0/umd/material-ui.development.js).
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-es.md b/docs/src/pages/getting-started/installation/installation-es.md
index ab847c772ce4ef..3748d73b73534b 100644
--- a/docs/src/pages/getting-started/installation/installation-es.md
+++ b/docs/src/pages/getting-started/installation/installation-es.md
@@ -50,13 +50,13 @@ yarn add @material-ui/icons
Puedes comenzar a utilizar Material-UI con una infraestructura mínima de front-end, lo que es excelente para la creación de prototipos.
-We are providing two Universal Module Definition (**UMD**) files:
+Two Universal Module Definition (**UMD**) files are provided:
- uno para desarrollo: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- uno para producción: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
Puedes seguir [ este ejemplo sobre CDN ](https://github.com/mui-org/material-ui/tree/master/examples/cdn) para empezar rápidamente.
-⚠️ We **discourage** using this approach in **production** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
+⚠️ Using this approach in **production** is **discouraged** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
-⚠️ The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is **unstable**, it shifts as we release new versions. You should consider pointing to a specific version like [v3.9.3](https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.development.js).
\ No newline at end of file
+⚠️ The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is **unstable**, it shifts as we release new versions. You should consider pointing to a specific version, such as [v4.4.0](https://unpkg.com/@material-ui/core@4.4.0/umd/material-ui.development.js).
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-fr.md b/docs/src/pages/getting-started/installation/installation-fr.md
index 30c2116208423b..e59ae24cf32a85 100644
--- a/docs/src/pages/getting-started/installation/installation-fr.md
+++ b/docs/src/pages/getting-started/installation/installation-fr.md
@@ -50,13 +50,13 @@ yarn add @material-ui/icons
Vous pouvez commencer à utiliser Material-UI avec une infrastructure frontale minimale, idéale pour le prototypage.
-We are providing two Universal Module Definition (**UMD**) files:
+Two Universal Module Definition (**UMD**) files are provided:
- un pour le développement: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- un pour la production: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
Vous pouvez suivre [cet exemple CDN](https://github.com/mui-org/material-ui/tree/master/examples/cdn) pour commencer rapidement.
-⚠️ We **discourage** using this approach in **production** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
+⚠️ Using this approach in **production** is **discouraged** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
-⚠️ The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is **unstable**, it shifts as we release new versions. You should consider pointing to a specific version like [v3.9.3](https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.development.js).
\ No newline at end of file
+⚠️ The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is **unstable**, it shifts as we release new versions. You should consider pointing to a specific version, such as [v4.4.0](https://unpkg.com/@material-ui/core@4.4.0/umd/material-ui.development.js).
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-ja.md b/docs/src/pages/getting-started/installation/installation-ja.md
index e003510f9b7d0a..a4e6796ce68fcd 100644
--- a/docs/src/pages/getting-started/installation/installation-ja.md
+++ b/docs/src/pages/getting-started/installation/installation-ja.md
@@ -1,6 +1,6 @@
# インストール
-<p class="description">世界で最も人気のあるReact UIフレームワークMaterial-UIをインストールします。</p>
+<p class="description">Material-UIをインストールします。世界で最も人気のあるReact UIフレームワークです。</p>
Material-UIは[ npmパッケージ](https://www.npmjs.com/package/@material-ui/core) として入手可能です。
@@ -50,13 +50,13 @@ yarn add @material-ui/icons
プロトタイピングには最適な最小限のフロントエンド構造でMaterial-UIを使い始めることができます。
-私たちは以下2種類の (**UMD**) ファイルを提供しています。
+Two Universal Module Definition (**UMD**) files are provided:
- 開発用: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- 本番用: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
[CDN example](https://github.com/mui-org/material-ui/tree/master/examples/cdn)に従うことで、すぐに開発を始めることができます。
-⚠️ We **discourage** using this approach in **production** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
+⚠️ Using this approach in **production** is **discouraged** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
-⚠️ The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is **unstable**, it shifts as we release new versions. You should consider pointing to a specific version like [v3.9.3](https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.development.js).
\ No newline at end of file
+⚠️ UMDリンクは、ライブラリの最新バージョンを示すために`latest`タグを使用しています。 このポインターは**不安定です** 、新しいバージョンがリリースされると変わります。 You should consider pointing to a specific version, such as [v4.4.0](https://unpkg.com/@material-ui/core@4.4.0/umd/material-ui.development.js).
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-pt.md b/docs/src/pages/getting-started/installation/installation-pt.md
index e1f27092665d03..8a8380fea83a90 100644
--- a/docs/src/pages/getting-started/installation/installation-pt.md
+++ b/docs/src/pages/getting-started/installation/installation-pt.md
@@ -50,13 +50,13 @@ yarn add @material-ui/icons
Você pode começar a utilizar o Material-UI com o mínimo de infraestrutura de frontend, o que é bom para prototipação.
-Nós estamos fornecendo dois arquivos no padrão Universal Module Definition (**UMD**):
+Two Universal Module Definition (**UMD**) files are provided:
- um para desenvolvimento: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- um para a produção: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
Você pode seguir [esse exemplo de CDN](https://github.com/mui-org/material-ui/tree/master/examples/cdn) para rapidamente começar.
-⚠️ Nós, porém, não **recomendamos** utilizar esse método no ambiente de **produção** - o cliente precisa baixar a biblioteca inteira, independente de quais componentes realmente são utilizados, afetando o desempenho e o uso de banda.
+⚠️ Using this approach in **production** is **discouraged** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
-⚠️ Os links UMD estão usando a `última` tag para apontar para a versão mais recente da biblioteca. Dessa forma aponta para uma versão **instável**, muda a medida que lançamos novas versões. Você deve considerar apontar para uma versão específica como [v3.9.3](https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.development.js).
\ No newline at end of file
+⚠️ Os links UMD estão usando a `última` tag para apontar para a versão mais recente da biblioteca. Dessa forma aponta para uma versão **instável**, muda a medida que lançamos novas versões. You should consider pointing to a specific version, such as [v4.4.0](https://unpkg.com/@material-ui/core@4.4.0/umd/material-ui.development.js).
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-ru.md b/docs/src/pages/getting-started/installation/installation-ru.md
index 0a584d64efaec8..f0e3bdac2d06ee 100644
--- a/docs/src/pages/getting-started/installation/installation-ru.md
+++ b/docs/src/pages/getting-started/installation/installation-ru.md
@@ -50,13 +50,13 @@ yarn add @material-ui/icons
Вы можете начать использовать Material-UI с минимальной интерфейсной инфраструктурой, что отлично подходит для прототипирования.
-We are providing two Universal Module Definition (**UMD**) files:
+Two Universal Module Definition (**UMD**) files are provided:
- один для разработки: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- один для публикации: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
Вы можете следовать [этому примеру CDN](https://github.com/mui-org/material-ui/tree/master/examples/cdn) для быстрого старта.
-⚠️ We **discourage** using this approach in **production** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
+⚠️ Using this approach in **production** is **discouraged** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
-⚠️ The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is **unstable**, it shifts as we release new versions. You should consider pointing to a specific version like [v3.9.3](https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.development.js).
\ No newline at end of file
+⚠️ The UMD links are using the `latest` tag to point to the latest version of the library. This pointer is **unstable**, it shifts as we release new versions. You should consider pointing to a specific version, such as [v4.4.0](https://unpkg.com/@material-ui/core@4.4.0/umd/material-ui.development.js).
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/installation/installation-zh.md b/docs/src/pages/getting-started/installation/installation-zh.md
index 07adf88abc8ab4..1efbe66a537ffb 100644
--- a/docs/src/pages/getting-started/installation/installation-zh.md
+++ b/docs/src/pages/getting-started/installation/installation-zh.md
@@ -50,13 +50,13 @@ yarn add @material-ui/icons
您可以使用最少的前端基础架构开始使用Material-UI，这对于原型设计很有用
-我们提供两个通用模块规范 (**UMD**) 文件：
+Two Universal Module Definition (**UMD**) files are provided:
- 一个用于开发: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
- 一个用于生产: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js
您可以按照[此CDN示例](https://github.com/mui-org/material-ui/tree/master/examples/cdn)快速开始。
-尽管我们**不鼓励**在**生产环境**中使用这种方式 - 无论实际使用哪些组件，客户端必须下载整个库而这将会影响到性能和带宽利用率。
+⚠️ Using this approach in **production** is **discouraged** though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.
-⚠️ UMD 链接使用 `latest` 标签指向最新版本的库。 这个指向是**不稳定的**，它随着我们发布的新版本而改变。 您应该考虑指向一个具体的版本，如 [v3.9.3](https://unpkg.com/@material-ui/core@3.9.3/umd/material-ui.development.js)。
\ No newline at end of file
+⚠️ UMD 链接使用 `latest` 标签指向最新版本的库。 这个指向是**不稳定的**，它随着我们发布的新版本而改变。 You should consider pointing to a specific version, such as [v4.4.0](https://unpkg.com/@material-ui/core@4.4.0/umd/material-ui.development.js).
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/learn/learn-aa.md b/docs/src/pages/getting-started/learn/learn-aa.md
index 3786f0a7eeb082..f921915dac78ef 100644
--- a/docs/src/pages/getting-started/learn/learn-aa.md
+++ b/docs/src/pages/getting-started/learn/learn-aa.md
@@ -10,15 +10,15 @@ crwdns94732:0crwdne94732:0 crwdns94734:0crwdne94734:0
## crwdns94736:0crwdne94736:0
-crwdns94738:0crwdne94738:0
+crwdns101238:0crwdne101238:0
## crwdns94740:0crwdne94740:0
-crwdns94742:0crwdne94742:0
+crwdns101240:0crwdne101240:0
## crwdns94744:0crwdne94744:0
-crwdns94746:0crwdne94746:0 crwdns94748:0crwdne94748:0
+crwdns94746:0crwdne94746:0 crwdns101242:0crwdne101242:0
### crwdns94750:0crwdne94750:0
diff --git a/docs/src/pages/getting-started/learn/learn-de.md b/docs/src/pages/getting-started/learn/learn-de.md
index 06a603996738cd..c3b7458568d9de 100644
--- a/docs/src/pages/getting-started/learn/learn-de.md
+++ b/docs/src/pages/getting-started/learn/learn-de.md
@@ -10,15 +10,15 @@ Die [Verwendungsseite](/getting-started/usage/#quick-start) enthält ein kleines
## Beispielprojekte
-Wir [hosten einige Beispielprojekte](/getting-started/example-projects/) mit der Infrastruktur, die für die Entwicklung und Bereitstellung von Websites in React erforderlich ist.
+There are [some example projects](/getting-started/example-projects/) available, providing the infrastructure needed to develop and deploy websites in React.
## Templates
-We have a [selection of basic templates](/getting-started/templates/) to help you get started building your app.
+This [selection of basic templates](/getting-started/templates/) will help you get started building your app.
## Empfohlene Ressourcen
-Wenn Sie das erste Mal die Material-UI lernen, finden Sie möglicherweise Blogbeiträge, Bücher und Videokurse von Drittanbietern, die hilfreicher sind als die offizielle Dokumentation. Wir führen eine Liste mit häufig empfohlenen Ressourcen, von denen einige kostenlos sind.
+Wenn Sie das erste Mal die Material-UI lernen, finden Sie möglicherweise Blogbeiträge, Bücher und Videokurse von Drittanbietern, die hilfreicher sind als die offizielle Dokumentation. Here are some recommended resources, some of which are free.
### Kostenlos
diff --git a/docs/src/pages/getting-started/learn/learn-es.md b/docs/src/pages/getting-started/learn/learn-es.md
index b484ad8787a356..49a3441c779189 100644
--- a/docs/src/pages/getting-started/learn/learn-es.md
+++ b/docs/src/pages/getting-started/learn/learn-es.md
@@ -10,15 +10,15 @@ La [página de práctica](/getting-started/usage/#quick-start) contiene un peque
## Proyectos de Ejemplo
-[ Alojamos algunos proyectos de ejemplo ](/getting-started/example-projects/) proporcionando la infraestructura necesaria para desarrollar y desplegar sitios web en React.
+There are [some example projects](/getting-started/example-projects/) available, providing the infrastructure needed to develop and deploy websites in React.
## Templates
-We have a [selection of basic templates](/getting-started/templates/) to help you get started building your app.
+This [selection of basic templates](/getting-started/templates/) will help you get started building your app.
## Recursos recomendados
-Cuando comienzas a aprender Material-UI, puedes encontrar publicaciones en blogs, libros y cursos en video de terceros más útiles que la documentación oficial. Mantenemos una lista de recursos comúnmente recomendados, algunos de los cuales son gratuitos.
+Cuando comienzas a aprender Material-UI, puedes encontrar publicaciones en blogs, libros y cursos en video de terceros más útiles que la documentación oficial. Here are some recommended resources, some of which are free.
### Gratis
diff --git a/docs/src/pages/getting-started/learn/learn-fr.md b/docs/src/pages/getting-started/learn/learn-fr.md
index dff07706479d18..0349ccf9c3e417 100644
--- a/docs/src/pages/getting-started/learn/learn-fr.md
+++ b/docs/src/pages/getting-started/learn/learn-fr.md
@@ -10,15 +10,15 @@ La page [d'utilisation](/getting-started/usage/#quick-start) contient un petit e
## Exemples de Projets
-Nous [hébergeons des exemples de projets](/getting-started/example-projects/) fournissant l'infrastructure nécessaire au développement et au déploiement de sites Web avec React.
+There are [some example projects](/getting-started/example-projects/) available, providing the infrastructure needed to develop and deploy websites in React.
## Templates
-We have a [selection of basic templates](/getting-started/templates/) to help you get started building your app.
+This [selection of basic templates](/getting-started/templates/) will help you get started building your app.
## Ressources recommandées
-Lors de la première utilisation de Material-UI, vous trouverez peut-être que les articles de blogs, livres et cours vidéo tiers sont plus utiles que la documentation officielle. Nous maintenons une liste de ressources de bonnes qualités, dont certaines sont gratuites.
+Lors de la première utilisation de Material-UI, vous trouverez peut-être que les articles de blogs, livres et cours vidéo tiers sont plus utiles que la documentation officielle. Here are some recommended resources, some of which are free.
### Gratuit
diff --git a/docs/src/pages/getting-started/learn/learn-ja.md b/docs/src/pages/getting-started/learn/learn-ja.md
index 41c79ea3b7236e..50233e152323f2 100644
--- a/docs/src/pages/getting-started/learn/learn-ja.md
+++ b/docs/src/pages/getting-started/learn/learn-ja.md
@@ -10,39 +10,39 @@
## サンプルプロジェクト
-ReactでWebサイトを開発およびデプロイする為に必要なインフラを提供する[いくつかのサンプルプロジェクト](/getting-started/example-projects/)があります。
+There are [some example projects](/getting-started/example-projects/) available, providing the infrastructure needed to develop and deploy websites in React.
-## Templates
+## テンプレート
-We have a [selection of basic templates](/getting-started/templates/) to help you get started building your app.
+This [selection of basic templates](/getting-started/templates/) will help you get started building your app.
## 推奨する資料
-Material-UIを初めて学ぶときは、公式のドキュメントよりもサードパーティのブログ記事や本、動画のコースの方が役に立つかもしれません。 一般的に推奨されている資料のリストを管理しています。いくつかは無料です。
+Material-UIを初めて学ぶときは、公式のドキュメントよりもサードパーティのブログ記事や本、動画のコースの方が役に立つかもしれません。 Here are some recommended resources, some of which are free.
### Gratuit
-- **Meet Material-UI — your new favorite user interface library**: a blog post that guides you in building a Todo MVC while covering some important concepts of Material-UI.
+- **Meet Material-UI—あなたのお気に入りの新しいユーザインタフェースライブラリ**: Material-UIのいくつかの重要な概念をカバーしながら、Todo MVCの構築を案内するブログ投稿。
- 📝 [ブログ記事](https://medium.freecodecamp.org/meet-your-material-ui-your-new-favorite-user-interface-library-6349a1c88a8c)
-- **Learn React & Material-UI**: a series of videos covering all the important Material-UI components.
+- **Learn React & Material-UI**: すべての重要なMaterial-UIコンポーネントを網羅した一連のビデオです。
- 📹 [動画](https://www.youtube.com/watch?v=xm4LX5fJKZ8&list=PLcCp4mjO-z98WAu4sd0eVha1g-NMfzHZk)
-- **Getting Started With Material-UI For React**: a blog post that guides you in building a simple card list.
+- **Getting Started With Material-UI For React**: シンプルなカードのリストの構築の手引きとなるブログ記事です。
- 📝 [The blog post](https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555)
- 📹 [The video](https://www.youtube.com/watch?v=PWadEeOuv5o)
-- **Elegant UX in React with Material-UI**: a blog post covering some important Material-UI concepts.
+- **Getting Started With Material-UI For React**: 単純なカードリストの作成方法を説明しているブログ投稿です。
- 📝 [ブログ記事](https://alligator.io/react/material-ui/)
### 有料
-- **Material-UI with React**: Material-UI is an excellent framework to develop beautiful React components faster! This course teaches the fundamentals of Google Material Design and how to develop an end-to-end flight search and booking application using Material-UI and React.
+- **Material-UI with React**: Material-UIは、美しいReactコンポーネントをより速く開発するための優れたフレームワークです。 このコースではGoogle Material Designの基礎を学び、Material-UIとReactを使ってエンド・ツー・エンドのフライト検索と予約アプリケーションを開発する方法を学びます。
- - 📹 [Watch Course Trailer](https://www.youtube.com/watch?v=hhZ6yFvCWho)
- - 💻 [The Course](https://bonsaiilabs.com/courseDetail/material-ui-with-react)
-- **React Material-UI Cookbook**: Build modern day application by implementing Material Design principles in React applications using Material-UI.
+ - 📹[コースの予告編を見る](https://www.youtube.com/watch?v=hhZ6yFvCWho)
+ - 💻[コース](https://bonsaiilabs.com/courseDetail/material-ui-with-react)
+- **React Material-UI Cookbook**: Material-UIを使用したReactアプリケーションにMaterial Designの原則を実装することで、現代的なアプリケーションを構築します。
- 📘 [The book](https://www.amazon.com/gp/product/1789615224/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1789615224&linkCode=as2&tag=oliviertassin-20&linkId=79aec1cb9db829135838614ac1953380)
[](https://www.amazon.com/gp/product/1789615224/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1789615224&linkCode=as2&tag=oliviertassin-20&linkId=79aec1cb9db829135838614ac1953380)
-- **Builder Book**: Learn how to build a full-stack JavaScript web application from scratch, using a Modern JavaScript stack and Material-UI.
+- **Builder Book**: Modern JavaScriptスタックとMaterial-UIを使用して、フルスタックのJavaScript Webアプリケーションを最初から構築する方法を説明します。
- 📘 [書籍](https://builderbook.org/book)
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/learn/learn-pt.md b/docs/src/pages/getting-started/learn/learn-pt.md
index 54f6427a258a4a..c9e5e702132360 100644
--- a/docs/src/pages/getting-started/learn/learn-pt.md
+++ b/docs/src/pages/getting-started/learn/learn-pt.md
@@ -10,15 +10,15 @@ A [página de uso](/getting-started/usage/#quick-start) contém um pequeno exemp
## Exemplos de Projetos
-Nós [hospedamos alguns projetos de exemplo](/getting-started/example-projects/) fornecendo a infraestrutura necessária para desenvolver e implantar sites com React.
+There are [some example projects](/getting-started/example-projects/) available, providing the infrastructure needed to develop and deploy websites in React.
## Modelos
-Temos uma [seleção de modelos básicos](/getting-started/templates/) para ajudar você a começar a criar o seu aplicativo.
+This [selection of basic templates](/getting-started/templates/) will help you get started building your app.
## Recursos recomendados
-Ao começar a aprender o Material-UI, você pode encontrar postagens de blogs de terceiros, livros e cursos em vídeo mais úteis do que a documentação oficial. Mantemos uma lista de recursos comumente recomendados, alguns dos quais são gratuitos.
+Ao começar a aprender o Material-UI, você pode encontrar postagens de blogs de terceiros, livros e cursos em vídeo mais úteis do que a documentação oficial. Here are some recommended resources, some of which are free.
### Grátis
diff --git a/docs/src/pages/getting-started/learn/learn-ru.md b/docs/src/pages/getting-started/learn/learn-ru.md
index fedadf1e800441..be163be542b737 100644
--- a/docs/src/pages/getting-started/learn/learn-ru.md
+++ b/docs/src/pages/getting-started/learn/learn-ru.md
@@ -10,15 +10,15 @@
## Примеры проектов
-We [host some example projects](/getting-started/example-projects/) providing the infrastructure needed to develop and deploy websites in React.
+There are [some example projects](/getting-started/example-projects/) available, providing the infrastructure needed to develop and deploy websites in React.
## Templates
-We have a [selection of basic templates](/getting-started/templates/) to help you get started building your app.
+This [selection of basic templates](/getting-started/templates/) will help you get started building your app.
## Рекомендуемые ресурсы
-Впервые изучая Material-UI, вы можете найти публикации в блогах, книги и видео курсы более полезными, чем официальная документация. We maintain a list of commonly recommended resources, some of which are free.
+Впервые изучая Material-UI, вы можете найти публикации в блогах, книги и видео курсы более полезными, чем официальная документация. Here are some recommended resources, some of which are free.
### Free
diff --git a/docs/src/pages/getting-started/learn/learn-zh.md b/docs/src/pages/getting-started/learn/learn-zh.md
index 97a6c5ca1a23ab..9b1e4be76308be 100644
--- a/docs/src/pages/getting-started/learn/learn-zh.md
+++ b/docs/src/pages/getting-started/learn/learn-zh.md
@@ -10,15 +10,15 @@
## 范例项目
-我们在 React 上[托管了一些范例项目](/getting-started/example-projects/)，他们都提供了需要开发和部署网站的架构。
+There are [some example projects](/getting-started/example-projects/) available, providing the infrastructure needed to develop and deploy websites in React.
## Templates
-We have a [selection of basic templates](/getting-started/templates/) to help you get started building your app.
+This [selection of basic templates](/getting-started/templates/) will help you get started building your app.
## 推荐资源
-首次学习 Material-UI 时，您可能会发现一些第三方博客文章，书籍和视频课程反而会比官方文档更有帮助。 在此我们维护了一份常用推荐的资源列表，而其中一些资源是免费的。
+首次学习 Material-UI 时，您可能会发现一些第三方博客文章，书籍和视频课程反而会比官方文档更有帮助。 Here are some recommended resources, some of which are free.
### 免费的资源
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-aa.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-aa.md
index 2e2e8c57ba2154..87309d228a8531 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-aa.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-aa.md
@@ -15,7 +15,7 @@ crwdns95064:0crwdne95064:0 crwdns95066:0crwdne95066:0 crwdns95068:0crwdne95068:0
## crwdns95070:0crwdne95070:0
-crwdns95072:0crwdne95072:0 crwdns95074:0crwdne95074:0 crwdns95076:0crwdne95076:0
+crwdns95072:0crwdne95072:0 crwdns101244:0crwdne101244:0 crwdns95076:0crwdne95076:0
### crwdns95078:0crwdne95078:0
@@ -25,4 +25,4 @@ crwdns95084:0crwdne95084:0 crwdns95086:0crwdne95086:0 crwdns95088:0crwdne95088:0
## crwdns95092:0crwdne95092:0
-crwdns95094:0crwdne95094:0 crwdns95096:0crwdne95096:0
\ No newline at end of file
+crwdns95094:0crwdne95094:0 crwdns101246:0crwdne101246:0
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-de.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-de.md
index ad83228cdc91a3..8510d5f2894765 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-de.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-de.md
@@ -15,7 +15,7 @@ Da Googlebot einen Web-Rendering-Service (WRS) zum Indizieren des Seiteninhalts
## Server
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Wir versuchen auch, die in Wartung befindlichen [LTS-Versionen](https://github.com/nodejs/Release#lts-schedule1) zu unterstützen. Right now, it supports **node v8.x** and newer versions.
+Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. Right now, it supports **node v8.x** and newer versions.
### CSS-Präfix
@@ -25,4 +25,4 @@ Das in dieser Dokumentation bereitgestellte CSS wird mit dem [`Autoprefixer`](ht
## React
-Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at our older [versions](/versions/) for backward compatibility.
\ No newline at end of file
+Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at the older [versions](/versions/) for backward compatibility.
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-es.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-es.md
index fe682369a84e26..e7ccdd281c5210 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-es.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-es.md
@@ -15,7 +15,7 @@ Es fundamental que Material-UI sea compatible con el servicio de renderización
## Servidor
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). También nos esforzamos por mantener la compatibilidad con las [versiones LTS que se encuentren en mantenimiento](https://github.com/nodejs/Release#lts-schedule1). Right now, it supports **node v8.x** and newer versions.
+Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. Right now, it supports **node v8.x** and newer versions.
### Prefijado de CSS
@@ -25,4 +25,4 @@ El CSS servido en ésta documentación se procesa con [`autoprefixer`](https://w
## React
-Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at our older [versions](/versions/) for backward compatibility.
\ No newline at end of file
+Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at the older [versions](/versions/) for backward compatibility.
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-fr.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-fr.md
index 6653f829a52534..87076909c0ab3b 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-fr.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-fr.md
@@ -15,7 +15,7 @@ Material-UI prend en charge les dernières versions stables de tous les principa
## Serveur
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Nous essayons également de supporter les [versions LTS en maintenance](https://github.com/nodejs/Release#lts-schedule1) . Right now, it supports **node v8.x** and newer versions.
+Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. Right now, it supports **node v8.x** and newer versions.
### Préfixes CSS
@@ -25,4 +25,4 @@ The CSS served on this documentation is processed with [`autoprefixer`](https://
## React
-Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at our older [versions](/versions/) for backward compatibility.
\ No newline at end of file
+Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at the older [versions](/versions/) for backward compatibility.
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-ja.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-ja.md
index 43b1f965485a26..7f302da64cdc3e 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-ja.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-ja.md
@@ -4,18 +4,18 @@
## ブラウザ
-Material-UIは主要なブラウザとプラットフォームの最新の安定版リリースをサポートしています。 It also supports Internet Explorer 11. You don't need to provide any JavaScript polyfill as it manages unsupported browser features internally and in isolation.
+Material-UIは主要なブラウザとプラットフォームの最新の安定版リリースをサポートしています。 Internet Explorer 11もサポートしています。 JavaScriptポリフィルは、サポートされていないブラウザー機能を内部で個別に管理するため、提供する必要はありません。
| IE | Edge | Firefox | Chrome | Safari | Googlebot |
|:-- |:----- |:------- |:------ |:------ |:--------- |
| 11 | >= 14 | >= 52 | >= 49 | >= 10 | ✅ |
-Googlebotはページコンテンツのインデックス作成にweb rendering service (WRS) を使用するので、Material-UIがそれをサポートすることは重要です。 [WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html). 特に支障なくレンダリングできるMaterial-UIのコンポーネントを期待できます。
+Googlebotはページコンテンツのインデックス作成にweb rendering service (WRS) を使用するので、Material-UIがそれをサポートすることは重要です。 [WRSは、使用するレンダリングエンジンを定期的に更新します](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html)。 特に支障なくレンダリングできるMaterial-UIのコンポーネントを期待できます。
## サーバ
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). [LTS](https://github.com/nodejs/Release#lts-schedule1)のサポートも同様に試みています。 Right now, it supports **node v8.x** and newer versions.
+Material-UIはサーバ側レンダリングをサポートしているため、[Nodeの最新の安定したリリースをサポートする必要があります。js](https://github.com/nodejs/node)。 Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. 現時点では、**ノードv8.x**以降のバージョンをサポートしています。
### CSSプレフィックス
@@ -25,4 +25,4 @@ Because Material-UI supports server-side rendering, it needs to support the late
## React
-Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at our older [versions](/versions/) for backward compatibility.
\ No newline at end of file
+Material-UIは、^16.8. 0(フックのついた方) 以降のReactの最新バージョンをサポートします。 Have a look at the older [versions](/versions/) for backward compatibility.
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-pt.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-pt.md
index ab727063737441..91c6eb97232bb2 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-pt.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-pt.md
@@ -15,7 +15,7 @@ Como o Googlebot usa um serviço de renderização da Web (WRS) para indexar o c
## Servidor
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Também tentamos suportar as versões do [ LTS que estão em manutenção ](https://github.com/nodejs/Release#lts-schedule1). Right now, it supports **node v8.x** and newer versions.
+Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. Right now, it supports **node v8.x** and newer versions.
### Prefixos CSS
@@ -25,4 +25,4 @@ O CSS exibido nesta documentação é processado com [`autoprefixer`](https://ww
## React
-Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at our older [versions](/versions/) for backward compatibility.
\ No newline at end of file
+Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at the older [versions](/versions/) for backward compatibility.
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-ru.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-ru.md
index 785047c215dd95..b2d02121c7c946 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-ru.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-ru.md
@@ -15,7 +15,7 @@ Because Googlebot uses a web rendering service (WRS) to index the page content,
## Server
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Мы также стараемся поддерживать [LTS версии, которые находятся на обслуживании](https://github.com/nodejs/Release#lts-schedule1). Right now, it supports **node v8.x** and newer versions.
+Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. Right now, it supports **node v8.x** and newer versions.
### CSS prefixing
@@ -25,4 +25,4 @@ The CSS served on this documentation is processed with [`autoprefixer`](https://
## React
-Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at our older [versions](/versions/) for backward compatibility.
\ No newline at end of file
+Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at the older [versions](/versions/) for backward compatibility.
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/supported-platforms/supported-platforms-zh.md b/docs/src/pages/getting-started/supported-platforms/supported-platforms-zh.md
index 995287dcb7f9c3..5fd398f839f1f4 100644
--- a/docs/src/pages/getting-started/supported-platforms/supported-platforms-zh.md
+++ b/docs/src/pages/getting-started/supported-platforms/supported-platforms-zh.md
@@ -15,7 +15,7 @@ Material-UI支持所有主流浏览器和平台的最新稳定版本。 It also
## 服务器
-Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). 我们还会尝试支持[维护中的LTS版本](https://github.com/nodejs/Release#lts-schedule1) 。 Right now, it supports **node v8.x** and newer versions.
+Because Material-UI supports server-side rendering, it needs to support the latest, stable releases of [Node.js](https://github.com/nodejs/node). Where possible, the [LTS versions that are in maintenance](https://github.com/nodejs/Release#lts-schedule1) are supported. Right now, it supports **node v8.x** and newer versions.
### CSS前缀
@@ -25,4 +25,4 @@ Because Material-UI supports server-side rendering, it needs to support the late
## React
-Material-UI supports the most recent versions of React, starting with ^16.8.0 (the one with the hooks). Have a look at our older [versions](/versions/) for backward compatibility.
\ No newline at end of file
+Material-UI支持最新版本的React，从16.8.0开始(带有hook的版本)。 Have a look at the older [versions](/versions/) for backward compatibility.
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/templates/templates-aa.md b/docs/src/pages/getting-started/templates/templates-aa.md
index 94ba188d6d7d2d..3b946f431dcf31 100644
--- a/docs/src/pages/getting-started/templates/templates-aa.md
+++ b/docs/src/pages/getting-started/templates/templates-aa.md
@@ -4,7 +4,7 @@ title: crwdns95098:0crwdne95098:0
# crwdns95100:0crwdne95100:0
-<p class="description">crwdns95102:0crwdne95102:0</p>
+<p class="description">crwdns101248:0crwdne101248:0</p>
crwdns95104:0crwdne95104:0
@@ -18,6 +18,6 @@ crwdns95114:0crwdne95114:0
## crwdns95116:0crwdne95116:0
-crwdns95118:0crwdne95118:0 crwdns95120:0crwdne95120:0
+crwdns95118:0crwdne95118:0 crwdns101250:0crwdne101250:0
<a href="crwdns95122:0crwdne95122:0" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="crwdns95124:0crwdne95124:0" alt="crwdns95126:0crwdne95126:0" /></a>
diff --git a/docs/src/pages/getting-started/templates/templates-de.md b/docs/src/pages/getting-started/templates/templates-de.md
index 400a408db66e9c..89fe79465a9f38 100644
--- a/docs/src/pages/getting-started/templates/templates-de.md
+++ b/docs/src/pages/getting-started/templates/templates-de.md
@@ -4,7 +4,7 @@ title: Free React Templates
# React Templates
-<p class="description">A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.</p>
+<p class="description">A selection of basic react templates to help you get started building your app. The collection contains react dashboard, admin, and more.</p>
The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
@@ -18,6 +18,6 @@ So far we have demos for dashboard, sign in page, sign up page, blog page, check
## Premium-Themes
-Looking for something more? You can find complete templates & themes in our <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
+Looking for something more? You can find complete templates & themes in the <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
<a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="/static/images/themes-light.jpg" alt="react templates" /></a>
diff --git a/docs/src/pages/getting-started/templates/templates-es.md b/docs/src/pages/getting-started/templates/templates-es.md
index 8c4aaaf60c4aa6..04d9198ee824e2 100644
--- a/docs/src/pages/getting-started/templates/templates-es.md
+++ b/docs/src/pages/getting-started/templates/templates-es.md
@@ -4,7 +4,7 @@ title: Plantias React gratuitas
# Plantillas React
-<p class="description">Una selección de plantillas de reacción básicas para ayudarlo a comenzar a crear su aplicación. Nuestra colección contiene panel de control en React, administración y más.</p>
+<p class="description">A selection of basic react templates to help you get started building your app. The collection contains react dashboard, admin, and more.</p>
Las plantillas pueden combinarse con una de las [aplicaciones de ejemplo](https://github.com/mui-org/material-ui/tree/master/examples) para formar un proyecto de inicio completo.
@@ -18,6 +18,6 @@ Hasta ahora tenemos demostraciones para el panel de control, página de inicio d
## Temas Premium
-¿Buscas más? Puedes encontrar plantillas y temas completos en nuestra <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">sección de temas premium</a>.
+¿Buscas más? You can find complete templates & themes in the <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
<a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="/static/images/themes-light.jpg" alt="plantillas React" /></a>
diff --git a/docs/src/pages/getting-started/templates/templates-fr.md b/docs/src/pages/getting-started/templates/templates-fr.md
index 44fbd50570f8bf..1d77a92b29be67 100644
--- a/docs/src/pages/getting-started/templates/templates-fr.md
+++ b/docs/src/pages/getting-started/templates/templates-fr.md
@@ -4,7 +4,7 @@ title: Free React Templates
# React Templates
-<p class="description">A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.</p>
+<p class="description">A selection of basic react templates to help you get started building your app. The collection contains react dashboard, admin, and more.</p>
The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
@@ -18,6 +18,6 @@ So far we have demos for dashboard, sign in page, sign up page, blog page, check
## Thèmes premium
-Looking for something more? You can find complete templates & themes in our <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
+Looking for something more? You can find complete templates & themes in the <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
<a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="/static/images/themes-light.jpg" alt="react templates" /></a>
diff --git a/docs/src/pages/getting-started/templates/templates-ja.md b/docs/src/pages/getting-started/templates/templates-ja.md
index 477fea37215498..3042f87ef25c6d 100644
--- a/docs/src/pages/getting-started/templates/templates-ja.md
+++ b/docs/src/pages/getting-started/templates/templates-ja.md
@@ -2,22 +2,22 @@
title: Free React Templates
---
-# React Templates
+# Reactテンプレート
-<p class="description">A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.</p>
+<p class="description">A selection of basic react templates to help you get started building your app. The collection contains react dashboard, admin, and more.</p>
-The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
+テンプレートを [サンプルアプリケーション](https://github.com/mui-org/material-ui/tree/master/examples) いずれかと組み合わせて、完全なスターターを形成できます。
-Sections of each layout are clearly defined either by comments or use of separate files, making it simple to extract parts of a page (such as a "hero unit", or footer, for example) for reuse in other pages. For multi-part examples, a table in the README at the linked source code location describes the purpose of each file.
+各レイアウトのセクションは、コメントまたは個別のファイルの使用によって明確に定義されます。 ページの一部を簡単に抽出できるようになりました(たとえば、「ヒーローユニット」やフッタなど)。 他のページで再利用できます。 マルチパートの例については、リンクされたソースコードの場所にあるREADMEの表に各ファイルの目的が説明されています。
{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
-If while using these examples you make changes or enhancements that could improve the developer experience, or you would like to contribute an additional example, please consider creating a [pull request on GitHub](https://github.com/mui-org/material-ui/pulls).
+これらのサンプルを使用している間に、開発者のエクスペリエンスを改善する可能性のある変更や拡張を行ったり、追加のサンプルを提供したい場合は、GitHub</a>で<a href=「https://github.com/mui-org/material-ui/pulls」>プルリクエストを作成することを検討してください。
-So far we have demos for dashboard, sign in page, sign up page, blog page, checkout flow, album page, pricing page, and sticky footer page.
+今のところ、ダッシュボード、サインインページ、サインアップページ、ブログページ、チェックアウトフロー、アルバムページ、価格ページ、スティッキーフッターページのデモがあります。
## プレミアムテーマ
-Looking for something more? You can find complete templates & themes in our <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
+さらに何かをお探しですか？ You can find complete templates & themes in the <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
<a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="/static/images/themes-light.jpg" alt="react templates" /></a>
diff --git a/docs/src/pages/getting-started/templates/templates-pt.md b/docs/src/pages/getting-started/templates/templates-pt.md
index d420e753bdc632..46f1a650fef2d2 100644
--- a/docs/src/pages/getting-started/templates/templates-pt.md
+++ b/docs/src/pages/getting-started/templates/templates-pt.md
@@ -4,7 +4,7 @@ title: Modelos de React grátis
# Modelos React
-<p class="description">A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.</p>
+<p class="description">A selection of basic react templates to help you get started building your app. The collection contains react dashboard, admin, and more.</p>
The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
@@ -18,6 +18,6 @@ So far we have demos for dashboard, sign in page, sign up page, blog page, check
## Temas Premium
-Looking for something more? You can find complete templates & themes in our <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
+Looking for something more? You can find complete templates & themes in the <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
<a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="/static/images/themes-light.jpg" alt="react templates" /></a>
diff --git a/docs/src/pages/getting-started/templates/templates-ru.md b/docs/src/pages/getting-started/templates/templates-ru.md
index e66b7f7df7703e..b565896beb5c9a 100644
--- a/docs/src/pages/getting-started/templates/templates-ru.md
+++ b/docs/src/pages/getting-started/templates/templates-ru.md
@@ -4,7 +4,7 @@ title: Free React Templates
# React Templates
-<p class="description">A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.</p>
+<p class="description">A selection of basic react templates to help you get started building your app. The collection contains react dashboard, admin, and more.</p>
The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
@@ -18,6 +18,6 @@ So far we have demos for dashboard, sign in page, sign up page, blog page, check
## Премиум темы
-Looking for something more? You can find complete templates & themes in our <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
+Looking for something more? You can find complete templates & themes in the <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
<a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="/static/images/themes-light.jpg" alt="react templates" /></a>
diff --git a/docs/src/pages/getting-started/templates/templates-zh.md b/docs/src/pages/getting-started/templates/templates-zh.md
index 8c00074fe2d749..961581f8fcf809 100644
--- a/docs/src/pages/getting-started/templates/templates-zh.md
+++ b/docs/src/pages/getting-started/templates/templates-zh.md
@@ -4,7 +4,7 @@ title: Free React Templates
# React Templates
-<p class="description">A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.</p>
+<p class="description">A selection of basic react templates to help you get started building your app. The collection contains react dashboard, admin, and more.</p>
The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
@@ -18,6 +18,6 @@ So far we have demos for dashboard, sign in page, sign up page, blog page, check
## 高级版主题
-Looking for something more? You can find complete templates & themes in our <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
+Looking for something more? You can find complete templates & themes in the <a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-link">premium themes section</a>.
<a href="https://themes.material-ui.com/" data-ga-event-category="premium-themes" data-ga-event-action="click" data-ga-event-label="templates-image"><img src="/static/images/themes-light.jpg" alt="react templates" /></a>
diff --git a/docs/src/pages/getting-started/usage/usage-ja.md b/docs/src/pages/getting-started/usage/usage-ja.md
index 049272c8887fc4..cfb63447dc94fb 100644
--- a/docs/src/pages/getting-started/usage/usage-ja.md
+++ b/docs/src/pages/getting-started/usage/usage-ja.md
@@ -8,7 +8,7 @@ Material-UIコンポーネントは独立して機能します。 **They are sel
## 今すぐ始める
-これがすぐ始める為の簡単な例です、**文字通り必要とする全てです**:
+以下に簡単な例を示します。**文字通り必要なものすべてです**:
```jsx
import React from 'react';
@@ -30,7 +30,7 @@ ReactDOM.render(<App />, document.querySelector('#app'));
{{"demo": "pages/getting-started/usage/Usage.js", "hideHeader": true}}
-## グローバル
+## Globals
知っておく必要のあるいくつかの重要なことで、Material-UIの使い易さは改善されます。
@@ -47,7 +47,7 @@ Material-UIは最初にモバイルで開発されました。最初にモバイ
### CssBaseline
-Material-UIはオプションで[CssBaseline](/components/css-baseline/)コンポーネントを提供しています。 It fixes some inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
+Material-UIはオプションで[CssBaseline](/components/css-baseline/)コンポーネントを提供しています。 これは、ブラウザやデバイス間の不整合を修正すると同時に、一般的なHTML要素に対して少しだけ独自のリセットを提供します。
## バージョン管理されたドキュメント
@@ -58,5 +58,5 @@ Material-UIはオプションで[CssBaseline](/components/css-baseline/)コン
これで基本的なセットアップがわかったので、次の項目について詳しく学びましょう。
- [Material Designフォントとタイポグラフィ](/components/typography/)を導入する方法
-- How to take advantage of the [theming solution](/customization/theming/).
+- [テーマソリューションを活用する方法](/customization/theming/) 。
- コンポーネントの見た目を[上書き](/customization/components/)する方法
\ No newline at end of file
diff --git a/docs/src/pages/guides/api/api-ja.md b/docs/src/pages/guides/api/api-ja.md
index 982128e3657b50..7fd14a5466f7a6 100644
--- a/docs/src/pages/guides/api/api-ja.md
+++ b/docs/src/pages/guides/api/api-ja.md
@@ -1,52 +1,52 @@
-# API Design Approach
+# APIの設計アプローチ
-<p class="description">Nós aprendemos bastante como o Material-UI é usado e o refatoramento da v1 permitiu-nos repensar completamente o componente de API.</p>
+<p class="description">Material-UIの使用方法については多くのことを学び、v1のリライトによってコンポーネントAPIを完全に再考することができました。</p>
-> API design is hard because you can make it seem simple but it's actually deceptively complex, or make it actually simple but seem complex.
+> API設計が難しいのは、単純に見えるようにしても実際にはかなり複雑に見えるようにしたり、単純だが複雑に見えるようにしたりできるからです。
[@sebmarkbage](https://twitter.com/sebmarkbage/status/728433349337841665)
-As Sebastian Markbage [pointed out](https://2014.jsconf.eu/speakers/sebastian-markbage-minimal-api-surface-area-learning-patterns-instead-of-frameworks.html), no abstraction is superior to wrong abstractions. We are providing low-level components to maximize composition capabilities.
+Api設計が難しいのは、単純に見えるようにしても実際にはかなり複雑に見えるようにしたり、単純だが複雑に見えるようにしたりできるからです。 組版機能を最大限に活用するため、低レベルのコンポーネントを提供しています。
-## Composition
+## コンポジション
-You may have noticed some inconsistency in the API regarding composing components. To provide some transparency, we have been using the following rules when designing the API:
+コンポーネントの構成に関してAPIに矛盾があることに気付いたかもしれません。 透過性を提供するために、APIを設計する際に次のルールを使用しています。
-1. Using the `children` property is the idiomatic way to do composition with React.
-2. Sometimes we only need limited child composition, for instance when we don't need to allow child order permutations. In this case, providing explicit properties makes the implementation simpler and more performant; for example, the `Tab` takes an `icon` and a `label` property.
-3. API consistency matters.
+1. `children` プロパティの利用は、Reactで構成を行う慣用的な方法です。
+2. 場合によっては、子どもの順序の入れ替えを許可する必要がない場合など、子どもの構成が限定されることもあります。 この場合、明示的なプロパティーを指定すると、実装がより単純になり、よりパフォーマンスが向上します。; たとえば、`Tab`は`アイコン`および`ラベル`プロパティを例に取ります。
+3. APIの一貫性が重要です。
-## Rules
+## ルール
-Aside from the above composition trade-off, we enforce the following rules:
+上記の構成のトレードオフとは別に、次のルールを実施します。
-### Spread
+### スプレッド
-Undocumented properties supplied are spread to the root element; for instance, the `className` property is applied to the root.
+提供されたドキュメント化されていないプロパティはルート要素に広がります; たとえば、`className`プロパティはルートに適用されます。
-Now, let's say you want to disable the ripples on the `MenuItem`. You can take advantage of the spread behavior:
+ここで、`MenuItem`のリプルを無効にするとします。 スプレッド動作を利用できます。
```jsx
<MenuItem disableRipple />
```
-The `disableRipple` property will flow this way: [`MenuItem`](/api/menu-item/) > [`ListItem`](/api/list-item/) > [`ButtonBase`](/api/button-base/).
+` disableRipple` プロパティは次のように流れます：[` MenuItem `](/api/menu-item/) > [` ListItem `](/api/list-item/) > [` ButtonBase `](/api/button-base/) 。
-### Native properties
+### ネイティブプロパティ
-We avoid documenting native properties supported by the DOM like [`className`](/customization/components/#overriding-styles-with-class-names).
+提供されたドキュメント化されていないプロパティはルート要素に広がります; たとえば、[`className`](/customization/components/#overriding-styles-with-class-names)プロパティはルートに適用されます。
-### CSS Classes
+### CSS クラス
-All the components accept a [`classes`](/customization/components/#overriding-styles-with-classes) property to customize the styles. The classes design answers two constraints: to make the classes structure as simple as possible, while sufficient to implement the Material Design specification.
+すべてのコンポーネントで、[`クラス`](/customization/components/#overriding-styles-with-classes)プロパティを使用してスタイルをカスタマイズできます。 クラス設計は、次の2つの制約に答えます: Material Design仕様を実装するのに十分なだけで、可能な限りクラス構造を単純にします。
-- The class applied to the root element is always called `root`.
-- All the default styles are grouped in a single class.
-- The classes applied to non-root elements are prefixed with the name of the element, e.g. `paperWidthXs` in the Dialog component.
-- The variants applied by a boolean property **aren't** prefixed, e.g. the `rounded` class applied by the `rounded` property.
-- The variants applied by an enum property **are** prefixed, e.g. the `colorPrimary` class applied by the `color="primary"` property.
-- A variant has **one level of specificity**. The `color` and `variant` properties are considered a variant. The lower the style specificity is, the simpler it is to override.
-- We increase the specificity for a variant modifier. We already **have to do it** for the pseudo-classes (`:hover`, `:focus`, etc.). It allows much more control at the cost of more boilerplate. Hopefully, it's also more intuitive.
+- ルート要素に適用されるクラスは、常に`root`と呼ばれます。
+- 既定のスタイルはすべて1つのクラスにグループ化されます。
+- 非ルート要素に適用されるクラスには、要素の名前の接頭辞が付きます（例：ダイアログコンポーネントの` paperWidthXs`） 。
+- boolean型のプロパティ**で適用される変数に接頭辞は付きません**。例えば、`rounded`プロパティで適用される`rounded`クラスのようになります。
+- Enumプロパティ**によって適用されるバリアントはprifixされます**、(例：`color="primary"`プロパティによって適用される`colorPrimary`クラス)。
+- バリアントには** 1レベルの特異性があります** 。 `color`および`variant`プロパティは、variantと見なされます。 スタイルの特殊性が低いほど、オーバーライドが簡単になります。
+- バリアント修飾子の特異性を高めます。 私たちは既に疑似クラス(`:hover`, `:focus`など。)のためにそれをしなければなりません</strong>。 より多くの定型的なコストで、より多くの制御を可能にします。 もっと直感的になればいいのですが。
```js
const styles = {
@@ -60,31 +60,31 @@ const styles = {
};
```
-### Nested components
+### ネストされたコンポーネント
-Nested components inside a component have:
+コンポーネント内のネストされたコンポーネントには、次のものがあります。
-- their own flattened properties when these are key to the top level component abstraction, for instance and `id` property for the `Input` component.
-- their own `xxxProps` property when users might need to tweak the internal render method's sub-components, for instance, exposing the `inputProps` and `InputProps` properties on components that use `Input` internally.
-- their own `xxxComponent` property for performing component injection.
-- their own `xxxRef` property when user might need to perform imperative actions, for instance, exposing a `inputRef` property to access the native `input` on the `Input` component. This helps answer the question ["How can I access the DOM element?"](/getting-started/faq/#how-can-i-access-the-dom-element)
+- 最上位レベルのコンポーネント抽象化の鍵となる独自のフラット化されたプロパティー たとえば、`Input`コンポーネントの場合は`id`プロパティです。
+- ユーザが内部レンダリングメソッドのサブコンポーネントを微調整する必要がある場合は、独自の`xxxProps`プロパティを使用します。 たとえば、`Input`を内部的に使用するコンポーネントの`inputProps`プロパティと`InputProps`プロパティを公開します。
+- 独自の` xxxComponent `コンポーネントインジェクションを実行するためのプロパティ。
+- ユーザーが命令型アクションを実行する必要がある場合は、独自の`xxxRef`プロパティ たとえば、`inputRef`プロパティを公開して、`Input`コンポーネントのネイティブ`入力`にアクセスします。 これは、[「DOM要素にアクセスするにはどうすればいいですか。」](/getting-started/faq/#how-can-i-access-the-dom-element)という質問に答えるのに役立ちます。
-### Property naming
+### プロパティの命名
-The name of a boolean property should be chosen based on the **default value**. For example, the `disabled` attribute on an input element, if supplied, defaults to `true`. This choice allows the shorthand notation:
+ブーリアン型のプロパティの名前は、**のデフォルト値**に基づいて選択する必要があります。 たとえば、入力エレメントの`disabled`属性を指定すると、デフォルトで`true`になります。 このオプションを選択すると、次のような省略表記が可能になります。
```diff
-<Input enabled={false} />
+<Input disabled />
```
-### Controlled components
+### 制御されたコンポーネント
-Most of the controlled component are controlled via the `value` and the `onChange` properties, however, the `open` / `onClose` / `onOpen` combination is used for display related state.
+ほとんどの制御対象コンポーネントは、`値`および`onChange`プロパティによって制御されます。 ただし、ディスプレイ関連の状態には、`open`/`onClose`/`onOpen`の組み合わせが使用されます。
### boolean vs enum
-There are two options to design the API for the variations of a component: with a *boolean*; or with an *enum*. For example, let's take a button that has different types. Each option has its pros and cons:
+コンポーネントのバリエーションのためのAPIを設計するには、次の二つのオプションがあります。*boolean*; または*enum*を使用します。 たとえば、異なるタイプのボタンを選択します。 各オプションには長所と短所があります。
- Option 1 *boolean*:
@@ -95,7 +95,7 @@ There are two options to design the API for the variations of a component: with
};
```
- This API enabled the shorthand notation: `<Button>`, `<Button contained />`, `<Button fab />`.
+ このAPIは、簡略表記法を有効にしました： `<Button>`、` <2 /> ` 、` <3 /> ` 。
- Option 2 *enum*:
@@ -105,25 +105,25 @@ There are two options to design the API for the variations of a component: with
}
```
- This API is more verbose: `<Button>`, `<Button variant="contained">`, `<Button variant="fab">`.
+ このAPIはより冗長です： `<Button>`、`<Button variant="contained">`、`<Button variant="fab">`。
- However it prevents an invalid combination from being used, bounds the number of properties exposed, and can easily support new values in the future.
+ ただし、無効な組み合わせの使用を防ぎ、 は公開されるプロパティの数を制限し、 は将来新しい値を簡単にサポートできます。
-The Material-UI components use a combination of the two approaches according to the following rules:
+Material-UIコンポーネントは、次の規則に従って2つのアプローチの組み合わせを使用します。
-- A *boolean* is used when **2** degrees of freedom are required.
-- An *enum* is used when **> 2** degrees of freedom are required, or if there is the possibility that additional degrees of freedom may be required in the future.
+- *ブーリアン*は、 **2**つの自由度が必要な場合に使用します。
+- *enum*は、**2以上** の自由度が必要な場合、または将来さらに自由度が必要になる可能性がある場合に使用します。
-Going back to the previous button example; since it requires 3 degrees of freedom, we use an *enum*.
+前のボタンの例に戻ります。 3自由度が必要なので、* enumを使用します* 。
### Ref
-The `ref` is forwarded to the root element. This means that, without changing the rendered root element via the `component` prop, it is forwarded to the outermost DOM element that which component renders. If you pass a different component via the `component` prop the ref will be attached to that component instead.
+` ref `はルート要素に転送されます。 つまり、レンダリングされたルート要素を変更せずに、 `component`<0>コンポーネント</0>プロパティを介して、コンポーネントがレンダリングする最も外側のDOM要素に転送されます。 `コンポーネント`プロパティを介して別のコンポーネントを渡すと、代わりに参照がそのコンポーネントにアタッチされます。
-## Glossary
+## 用語集
-- **host component**: a DOM node type in the context of `react-dom`, e.g. a `'div'`. See also [React Implementation Notes](https://reactjs.org/docs/implementation-notes.html#mounting-host-elements).
-- **host element**: a DOM node in the context of `react-dom`, e.g. an instance of `window.HTMLDivElement`.
-- **outermost**: The first component when reading the component tree from top to bottom i.e. breadth-first search.
-- **root component**: the outermost component that renders a host component.
-- **root element**: the outermost element that renders a host component.
\ No newline at end of file
+- **host component**:`react-dom`のコンテキストにおけるDOMノードタイプ、例えば`'div'`。 [ React Implementation Notesも参照してください](https://reactjs.org/docs/implementation-notes.html#mounting-host-elements) 。
+- **host element** ：` react-domのコンテキストのDOMノード`たとえば、` window.HTMLDivElementのインスタンス` 。
+- **outermost**:コンポーネントツリーを上から下に読み込むときの最初のコンポーネントです。つまり、幅優先の検索です。
+- **root component** ：ホストコンポーネントをレンダリングする最も外側のコンポーネント。
+- **root element**：ホストコンポーネントをレンダリングする最も外側の要素。
\ No newline at end of file
diff --git a/docs/src/pages/guides/composition/composition-aa.md b/docs/src/pages/guides/composition/composition-aa.md
index 9c48899d93b02f..04f1232a9b4229 100644
--- a/docs/src/pages/guides/composition/composition-aa.md
+++ b/docs/src/pages/guides/composition/composition-aa.md
@@ -4,7 +4,7 @@
## crwdns95350:0crwdne95350:0
-crwdns95352:0crwdne95352:0 crwdns95354:0crwdne95354:0
+crwdns95352:0crwdne95352:0 crwdns101252:0crwdne101252:0
crwdns95356:0crwdne95356:0 crwdns95358:0crwdne95358:0
@@ -48,7 +48,7 @@ crwdns95398:0{ Link }crwdnd95398:0{to}crwdnd95398:0{...props}crwdnd95398:0{icon}
crwdns95400:0crwdne95400:0 crwdns95402:0crwdne95402:0
-crwdns95404:0crwdne95404:0 crwdns95406:0crwdne95406:0
+crwdns95404:0crwdne95404:0 crwdns101254:0crwdne101254:0
```jsx
crwdns95408:0{ Link as RouterLink }crwdnd95408:0{ icon, primary, to }crwdnd95408:0{to}crwdnd95408:0{...itemProps}crwdnd95408:0{ref}crwdnd95408:0[to]crwdnd95408:0{renderLink}crwdnd95408:0{icon}crwdnd95408:0{primary}crwdne95408:0
@@ -95,11 +95,11 @@ crwdns95464:0crwdne95464:0
crwdns95472:0crwdne95472:0
-crwdns95474:0crwdne95474:0
+crwdns101256:0crwdne101256:0
> crwdns95476:0crwdne95476:0 crwdns95478:0crwdne95478:0
-crwdns95480:0crwdne95480:0 crwdns95482:0crwdne95482:0
+crwdns101258:0crwdne101258:0 crwdns95482:0crwdne95482:0
```diff
crwdns95484:0{...props}crwdnd95484:0{...props}crwdnd95484:0{ref}crwdnd95484:0{MyButton}crwdne95484:0
@@ -113,7 +113,7 @@ crwdns95488:0crwdne95488:0 crwdns95490:0crwdne95490:0
### crwdns100450:0crwdne100450:0
-crwdns100452:0crwdne100452:0 crwdns100454:0crwdne100454:0 crwdns100456:0crwdne100456:0 crwdns100458:0crwdne100458:0
+crwdns100452:0crwdne100452:0 crwdns101260:0crwdne101260:0 crwdns100456:0crwdne100456:0 crwdns100458:0crwdne100458:0
```diff
crwdns95502:0{ props }crwdnd95502:0{ forwardedRef, ...props }crwdnd95502:0{...props}crwdnd95502:0{forwardedRef}crwdnd95502:0{...props}crwdnd95502:0{ref}crwdne95502:0
diff --git a/docs/src/pages/guides/composition/composition-de.md b/docs/src/pages/guides/composition/composition-de.md
index cb21954ded746f..5b3431272ed9e6 100644
--- a/docs/src/pages/guides/composition/composition-de.md
+++ b/docs/src/pages/guides/composition/composition-de.md
@@ -4,7 +4,7 @@
## Komponenten verpacken
-Um maximale Flexibilität und Leistung zu gewährleisten, benötigen wir einen Weg, um die Art der untergeordneten Elemente einer Komponente zu kennen. Zur Lösung dieses Problems haben wir einige unserer Komponenten, wenn nötig, mit der statische Eigenschaft ` muiName ` markiert.
+Um maximale Flexibilität und Leistung zu gewährleisten, benötigen wir einen Weg, um die Art der untergeordneten Elemente einer Komponente zu kennen. To solve this problem we tag some of the components with a `muiName` static property when needed.
You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution. If you wrap a component, verify if that component has this static property set.
@@ -65,7 +65,7 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
⚠️ Da wir jedoch eine Inline-Funktion verwenden, um die gerenderte Komponente zu ändern, wird die Verknüpfung von React bei jedem Rendern des `ListItemLink ` aufgehoben. React aktualisiert nicht nur das DOM unnötig, sondern die Wellenvisualisierung des `ListItem` funktioniert auch nicht richtig.
-Die Lösung ist einfach: ** vermeiden von Inline-Funktionen und stattdessen übergeben eine statische Komponente an die `component` Eigenschaft. Lassen Sie uns unser `ListItemLink` zu dem Folgendem ändern:</p>
+Die Lösung ist einfach: ** vermeiden von Inline-Funktionen und stattdessen übergeben eine statische Komponente an die `component` Eigenschaft. Let's change the `ListItemLink` to the following:</p>
```jsx
import { Link as RouterLink } from 'react-router-dom';
@@ -136,11 +136,11 @@ If you don't use one of the above types when using your components in conjunctio
Be aware that you will still get this warning for `lazy` and `memo` components if their wrapped component can't hold a ref.
-In some instances we issue an additional warning to help debugging, similar to:
+In some instances an additional warning is issued to help with debugging, similar to:
> Ungültige `component` Eigenschaft an `ComponentName` übergeben. Es wurde ein Elementtyp erwartet, der eine Referenz enthalten kann.
-We will only cover the two most common use cases. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
+Only the two most common use cases are covered. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
```diff
- const MyButton = props => <div role="button" {...props} />;
@@ -158,7 +158,7 @@ Um herauszufinden, ob die Material-UI - Komponente, die Sie verwenden, diese Anf
### Caveat with StrictMode
-If you use class components for the cases described above you will still see warnings in `React.StrictMode`. We use `ReactDOM.findDOMNode` internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
+If you use class components for the cases described above you will still see warnings in `React.StrictMode`. `ReactDOM.findDOMNode` is used internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
```diff
class Component extends React.Component {
diff --git a/docs/src/pages/guides/composition/composition-es.md b/docs/src/pages/guides/composition/composition-es.md
index 8fd9575e14ef27..3c4d1c80392878 100644
--- a/docs/src/pages/guides/composition/composition-es.md
+++ b/docs/src/pages/guides/composition/composition-es.md
@@ -4,7 +4,7 @@
## Wrapping components
-In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of our components when needed with a `muiName` static property.
+In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of the components with a `muiName` static property when needed.
You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution. If you wrap a component, verify if that component has this static property set.
@@ -65,7 +65,7 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
⚠️ However, since we are using an inline function to change the rendered component, React will unmount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily, the ripple effect of the `ListItem` will also not work correctly.
-The solution is simple: **avoid inline functions and pass a static component to the `component` property** instead. Let's change our `ListItemLink` to the following:
+The solution is simple: **avoid inline functions and pass a static component to the `component` property** instead. Let's change the `ListItemLink` to the following:
```jsx
import { Link as RouterLink } from 'react-router-dom';
@@ -136,11 +136,11 @@ If you don't use one of the above types when using your components in conjunctio
Be aware that you will still get this warning for `lazy` and `memo` components if their wrapped component can't hold a ref.
-In some instances we issue an additional warning to help debugging, similar to:
+In some instances an additional warning is issued to help with debugging, similar to:
> Invalid prop `component` supplied to `ComponentName`. Expected an element type that can hold a ref.
-We will only cover the two most common use cases. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
+Only the two most common use cases are covered. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
```diff
- const MyButton = props => <div role="button" {...props} />;
@@ -158,7 +158,7 @@ To find out if the Material-UI component you're using has this requirement, chec
### Caveat with StrictMode
-If you use class components for the cases described above you will still see warnings in `React.StrictMode`. We use `ReactDOM.findDOMNode` internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
+If you use class components for the cases described above you will still see warnings in `React.StrictMode`. `ReactDOM.findDOMNode` is used internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
```diff
class Component extends React.Component {
diff --git a/docs/src/pages/guides/composition/composition-fr.md b/docs/src/pages/guides/composition/composition-fr.md
index ce078172b1bf87..9917a084fa12ad 100644
--- a/docs/src/pages/guides/composition/composition-fr.md
+++ b/docs/src/pages/guides/composition/composition-fr.md
@@ -4,7 +4,7 @@
## Wrapping components
-In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of our components when needed with a `muiName` static property.
+In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of the components with a `muiName` static property when needed.
You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution. If you wrap a component, verify if that component has this static property set.
@@ -65,7 +65,7 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
⚠️ However, since we are using an inline function to change the rendered component, React will unmount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily, the ripple effect of the `ListItem` will also not work correctly.
-The solution is simple: **avoid inline functions and pass a static component to the `component` property** instead. Let's change our `ListItemLink` to the following:
+The solution is simple: **avoid inline functions and pass a static component to the `component` property** instead. Let's change the `ListItemLink` to the following:
```jsx
import { Link as RouterLink } from 'react-router-dom';
@@ -136,11 +136,11 @@ If you don't use one of the above types when using your components in conjunctio
Be aware that you will still get this warning for `lazy` and `memo` components if their wrapped component can't hold a ref.
-In some instances we issue an additional warning to help debugging, similar to:
+In some instances an additional warning is issued to help with debugging, similar to:
> Invalid prop `component` supplied to `ComponentName`. Expected an element type that can hold a ref.
-We will only cover the two most common use cases. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
+Only the two most common use cases are covered. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
```diff
- const MyButton = props => <div role="button" {...props} />;
@@ -158,7 +158,7 @@ To find out if the Material-UI component you're using has this requirement, chec
### Caveat with StrictMode
-If you use class components for the cases described above you will still see warnings in `React.StrictMode`. We use `ReactDOM.findDOMNode` internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
+If you use class components for the cases described above you will still see warnings in `React.StrictMode`. `ReactDOM.findDOMNode` is used internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
```diff
class Component extends React.Component {
diff --git a/docs/src/pages/guides/composition/composition-ja.md b/docs/src/pages/guides/composition/composition-ja.md
index 8ddbb20865bc16..cf9a7de708632e 100644
--- a/docs/src/pages/guides/composition/composition-ja.md
+++ b/docs/src/pages/guides/composition/composition-ja.md
@@ -1,16 +1,16 @@
# 従属関係
-<p class="description">Material-UI tries to make composition as easy as possible.</p>
+<p class="description">Material-UIは、構成をできるだけ簡単にしようとします。</p>
-## Wrapping components
+## ラッピングコンポーネント
-In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of our components when needed with a `muiName` static property.
+最大限の柔軟性とパフォーマンスを提供するために、 コンポーネントが受け取る子要素の性質を知る方法が必要です。 To solve this problem we tag some of the components with a `muiName` static property when needed.
-You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution. If you wrap a component, verify if that component has this static property set.
+ただし、拡張するためにコンポーネントをラップする必要がある場合があり、これは`muiName`ソリューションと競合する可能性があります。 コンポーネントをラップする場合は、そのコンポーネントにこの静的プロパティーが設定されているかどうかを確認します。
-If you encounter this issue, you need to use the same tag for your wrapping component that is used with the wrapped component. In addition, you should forward the properties, as the parent component may need to control the wrapped components props.
+コンポーネントをラップする場合は、そのコンポーネントにこの静的プロパティーが設定されているかどうかを確認します。 さらに、親コンポーネントがラップされたコンポーネントプロパティをコントロールする必要がある場合があるため、プロパティを転送する必要があります。
-Let's see an example:
+例を見てみましょう：
```jsx
const WrappedIcon = props => <Icon {...props} />;
@@ -19,11 +19,11 @@ WrappedIcon.muiName = Icon.muiName;
{{"demo": "pages/guides/composition/Composition.js"}}
-## Component property
+## コンポーネントのプロパティ
Material-UI allows you to change the root node that will be rendered via a property called `component`.
-### How does it work?
+### どのように機能しますか？
The component will render like this:
@@ -46,9 +46,9 @@ For example, by default a `List` component will render a `<ul>` element. This ca
This pattern is very powerful and allows for great flexibility, as well as a way to interoperate with other libraries, such as [`react-router`](#react-router-demo) or your favorite forms library. But it also **comes with a small caveat!**
-### Caveat with inlining
+### インラインのある警告
-Using an inline function as an argument for the `component` property may result in **unexpected unmounting**, since you pass a new component to the `component` property every time React renders. For instance, if you want to create a custom `ListItem` that acts as a link, you could do the following:
+Reactがレンダリングされるたびに`component`プロパティに新しいコンポーネントを渡すため、インライン関数を`component`プロパティの引数として使用すると、**が予期せずにアンマウントされる可能性があります**。 For instance, if you want to create a custom `ListItem` that acts as a link, you could do the following:
```jsx
import { Link } from 'react-router-dom';
@@ -65,7 +65,7 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
⚠️ However, since we are using an inline function to change the rendered component, React will unmount the link every time `ListItemLink` is rendered. Not only will React update the DOM unnecessarily, the ripple effect of the `ListItem` will also not work correctly.
-The solution is simple: **avoid inline functions and pass a static component to the `component` property** instead. Let's change our `ListItemLink` to the following:
+The solution is simple: **avoid inline functions and pass a static component to the `component` property** instead. Let's change the `ListItemLink` to the following:
```jsx
import { Link as RouterLink } from 'react-router-dom';
@@ -136,11 +136,11 @@ If you don't use one of the above types when using your components in conjunctio
Be aware that you will still get this warning for `lazy` and `memo` components if their wrapped component can't hold a ref.
-In some instances we issue an additional warning to help debugging, similar to:
+In some instances an additional warning is issued to help with debugging, similar to:
> Invalid prop `component` supplied to `ComponentName`. Expected an element type that can hold a ref.
-We will only cover the two most common use cases. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
+Only the two most common use cases are covered. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
```diff
- const MyButton = props => <div role="button" {...props} />;
@@ -158,7 +158,7 @@ To find out if the Material-UI component you're using has this requirement, chec
### Caveat with StrictMode
-If you use class components for the cases described above you will still see warnings in `React.StrictMode`. We use `ReactDOM.findDOMNode` internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
+If you use class components for the cases described above you will still see warnings in `React.StrictMode`. `ReactDOM.findDOMNode` is used internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
```diff
class Component extends React.Component {
diff --git a/docs/src/pages/guides/composition/composition-pt.md b/docs/src/pages/guides/composition/composition-pt.md
index ca8e5bbbdd8fca..1b60b11f693673 100644
--- a/docs/src/pages/guides/composition/composition-pt.md
+++ b/docs/src/pages/guides/composition/composition-pt.md
@@ -4,7 +4,7 @@
## Encapsulando componentes
-Para fornecer o máximo de flexibilidade e desempenho, precisamos de uma maneira de conhecer a natureza dos elementos filhos que um componente recebe. Para resolver este problema, marcamos alguns de nossos componentes, quando necessário com uma propriedade estática `muiName`.
+Para fornecer o máximo de flexibilidade e desempenho, precisamos de uma maneira de conhecer a natureza dos elementos filhos que um componente recebe. To solve this problem we tag some of the components with a `muiName` static property when needed.
Você pode, no entanto, precisar encapsular um componente para melhorá-lo, que pode entrar em conflito com a solução `muiName`. Se você encapsular um componente, verifique se este tem um conjunto de propriedades estáticas.
@@ -65,7 +65,7 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
⚠️ No entanto, como estamos usando uma função em linha para alterar o componente renderizado, o React desmontará o link toda vez que o `ListItemLink` é renderizado. Não só irá o React atualizar o DOM desnecessariamente, como o efeito cascata do `ListItem` também não funcionará corretamente.
-A solução é simples: **evite funções em linha e passe um componente estático para a propriedade `component`**. Vamos mudar nosso `ListItemLink` para o seguinte:
+A solução é simples: **evite funções em linha e passe um componente estático para a propriedade `component`**. Let's change the `ListItemLink` to the following:
```jsx
import { Link as RouterLink } from 'react-router-dom';
@@ -136,11 +136,11 @@ Se você não usar um dos tipos acima ao usar seus componentes em conjunto com o
Esteja ciente que você ainda receberá este aviso para componentes `lazy` ou `memo` se eles forem encapsulados por um componente que não contém ref.
-Em alguns casos, emitimos um aviso adicional para ajudar na depuração, semelhante a:
+In some instances an additional warning is issued to help with debugging, similar to:
> Invalid prop `component` supplied to `ComponentName`. Expected an element type that can hold a ref.
-Cobrimos apenas os dois casos de uso mais comuns. Para mais informações, consulte [esta seção na documentação oficial do React](https://reactjs.org/docs/forwarding-refs.html).
+Only the two most common use cases are covered. Para mais informações, consulte [esta seção na documentação oficial do React](https://reactjs.org/docs/forwarding-refs.html).
```diff
- const MyButton = props => <div role="button" {...props} />;
@@ -158,7 +158,7 @@ Para descobrir se o componente de Material-UI que você está usando tem esse re
### Caveat with StrictMode
-If you use class components for the cases described above you will still see warnings in `React.StrictMode`. We use `ReactDOM.findDOMNode` internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
+If you use class components for the cases described above you will still see warnings in `React.StrictMode`. `ReactDOM.findDOMNode` is used internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
```diff
class Component extends React.Component {
diff --git a/docs/src/pages/guides/composition/composition-ru.md b/docs/src/pages/guides/composition/composition-ru.md
index b22bce4eafa72b..b8b8c21c2272a1 100644
--- a/docs/src/pages/guides/composition/composition-ru.md
+++ b/docs/src/pages/guides/composition/composition-ru.md
@@ -4,7 +4,7 @@
## Wrapping components
-In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of our components when needed with a `muiName` static property.
+In order to provide the maximum flexibility and performance, we need a way to know the nature of the child elements a component receives. To solve this problem we tag some of the components with a `muiName` static property when needed.
You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution. If you wrap a component, verify if that component has this static property set.
@@ -64,7 +64,7 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
⚠️ Однако, поскольку мы используем встроенную функцию для изменения отрисованного компонента, React будет демонтировать ссылку каждый раз, когда ` ListItemLink ` отрисован. Не только React сделает ненужное обновление DOM, но и ripple эффект `ListItem` будет работать неправильно.
-Решение простое: ** избегайте встроенных функций и вместо этого, передавайте статический компонент в свойство `component`**. Давайте изменим наш `ListItemLink` следующим образом:
+Решение простое: ** избегайте встроенных функций и вместо этого, передавайте статический компонент в свойство `component`**. Let's change the `ListItemLink` to the following:
```jsx
import { Link as RouterLink } from 'react-router-dom';
@@ -135,11 +135,11 @@ If you don't use one of the above types when using your components in conjunctio
Be aware that you will still get this warning for `lazy` and `memo` components if their wrapped component can't hold a ref.
-In some instances we issue an additional warning to help debugging, similar to:
+In some instances an additional warning is issued to help with debugging, similar to:
> Invalid prop `component` supplied to `ComponentName`. Expected an element type that can hold a ref.
-We will only cover the two most common use cases. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
+Only the two most common use cases are covered. For more information see [this section in the official React docs](https://reactjs.org/docs/forwarding-refs.html).
```diff
- const MyButton = props => <div role="button" {...props} />;
@@ -157,7 +157,7 @@ To find out if the Material-UI component you're using has this requirement, chec
### Caveat with StrictMode
-If you use class components for the cases described above you will still see warnings in `React.StrictMode`. We use `ReactDOM.findDOMNode` internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
+If you use class components for the cases described above you will still see warnings in `React.StrictMode`. `ReactDOM.findDOMNode` is used internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
```diff
class Component extends React.Component {
diff --git a/docs/src/pages/guides/composition/composition-zh.md b/docs/src/pages/guides/composition/composition-zh.md
index c3c6b13d40cf24..b5298ba0834f4b 100644
--- a/docs/src/pages/guides/composition/composition-zh.md
+++ b/docs/src/pages/guides/composition/composition-zh.md
@@ -4,7 +4,7 @@
## 封装组件
-我们需要一种了解组件接收的子元素的本质的方式，这样可以尽可能提供最大的灵活性和最好的性能。 在需要的时候我们会用 `muiName` 静态属性来标记一些我们的组件，这样能够解决这个问题。
+我们需要一种了解组件接收的子元素的本质的方式，这样可以尽可能提供最大的灵活性和最好的性能。 To solve this problem we tag some of the components with a `muiName` static property when needed.
但是，您仍可能需要封装一个组件以增强它的功能，而这可能与 `muiName` 的解决方案相冲突。 If you wrap a component, verify if that component has this static property set.
@@ -65,7 +65,7 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
⚠️然而，由于我们使用内联函数来更改呈现的组件，因此，在每一次` ListItemLink `被渲染时，React都会先将它卸载。 不只是React会更新那些不必要的DOM，`ListItem` 的涟漪效应也将无法正常工作。
-解决方法很简单： **避免内联函数并将静态组件传递给 `component` 属性**。 将上述的` ListItemLink `改成：
+解决方法很简单： **避免内联函数并将静态组件传递给 `component` 属性**。 Let's change the `ListItemLink` to the following:
```jsx
import { Link as RouterLink } from 'react-router-dom';
@@ -136,11 +136,11 @@ import { Link } from 'react-router-dom';
请注意，在使用 `lazy` 和 `memo` 组件时，如果被封装的组件无法持有 ref，您仍然有可能收到这个警告。
-在某些情况下，我们发出了一个额外警告，帮助调试，类似于：
+In some instances an additional warning is issued to help with debugging, similar to:
> Invalid prop `component` supplied to `ComponentName`. Expected an element type that can hold a ref.
-我们只涵盖两个最常见的使用案例。 更多信息见[React官方文档中的本章节](https://reactjs.org/docs/forwarding-refs.html)。
+Only the two most common use cases are covered. 更多信息见[React官方文档中的本章节](https://reactjs.org/docs/forwarding-refs.html)。
```diff
- const MyButton = props => <div role="button" {...props} />;
@@ -158,7 +158,7 @@ import { Link } from 'react-router-dom';
### Caveat with StrictMode
-If you use class components for the cases described above you will still see warnings in `React.StrictMode`. We use `ReactDOM.findDOMNode` internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
+If you use class components for the cases described above you will still see warnings in `React.StrictMode`. `ReactDOM.findDOMNode` is used internally for backwards compatibility. You can use `React.forwardRef` and a designated prop in your class component to forward the `ref` to a DOM component. Doing so should not trigger any more warnings related to the deprecation of `ReactDOM.findDOMNode`.
```diff
class Component extends React.Component {
diff --git a/docs/src/pages/guides/flow/flow-ja.md b/docs/src/pages/guides/flow/flow-ja.md
index c512153d8034b9..fe840501742899 100644
--- a/docs/src/pages/guides/flow/flow-ja.md
+++ b/docs/src/pages/guides/flow/flow-ja.md
@@ -4,4 +4,4 @@
## flow-typed
-[flow-typed](https://github.com/flowtype/flow-typed) は、サードパーティ製ライブラリをFlowアプリで使用するための、インターフェース定義のセットです。 The community is maintaining [the definitions under this project](https://github.com/flow-typed/flow-typed/tree/master/definitions/npm/%40material-ui).
\ No newline at end of file
+[flow-typed](https://github.com/flowtype/flow-typed) は、サードパーティ製ライブラリをFlowアプリで使用するための、インターフェース定義のセットです。 コミュニティはこのプロジェクトの定義を[維持しています](https://github.com/flow-typed/flow-typed/tree/master/definitions/npm/%40material-ui) 。
\ No newline at end of file
diff --git a/docs/src/pages/guides/interoperability/interoperability-aa.md b/docs/src/pages/guides/interoperability/interoperability-aa.md
index df26c6df633042..e20bfc779e6c5a 100644
--- a/docs/src/pages/guides/interoperability/interoperability-aa.md
+++ b/docs/src/pages/guides/interoperability/interoperability-aa.md
@@ -2,7 +2,7 @@
<p class="description">crwdns95516:0crwdne95516:0</p>
-crwdns95518:0crwdne95518:0 crwdns95520:0crwdne95520:0
+crwdns95518:0crwdne95518:0 crwdns101262:0crwdne101262:0
- [crwdns95524:0crwdne95524:0](crwdns95522:0crwdne95522:0)
- [crwdns95528:0crwdne95528:0](crwdns95526:0crwdne95526:0)
@@ -14,7 +14,7 @@ crwdns95518:0crwdne95518:0 crwdns95520:0crwdne95520:0
## crwdns95550:0crwdne95550:0
-crwdns95552:0crwdne95552:0 crwdns95554:0crwdne95554:0
+crwdns101264:0crwdne101264:0
**crwdns95556:0crwdne95556:0**
@@ -56,7 +56,7 @@ crwdns95594:0crwdne95594:0 crwdns95596:0crwdne95596:0
 
-crwdns95608:0crwdne95608:0
+crwdns101266:0crwdne101266:0
```jsx
crwdns95610:0crwdne95610:0
@@ -144,7 +144,7 @@ crwdns95698:0crwdne95698:0 crwdns95700:0crwdne95700:0
crwdns95714:0crwdne95714:0
```jsx
-crwdns95716:0{ jsx, css }crwdne95716:0
+crwdns101268:0{ jsx, css }crwdne101268:0
```
crwdns95718:0crwdne95718:0
@@ -161,7 +161,7 @@ crwdns95732:0crwdne95732:0 crwdns95734:0crwdne95734:0
 
-crwdns95746:0crwdne95746:0 crwdns95748:0crwdne95748:0
+crwdns95746:0crwdne95746:0 crwdns101270:0crwdne101270:0
```jsx
crwdns95750:0{props.classes.button}crwdne95750:0
diff --git a/docs/src/pages/guides/interoperability/interoperability-de.md b/docs/src/pages/guides/interoperability/interoperability-de.md
index cf02efbb01d134..3a55b0b07176a5 100644
--- a/docs/src/pages/guides/interoperability/interoperability-de.md
+++ b/docs/src/pages/guides/interoperability/interoperability-de.md
@@ -2,7 +2,7 @@
<p class="description">Zwar ist die Verwendung der JSS-basierten Styling-Lösung, die von Material-UI zur Verfügung gestellt wird, einfach, um Ihre Anwendung zu stylen. Es ist jedoch möglich, eine beliebige Styling-Lösung zu verwenden, von einfachem CSS bis zu einer beliebigen Anzahl von CSS-in-JS-Bibliotheken.</p>
-In diesem Handbuch sollen die beliebtesten Alternativen dokumentiert werden, aber Sie sollten sich merken, dass die hier vorgestellten Anwendungen an andere Bibliotheken angepasst werden können. Wir haben Beispiele für folgende Styling-Lösungen bereitgestellt:
+In diesem Handbuch sollen die beliebtesten Alternativen dokumentiert werden, aber Sie sollten sich merken, dass die hier vorgestellten Anwendungen an andere Bibliotheken angepasst werden können. There are examples for the following styling solutions:
- [Einfaches CSS](#plain-css)
- [Globales CSS](#global-css)
@@ -14,7 +14,7 @@ In diesem Handbuch sollen die beliebtesten Alternativen dokumentiert werden, abe
## Einfaches CSS
-Nichts Besonderes, einfach nur altes CSS. Warum das Rad neu erfinden, wenn es seit Jahrzehnten funktioniert?
+Nothing fancy, just plain old CSS.
**PlainCssButton.css**
@@ -91,7 +91,7 @@ export default function GlobalCssButton() {
 
-Die `styled()` Methode funktioniert perfekt für alle unsere Komponenten.
+The `styled()` method works perfectly on all of the components.
```jsx
import React from 'react';
@@ -293,7 +293,7 @@ Die Emotion **css()** Methode funktioniert nahtlos mit der Material-UI.
import { jsx, css } from '@emotion/core';
import Button from '@material-ui/core/Button';
-// We just assign them the Button's className attribute
+// Just assign them the Button's className attribute
export default function EmotionButton() {
return (
<div>
@@ -330,7 +330,7 @@ Es funktioniert genauso wie gestylte Komponenten. Sie können [dieselbe Anleitun
 
-Die Styling-Lösung von Material-UI teilt viele Bausteine mit [react-jss](https://github.com/cssinjs/react-jss). Wir haben das Projekt für uns entwickelt, um unsere individuellen Anforderungen zu erfüllen, aber wir arbeiten daran, die Änderungen und Korrekturen von der Material-UI wieder in React-Jss zu integrieren.
+Die Styling-Lösung von Material-UI teilt viele Bausteine mit [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
```jsx
import React from 'react';
diff --git a/docs/src/pages/guides/interoperability/interoperability-es.md b/docs/src/pages/guides/interoperability/interoperability-es.md
index f0934732c3e130..cffc1ddeea13c1 100644
--- a/docs/src/pages/guides/interoperability/interoperability-es.md
+++ b/docs/src/pages/guides/interoperability/interoperability-es.md
@@ -2,7 +2,7 @@
<p class="description">While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.</p>
-This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. We have provided examples for the following styling solutions:
+This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions:
- [Plain CSS](#plain-css)
- [Global CSS](#global-css)
@@ -14,7 +14,7 @@ This guide aims to document the most popular alternatives, but you should find t
## Plain CSS
-Nothing fancy, just plain old CSS. Why reinvent the wheel when it has been working for decades?
+Nothing fancy, just plain old CSS.
**PlainCssButton.css**
@@ -91,7 +91,7 @@ export default function GlobalCssButton() {
 
-The `styled()` method works perfectly on all of our components.
+The `styled()` method works perfectly on all of the components.
```jsx
import React from 'react';
@@ -293,7 +293,7 @@ Emotion's **css()** method works seamlessly with Material-UI.
import { jsx, css } from '@emotion/core';
import Button from '@material-ui/core/Button';
-// We just assign them the Button's className attribute
+// Just assign them the Button's className attribute
export default function EmotionButton() {
return (
<div>
@@ -330,7 +330,7 @@ It works exactly like styled components. You can [use the same guide](/guides/in
 
-Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). We went ahead and forked the project in order to handle our unique needs, but we're working to merge the changes and fixes from Material-UI back to react-jss.
+Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
```jsx
import React from 'react';
diff --git a/docs/src/pages/guides/interoperability/interoperability-fr.md b/docs/src/pages/guides/interoperability/interoperability-fr.md
index 5accfb1f87c8a8..54080dd068ec32 100644
--- a/docs/src/pages/guides/interoperability/interoperability-fr.md
+++ b/docs/src/pages/guides/interoperability/interoperability-fr.md
@@ -2,7 +2,7 @@
<p class="description">While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.</p>
-This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. We have provided examples for the following styling solutions:
+This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions:
- [Plain CSS](#plain-css)
- [CSS global](#global-css)
@@ -14,7 +14,7 @@ This guide aims to document the most popular alternatives, but you should find t
## Plain CSS
-Nothing fancy, just plain old CSS. Why reinvent the wheel when it has been working for decades?
+Nothing fancy, just plain old CSS.
**PlainCssButton.css**
@@ -91,7 +91,7 @@ export default function GlobalCssButton() {
 
-The `styled()` method works perfectly on all of our components.
+The `styled()` method works perfectly on all of the components.
```jsx
import React from 'react';
@@ -293,7 +293,7 @@ Emotion's **css()** method works seamlessly with Material-UI.
import { jsx, css } from '@emotion/core';
import Button from '@material-ui/core/Button';
-// We just assign them the Button's className attribute
+// Just assign them the Button's className attribute
export default function EmotionButton() {
return (
<div>
@@ -330,7 +330,7 @@ It works exactly like styled components. You can [use the same guide](/guides/in
 
-Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). We went ahead and forked the project in order to handle our unique needs, but we're working to merge the changes and fixes from Material-UI back to react-jss.
+Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
```jsx
import React from 'react';
diff --git a/docs/src/pages/guides/interoperability/interoperability-ja.md b/docs/src/pages/guides/interoperability/interoperability-ja.md
index deec74fabd201a..2fd15a97542c9f 100644
--- a/docs/src/pages/guides/interoperability/interoperability-ja.md
+++ b/docs/src/pages/guides/interoperability/interoperability-ja.md
@@ -2,7 +2,7 @@
<p class="description">While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.</p>
-This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. We have provided examples for the following styling solutions:
+This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions:
- [Plain CSS](#plain-css)
- [Global CSS](#global-css)
@@ -14,7 +14,7 @@ This guide aims to document the most popular alternatives, but you should find t
## Plain CSS
-Nothing fancy, just plain old CSS. Why reinvent the wheel when it has been working for decades?
+Nothing fancy, just plain old CSS.
**PlainCssButton.css**
@@ -81,6 +81,9 @@ export default function GlobalCssButton() {
</div>
);
}
+
+Text
+XPath: /pre[4]/code
```
[](https://codesandbox.io/s/9yxopv4vmp)
@@ -91,7 +94,7 @@ export default function GlobalCssButton() {
 
-The `styled()` method works perfectly on all of our components.
+The `styled()` method works perfectly on all of the components.
```jsx
import React from 'react';
@@ -293,7 +296,7 @@ Emotion's **css()** method works seamlessly with Material-UI.
import { jsx, css } from '@emotion/core';
import Button from '@material-ui/core/Button';
-// We just assign them the Button's className attribute
+// Just assign them the Button's className attribute
export default function EmotionButton() {
return (
<div>
@@ -330,7 +333,7 @@ It works exactly like styled components. You can [use the same guide](/guides/in
 
-Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). We went ahead and forked the project in order to handle our unique needs, but we're working to merge the changes and fixes from Material-UI back to react-jss.
+Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
```jsx
import React from 'react';
diff --git a/docs/src/pages/guides/interoperability/interoperability-pt.md b/docs/src/pages/guides/interoperability/interoperability-pt.md
index af543d0b864e96..ae47cc61fba12b 100644
--- a/docs/src/pages/guides/interoperability/interoperability-pt.md
+++ b/docs/src/pages/guides/interoperability/interoperability-pt.md
@@ -2,7 +2,7 @@
<p class="description">Embora seja simples usar a solução de estilo baseada em JSS fornecida pelo Material-UI para estilizar sua aplicação, é possível usar qualquer solução de estilo que você preferir, do CSS puro a qualquer número de bibliotecas CSS-in-JS.</p>
-Este guia tem como objetivo documentar as alternativas mais populares, mas você deve descobrir que os princípios aplicados aqui podem ser adaptados para outras bibliotecas. Nós fornecemos exemplos para as seguintes soluções de estilo:
+Este guia tem como objetivo documentar as alternativas mais populares, mas você deve descobrir que os princípios aplicados aqui podem ser adaptados para outras bibliotecas. There are examples for the following styling solutions:
- [CSS puro](#plain-css)
- [CSS global](#global-css)
@@ -14,7 +14,7 @@ Este guia tem como objetivo documentar as alternativas mais populares, mas você
## CSS puro
-Nada extravagante, simplesmente o bom e velho CSS. Por que reinventar a roda quando ela já funciona há décadas?
+Nothing fancy, just plain old CSS.
**PlainCssButton.css**
@@ -91,7 +91,7 @@ export default function GlobalCssButton() {
 
-O método `styled()` funciona perfeitamente em todos os nossos componentes.
+The `styled()` method works perfectly on all of the components.
```jsx
import React from 'react';
@@ -293,7 +293,7 @@ O método **css()** do Emotion funciona perfeitamente com Material-UI.
import { jsx, css } from '@emotion/core';
import Button from '@material-ui/core/Button';
-// We just assign them the Button's className attribute
+// Just assign them the Button's className attribute
export default function EmotionButton() {
return (
<div>
@@ -330,7 +330,7 @@ Funciona exatamente como styled components. Você pode [usar o mesmo guia](/guid
 
-A solução de estilo do Material-UI compartilha muitos blocos de construção com [react-jss](https://github.com/cssinjs/react-jss). Fomos em frente e bifurcamos o projeto para lidar com nossas necessidades exclusivas, mas estamos trabalhando para mesclar as mudanças e correções de Material-UI de volta para react-jss.
+A solução de estilo do Material-UI compartilha muitos blocos de construção com [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
```jsx
import React from 'react';
diff --git a/docs/src/pages/guides/interoperability/interoperability-ru.md b/docs/src/pages/guides/interoperability/interoperability-ru.md
index b8c3dcdaf494ce..ab13477341dc9c 100644
--- a/docs/src/pages/guides/interoperability/interoperability-ru.md
+++ b/docs/src/pages/guides/interoperability/interoperability-ru.md
@@ -2,7 +2,7 @@
<p class="description">While it is simple to use the JSS based styling solution provided by Material-UI to style your application, it is possible to use any styling solution you prefer, from plain CSS to any number of CSS-in-JS libraries.</p>
-This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. We have provided examples for the following styling solutions:
+This guide aims to document the most popular alternatives, but you should find that the principals applied here can be adapted to other libraries. There are examples for the following styling solutions:
- [Plain CSS](#plain-css)
- [Глобальный CSS](#global-css)
@@ -14,7 +14,7 @@ This guide aims to document the most popular alternatives, but you should find t
## Plain CSS
-Nothing fancy, just plain old CSS. Why reinvent the wheel when it has been working for decades?
+Nothing fancy, just plain old CSS.
**PlainCssButton.css**
@@ -91,7 +91,7 @@ export default function GlobalCssButton() {
 
-The `styled()` method works perfectly on all of our components.
+The `styled()` method works perfectly on all of the components.
```jsx
import React from 'react';
@@ -293,7 +293,7 @@ Emotion's **css()** method works seamlessly with Material-UI.
import { jsx, css } from '@emotion/core';
import Button from '@material-ui/core/Button';
-// We just assign them the Button's className attribute
+// Just assign them the Button's className attribute
export default function EmotionButton() {
return (
<div>
@@ -330,7 +330,7 @@ It works exactly like styled components. You can [use the same guide](/guides/in
 
-Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). We went ahead and forked the project in order to handle our unique needs, but we're working to merge the changes and fixes from Material-UI back to react-jss.
+Material-UI's styling solution shares many building blocks with [react-jss](https://github.com/cssinjs/react-jss). A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
```jsx
import React from 'react';
diff --git a/docs/src/pages/guides/interoperability/interoperability-zh.md b/docs/src/pages/guides/interoperability/interoperability-zh.md
index 6db5149ec3c7e3..b5e10ce2ecd6f6 100644
--- a/docs/src/pages/guides/interoperability/interoperability-zh.md
+++ b/docs/src/pages/guides/interoperability/interoperability-zh.md
@@ -2,7 +2,7 @@
<p class="description">虽然使用由 Material-UI 提供的基于JSS的样式解决方案来设置您的应用程序样式比较简单，但您依旧可以在从纯 CSS 到任意数量的 CSS-in-JS 库的方案中选择，来实现您所偏好的样式方案。</p>
-本指南旨在归档当前比较流行的一些替代方案，但是您应该可以发现在这里运用的法则也可以在其他库里适用。 我们为以下的样式方案提供了一些方案：
+本指南旨在归档当前比较流行的一些替代方案，但是您应该可以发现在这里运用的法则也可以在其他库里适用。 There are examples for the following styling solutions:
- [纯 CSS](#plain-css)
- [全局 CSS](#global-css)
@@ -14,7 +14,7 @@
## 纯 CSS
-没有什么特别花哨的，只是普通的旧版 CSS。 大家已经用它了几十年了，何必多此一举呢？
+Nothing fancy, just plain old CSS.
**PlainCssButton.css**
@@ -91,7 +91,7 @@ export default function GlobalCssButton() {
 
-`styled()` 方法适用于我们所有的组件。
+The `styled()` method works perfectly on all of the components.
```jsx
import React from 'react';
@@ -293,7 +293,7 @@ Emotion的 **css()** 方法与Material-UI无缝协作。
import { jsx, css } from '@emotion/core';
import Button from '@material-ui/core/Button';
-// We just assign them the Button's className attribute
+// Just assign them the Button's className attribute
export default function EmotionButton() {
return (
<div>
@@ -330,7 +330,7 @@ export default function EmotionButton() {
 
-Material-UI 的样式方案与 [react-jss](https://github.com/cssinjs/react-jss) 共享了许多代码块。 为了解决我们独特的需求，我们继续开发并且克隆了项目，但是我们仍致力于合并那些从 Material-UI 返回到 react-jss 的变动和修复。
+Material-UI 的样式方案与 [react-jss](https://github.com/cssinjs/react-jss) 共享了许多代码块。 A fork was needed in order to handle Material-UI's unique needs, but with the intent to merge the changes and fixes from Material-UI back to react-jss.
```jsx
import React from 'react';
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-aa.md b/docs/src/pages/guides/migration-v0x/migration-v0x-aa.md
index fd9400e67f1286..59d3f8823d5e29 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-aa.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-aa.md
@@ -6,7 +6,7 @@
### crwdns95790:0crwdne95790:0 crwdns95792:0crwdne95792:0
-crwdns95794:0crwdne95794:0 crwdns95796:0crwdne95796:0 crwdns95798:0crwdne95798:0 crwdns95800:0crwdne95800:0
+crwdns95794:0crwdne95794:0 crwdns95796:0crwdne95796:0 crwdns101272:0crwdne101272:0
### crwdns95802:0crwdne95802:0
@@ -91,4 +91,4 @@ crwdns95882:0{this.state.value}crwdne95882:0
### crwdns95884:0crwdne95884:0
-crwdns95886:0crwdne95886:0 crwdns95888:0crwdne95888:0 crwdns95890:0crwdne95890:0 crwdns95892:0crwdne95892:0
\ No newline at end of file
+crwdns95886:0crwdne95886:0 crwdns101274:0crwdne101274:0 crwdns101276:0crwdne101276:0
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-de.md b/docs/src/pages/guides/migration-v0x/migration-v0x-de.md
index 996e9615e3e453..de35f1f65c0bb0 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-de.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-de.md
@@ -6,7 +6,7 @@
### Woah - die API ist anders! Bedeutet das, dass 1.0 völlig anders ist und ich die Grundlagen noch einmal erlernen muss, und eine Migration wird praktisch unmöglich sein?
-Gute Frage! Die Antwort ist nein. Die Kernkonzepte haben sich nicht geändert. Sie werden feststellen, dass die API mehr Flexibilität bietet, dies ist jedoch mit Kosten verbunden. Wir haben untergeordnete Komponenten hergestellt und weniger Komplexität abstrahiert.
+Gute Frage! Die Antwort ist nein. Die Kernkonzepte haben sich nicht geändert. You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.
### Was hat zu einer so großen Veränderung geführt?
@@ -187,4 +187,4 @@ Erhöhter Button-Aktualisierungspfad:
### Fortsetzung folgt…
-Haben Sie Ihre App erfolgreich migriert und möchten der Community helfen? Bitte hilf uns! Wir haben ein offenes Problem, um den Migrationsleitfaden [#7195](https://github.com/mui-org/material-ui/issues/7195) abzuschließen. Any pull request is welcomed 😊.
\ No newline at end of file
+Haben Sie Ihre App erfolgreich migriert und möchten der Community helfen? There is an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-es.md b/docs/src/pages/guides/migration-v0x/migration-v0x-es.md
index f7aa653f090063..b5bb70635f71a5 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-es.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-es.md
@@ -6,7 +6,7 @@
### Woah - the API is way different! Does that mean 1.0 is completely different, I’ll have to learn the basics all over again, and migrating will be practically impossible?
-I’m glad you asked! The answer is no. The core concepts haven’t changed. You will notice that the API provides more flexibility, but this has a cost. We have been making lower-level components, abstracting less complexity.
+I’m glad you asked! The answer is no. The core concepts haven’t changed. You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.
### What motivated such a large change?
@@ -187,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? There is an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md b/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md
index 7cbf9d17b038c0..bdfcfb97d445a1 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md
@@ -6,7 +6,7 @@
### Woah - the API is way different! Does that mean 1.0 is completely different, I’ll have to learn the basics all over again, and migrating will be practically impossible?
-Je suis content que vous ayez demandé! La réponse est non. Les concepts de base n'ont pas changé. You will notice that the API provides more flexibility, but this has a cost. We have been making lower-level components, abstracting less complexity.
+Je suis content que vous ayez demandé! La réponse est non. Les concepts de base n'ont pas changé. You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.
### What motivated such a large change?
@@ -187,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? There is an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md b/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md
index f7aa653f090063..b5bb70635f71a5 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md
@@ -6,7 +6,7 @@
### Woah - the API is way different! Does that mean 1.0 is completely different, I’ll have to learn the basics all over again, and migrating will be practically impossible?
-I’m glad you asked! The answer is no. The core concepts haven’t changed. You will notice that the API provides more flexibility, but this has a cost. We have been making lower-level components, abstracting less complexity.
+I’m glad you asked! The answer is no. The core concepts haven’t changed. You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.
### What motivated such a large change?
@@ -187,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? There is an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md b/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md
index eca501e55b6c79..f5d990fe85e9a9 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md
@@ -6,7 +6,7 @@
### Woah - a API é diferente! Isso significa que 1.0 é completamente diferente, vou ter que aprender o básico de novo, e a migração será praticamente impossível?
-Estou feliz que você tenha perguntado! A resposta é não. Os principais conceitos não mudaram. Você notará que a API oferece mais flexibilidade, mas isso tem um custo. Temos feito componentes de baixo nível, abstraindo menos complexidade.
+Estou feliz que você tenha perguntado! A resposta é não. Os principais conceitos não mudaram. You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.
### O que motivou uma mudança tão grande?
@@ -187,4 +187,4 @@ Caminho de atualização do RaisedButton:
### Continua…
-Você migrou sua aplicação com sucesso e deseja ajudar a comunidade? Por favor nos ajude! Temos um problema em aberto para concluir este guia de migração [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
+Você migrou sua aplicação com sucesso e deseja ajudar a comunidade? There is an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md b/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md
index f7aa653f090063..b5bb70635f71a5 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md
@@ -6,7 +6,7 @@
### Woah - the API is way different! Does that mean 1.0 is completely different, I’ll have to learn the basics all over again, and migrating will be practically impossible?
-I’m glad you asked! The answer is no. The core concepts haven’t changed. You will notice that the API provides more flexibility, but this has a cost. We have been making lower-level components, abstracting less complexity.
+I’m glad you asked! The answer is no. The core concepts haven’t changed. You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.
### What motivated such a large change?
@@ -187,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? There is an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md b/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md
index 8f542c3a9c30f1..ff12ab0842fa74 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md
@@ -6,7 +6,7 @@
### 哇—— API 看起来完全不一样！ 这是否意味着1.0完全不同，而我得重新学习基础知识，而迁移是几乎不可能的？
-我很高兴你问了！ 答案是不。我们的核心概念并没有改变。 您会注意到 API 的灵活性更强了，但这是有一些代价的。 我们一直在实现一些较低级别的组件，并且减少了复杂性。
+我很高兴你问了！ 答案是不。我们的核心概念并没有改变。 You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.
### 到底是什么带来了如此巨大的改变呢？
@@ -187,4 +187,4 @@ This will apply a change such as the following:
### 未完待续...
-您是否已成功迁移您的应用，并助社区一臂之力？ 请帮助我们！ 我们有一个未解决的问题，以完成此迁移指南 [＃7195](https://github.com/mui-org/material-ui/issues/7195)。 Any pull request is welcomed 😊.
\ No newline at end of file
+您是否已成功迁移您的应用，并助社区一臂之力？ There is an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-aa.md b/docs/src/pages/guides/migration-v3/migration-v3-aa.md
index a4c6d14b8255eb..61e240868583d9 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-aa.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-aa.md
@@ -58,8 +58,10 @@ crwdns95950:0crwdne95950:0
### crwdns95966:0crwdne95966:0
-- crwdns95968:0crwdne95968:0 crwdns95970:0crwdne95970:0 crwdns95972:0crwdne95972:0 crwdns95974:0crwdne95974:0 crwdns95976:0crwdne95976:0
-- crwdns95978:0crwdne95978:0 crwdns95980:0crwdne95980:0 crwdns95982:0crwdne95982:0 crwdns95984:0crwdne95984:0 crwdns95986:0crwdne95986:0
+- crwdns95968:0crwdne95968:0 crwdns95970:0crwdne95970:0 crwdns95972:0crwdne95972:0 crwdns101278:0crwdne101278:0 crwdns95976:0crwdne95976:0
+- crwdns101280:0crwdne101280:0 crwdns101282:0crwdne101282:0
+
+ crwdns101284:0crwdne101284:0
```diff
crwdns95988:0crwdne95988:0 crwdns95990:0crwdne95990:0
@@ -86,7 +88,7 @@ crwdns96006:0[Container]crwdne96006:0
crwdns96012:0{ children }crwdnd96012:0{handleChange}crwdnd96012:0{children}crwdne96012:0
```
-crwdns96014:0crwdne96014:0
+crwdns101286:0crwdne101286:0
### crwdns96016:0crwdne96016:0
@@ -250,7 +252,7 @@ crwdns96014:0crwdne96014:0
- crwdns96198:0[InputLabel]crwdne96198:0 crwdns96200:0crwdne96200:0
```diff
- crwdns96202:0{{ asterisk: 'bar' }}crwdnd96202:0{{ asterisk: 'bar' }}crwdne96202:0
+ crwdns101288:0{{ asterisk: 'bar' }}crwdnd101288:0{{ asterisk: 'bar' }}crwdne101288:0
```
- crwdns96204:0[InputBase]crwdne96204:0 crwdns96206:0crwdne96206:0
@@ -287,7 +289,7 @@ crwdns96014:0crwdne96014:0
crwdns96252:0{headlineMapping}crwdnd96252:0{variantMapping}crwdne96252:0
```
-- crwdns96254:0[Typography]crwdne96254:0 crwdns96256:0crwdne96256:0 crwdns96258:0crwdne96258:0 crwdns96260:0crwdne96260:0 crwdns96262:0crwdne96262:0
+- crwdns96254:0[Typography]crwdne96254:0 crwdns96256:0crwdne96256:0 crwdns101290:0crwdne101290:0 crwdns96260:0crwdne96260:0 crwdns101292:0crwdne101292:0
- crwdns96264:0[Typography]crwdne96264:0 crwdns96266:0crwdne96266:0 crwdns96268:0crwdne96268:0
- crwdns96270:0[Typography]crwdne96270:0 crwdns96272:0crwdne96272:0
@@ -300,10 +302,10 @@ crwdns96014:0crwdne96014:0
- crwdns96280:0crwdne96280:0
```diff
- crwdns96282:0{
- Button,
- TextField,
- -}crwdne96282:0
+ crwdns101294:0{
+ Button,
+ TextField,
+ -}crwdne101294:0
```
crwdns96284:0crwdne96284:0
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-de.md b/docs/src/pages/guides/migration-v3/migration-v3-de.md
index feea442e97e0b9..ff83b0e2d1617b 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-de.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-de.md
@@ -70,8 +70,10 @@ yarn add @material-ui/styles
### Stile
-- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. Removing `react-jss` from your `package.json` can help. The StylesProvider component replaces the JssProvider one.
-- Remove the first option argument of `withTheme()`. The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
+- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. (Removing `react-jss` from your `package.json` can help). The StylesProvider component replaces the JssProvider one.
+- Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.)
+
+ It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
```diff
-const DeepChild = withTheme()(DeepChildRaw);
@@ -170,7 +172,7 @@ function MySelect({ children }) {
}
```
-This change is explained in more detail in our [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
+This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
### Button
@@ -356,7 +358,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
- Foo
+ Foo
</InputLabel>
```
@@ -395,7 +397,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
+<Typography variantMapping={variantMapping}>
```
-- [Typography] Ändern der Standardvariante von `body2` auf `body1`. Eine Schriftgröße von 16px ist eine bessere Standardeinstellung als 14px. Bootstrap, material.io undnsogar unsere Dokumentation verwenden 16px als Standardschriftgröße. 14px wie Ant Design es verständlicherweise benutzt, da chinesische Benutzer ein anderes Alphabet haben. Wir empfehlen 12px als Standardschriftgröße für Japanisch.
+- [Typography] Ändern der Standardvariante von `body2` auf `body1`. Eine Schriftgröße von 16px ist eine bessere Standardeinstellung als 14px. Bootstrap, material.io, and even the documentation use 16px as a default font size. 14px wie Ant Design es verständlicherweise benutzt, da chinesische Benutzer ein anderes Alphabet haben. 12px is recommended as the default font size for Japanese.
- [Typography] Entfernen der Standardfarbe aus den Typografievarianten. Die Farbe sollte die meiste Zeit erben. Dies ist das Standardverhalten des Webs.
- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). The usage of *default* should be avoided, it lacks semantic.
@@ -409,8 +411,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-es.md b/docs/src/pages/guides/migration-v3/migration-v3-es.md
index 31e33bc552a2b4..691708c51faf3b 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-es.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-es.md
@@ -70,8 +70,10 @@ yarn add @material-ui/styles
### Estilos
-- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. Removing `react-jss` from your `package.json` can help. The StylesProvider component replaces the JssProvider one.
-- Remove the first option argument of `withTheme()`. The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
+- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. (Removing `react-jss` from your `package.json` can help). The StylesProvider component replaces the JssProvider one.
+- Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.)
+
+ It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
```diff
-const DeepChild = withTheme()(DeepChildRaw);
@@ -170,7 +172,7 @@ function MySelect({ children }) {
}
```
-This change is explained in more detail in our [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
+This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
### Button
@@ -356,7 +358,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
- Foo
+ Foo
</InputLabel>
```
@@ -395,7 +397,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
+<Typography variantMapping={variantMapping}>
```
-- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even our documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. We recommend 12px as the default font size for Japanese.
+- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even the documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. 12px is recommended as the default font size for Japanese.
- [Typography] Remove the default color from the typography variants. The color should inherit most of the time. It's the default behavior of the web.
- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). The usage of *default* should be avoided, it lacks semantic.
@@ -409,8 +411,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-fr.md b/docs/src/pages/guides/migration-v3/migration-v3-fr.md
index 13013417fabd8e..4f0cf5b6950c86 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-fr.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-fr.md
@@ -70,8 +70,10 @@ yarn add @material-ui/styles
### Styles
-- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. Removing `react-jss` from your `package.json` can help. The StylesProvider component replaces the JssProvider one.
-- Remove the first option argument of `withTheme()`. The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
+- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. (Removing `react-jss` from your `package.json` can help). The StylesProvider component replaces the JssProvider one.
+- Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.)
+
+ It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
```diff
-const DeepChild = withTheme()(DeepChildRaw);
@@ -170,7 +172,7 @@ function MySelect({ children }) {
}
```
-This change is explained in more detail in our [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
+This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
### Button
@@ -356,7 +358,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
- Foo
+ Foo
</InputLabel>
```
@@ -395,7 +397,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
+<Typography variantMapping={variantMapping}>
```
-- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even our documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. We recommend 12px as the default font size for Japanese.
+- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even the documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. 12px is recommended as the default font size for Japanese.
- [Typography] Remove the default color from the typography variants. The color should inherit most of the time. It's the default behavior of the web.
- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). The usage of *default* should be avoided, it lacks semantic.
@@ -409,8 +411,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-ja.md b/docs/src/pages/guides/migration-v3/migration-v3-ja.md
index 66eafbe885a53a..b88a3a724df0cf 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-ja.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-ja.md
@@ -70,8 +70,10 @@ yarn add @material-ui/styles
### スタイル
-- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. Removing `react-jss` from your `package.json` can help. The StylesProvider component replaces the JssProvider one.
-- Remove the first option argument of `withTheme()`. The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
+- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. (Removing `react-jss` from your `package.json` can help). The StylesProvider component replaces the JssProvider one.
+- Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.)
+
+ It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
```diff
-const DeepChild = withTheme()(DeepChildRaw);
@@ -170,7 +172,7 @@ function MySelect({ children }) {
}
```
-This change is explained in more detail in our [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
+This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
### Button
@@ -356,7 +358,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
- Foo
+ Foo
</InputLabel>
```
@@ -395,7 +397,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
+<Typography variantMapping={variantMapping}>
```
-- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even our documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. We recommend 12px as the default font size for Japanese.
+- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even the documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. 12px is recommended as the default font size for Japanese.
- [Typography] Remove the default color from the typography variants. The color should inherit most of the time. It's the default behavior of the web.
- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). The usage of *default* should be avoided, it lacks semantic.
@@ -409,8 +411,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-pt.md b/docs/src/pages/guides/migration-v3/migration-v3-pt.md
index bf2ffc8a77a57b..9df096e6115551 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-pt.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-pt.md
@@ -70,8 +70,10 @@ yarn add @material-ui/styles
### Estilos
-- ⚠️ Material-UI depende do JSS v10. JSS v10 não é compatível com o v9. Certifique-se de que o JSS v9 não esteja instalado em seu ambiente. Remover `react-jss` do seu `package.json` pode ajudar. O componente StylesProvider substitui o componente JssProvider.
-- Remova a primeira opção de argumento do `withTheme()`. O primeiro argumento era um espaço reservado para uma eventual opção futura. Nós não encontramos uma necessidade para ele. É hora de remover esse argumento. Corresponde à [emotion API](https://emotion.sh/docs/introduction) e [styled-components API](https://www.styled-components.com).
+- ⚠️ Material-UI depende do JSS v10. JSS v10 não é compatível com o v9. Certifique-se de que o JSS v9 não esteja instalado em seu ambiente. (Removing `react-jss` from your `package.json` can help). O componente StylesProvider substitui o componente JssProvider.
+- Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.)
+
+ It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
```diff
-const DeepChild = withTheme()(DeepChildRaw);
@@ -170,7 +172,7 @@ function MySelect({ children }) {
}
```
-Esta alteração é explicada em mais detalhes no nosso guia [TypeScript](/guides/typescript/#handling-value-and-event-handlers)
+This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
### Botão
@@ -356,7 +358,7 @@ Esta alteração é explicada em mais detalhes no nosso guia [TypeScript](/guide
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
- Foo
+ Foo
</InputLabel>
```
@@ -395,9 +397,9 @@ Esta alteração é explicada em mais detalhes no nosso guia [TypeScript](/guide
+<Typography variantMapping={variantMapping}>
```
-- [Typography] Modifique a variante padrão de `body2` para `body1`. Um tamanho de fonte de 16px é um padrão melhor que 14px. Bootstrap, material.io e até nossa documentação usam 16px como tamanho de fonte padrão. 14px como o Ant Design usa, é compreensível, já que os usuários chineses têm um alfabeto diferente. Recomendamos 12px como o tamanho de fonte padrão para japonês.
+- [Typography] Modifique a variante padrão de `body2` para `body1`. Um tamanho de fonte de 16px é um padrão melhor que 14px. Bootstrap, material.io, and even the documentation use 16px as a default font size. 14px como o Ant Design usa, é compreensível, já que os usuários chineses têm um alfabeto diferente. 12px is recommended as the default font size for Japanese.
- [Typography] Remova a cor padrão das variantes de tipografia. A cor deve herdar a maior parte do tempo. É o comportamento padrão da web.
-- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). O uso de *default* deve ser evitado, isso perde semântica.
+- [Typography] Renomeie `color="default"` para `color="initial"` seguindo a lógica [desta discussão](https://github.com/mui-org/material-ui/issues/13028). O uso de *default* deve ser evitado, isso perde semântica.
### Node
@@ -409,8 +411,8 @@ Esta alteração é explicada em mais detalhes no nosso guia [TypeScript](/guide
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-ru.md b/docs/src/pages/guides/migration-v3/migration-v3-ru.md
index 7a0b3c6477d6ae..5983e23a08f8a0 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-ru.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-ru.md
@@ -70,8 +70,10 @@ yarn add @material-ui/styles
### Styles
-- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. Removing `react-jss` from your `package.json` can help. The StylesProvider component replaces the JssProvider one.
-- Remove the first option argument of `withTheme()`. The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
+- ⚠️ Material-UI depends on JSS v10. JSS v10 is not backward compatible with v9. Make sure JSS v9 is not installed in your environment. (Removing `react-jss` from your `package.json` can help). The StylesProvider component replaces the JssProvider one.
+- Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.)
+
+ It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
```diff
-const DeepChild = withTheme()(DeepChildRaw);
@@ -170,7 +172,7 @@ function MySelect({ children }) {
}
```
-This change is explained in more detail in our [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
+This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
### Button
@@ -356,7 +358,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
- Foo
+ Foo
</InputLabel>
```
@@ -395,7 +397,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
+<Typography variantMapping={variantMapping}>
```
-- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even our documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. We recommend 12px as the default font size for Japanese.
+- [Typography] Change the default variant from `body2` to `body1`. A font size of 16px is a better default than 14px. Bootstrap, material.io, and even the documentation use 16px as a default font size. 14px like Ant Design uses is understandable, as Chinese users have a different alphabet. 12px is recommended as the default font size for Japanese.
- [Typography] Remove the default color from the typography variants. The color should inherit most of the time. It's the default behavior of the web.
- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). The usage of *default* should be avoided, it lacks semantic.
@@ -409,8 +411,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-zh.md b/docs/src/pages/guides/migration-v3/migration-v3-zh.md
index 6683e620ea9f23..0d39d6e3780a93 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-zh.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-zh.md
@@ -70,8 +70,10 @@ yarn add @material-ui/styles
### Styles（样式表单）
-- ⚠️ Material-UI 依赖于 JSS v10版本。 JSS v10版本与v9版本不向后兼容。 请保证您的开发环境中未安装 JSS v9版本。 在您的 `package.json` 中移除 `react-jss` 将会有所帮助。 StylesProvider 组件替代了 JssProvider 组件。
-- 请移除 `withTheme()` 中的第一个可选的参数。 第一个参数本是作为未来的可能的选项的一个占位符。 我们从未发现有需要它的情况。 是时候来删除这个参数了。 它与[emotion 的 API](https://emotion.sh/docs/introduction) 以及 [styled-components 的 API ](https://www.styled-components.com) 相匹配。
+- ⚠️ Material-UI 依赖于 JSS v10版本。 JSS v10版本与v9版本不向后兼容。 请保证您的开发环境中未安装 JSS v9版本。 (Removing `react-jss` from your `package.json` can help). StylesProvider 组件替代了 JssProvider 组件。
+- Remove the first option argument of `withTheme()`. (The first argument was a placeholder for a potential future option that never arose.)
+
+ It matches the [emotion API](https://emotion.sh/docs/introduction) and the [styled-components API](https://www.styled-components.com).
```diff
-const DeepChild = withTheme()(DeepChildRaw);
@@ -155,7 +157,7 @@ function MySelect({ children }) {
}
```
-我们在 [TypeScript 指南中](/guides/typescript/#handling-value-and-event-handlers)更详细地解释了此变更。
+This change is explained in more detail in the [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
### Buttons（按钮）
@@ -341,7 +343,7 @@ function MySelect({ children }) {
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
- Foo
+ Foo
</InputLabel>
```
@@ -380,7 +382,7 @@ function MySelect({ children }) {
+<Typography variantMapping={variantMapping}>
```
-- [Typography] 将默认的字体从 `body2` 换成 `body1`。 默认为16px的字体大小比默认为14px好。 Bootstrap，material.io，甚至我们的文档都将16px作为默认字体大小。 像 Ant Design 一样使用14px是可以理解的，因为中国的用户使用了不同的字母表。 我们建议使用12px作为日语的默认字体大小。
+- [Typography] 将默认的字体从 `body2` 换成 `body1`。 默认为16px的字体大小比默认为14px好。 Bootstrap, material.io, and even the documentation use 16px as a default font size. 像 Ant Design 一样使用14px是可以理解的，因为中国的用户使用了不同的字母表。 12px is recommended as the default font size for Japanese.
- [Typography] 移除了铸排变体的默认颜色。 大多数情况下，字体颜色应该是继承而来的。 这是网站的默认行为。
- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). 您不应该再使用 *default*，它缺少明确的语义。
@@ -394,8 +396,8 @@ function MySelect({ children }) {
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-aa.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-aa.md
index a85b2140dcd61e..70bfa365274a90 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-aa.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-aa.md
@@ -4,7 +4,7 @@
## crwdns96296:0crwdne96296:0
-crwdns96298:0crwdne96298:0 crwdns96300:0crwdne96300:0 crwdns96302:0crwdne96302:0
+crwdns96298:0crwdne96298:0 crwdns101296:0crwdne101296:0 crwdns96302:0crwdne96302:0
## crwdns96304:0crwdne96304:0
@@ -32,7 +32,7 @@ crwdns96330:0crwdne96330:0
crwdns96332:0crwdne96332:0
```
-crwdns96334:0crwdne96334:0 crwdns96336:0crwdne96336:0 crwdns96338:0crwdne96338:0
+crwdns96334:0crwdne96334:0 crwdns101298:0crwdne101298:0 crwdns96338:0crwdne96338:0
crwdns96340:0crwdne96340:0
@@ -71,7 +71,7 @@ crwdns96358:0crwdne96358:0
crwdns100392:0{makeStyles, createStyles}crwdnd100392:0{makeStyles, createStyles}crwdne100392:0
- crwdns100394:0crwdne100394:0 crwdns100396:0[top-level-imports]crwdne100396:0
+ crwdns100394:0crwdne100394:0 crwdns101300:0[top-level-imports]crwdne101300:0
crwdns100398:0{ Button, TextField }crwdne100398:0
@@ -79,6 +79,6 @@ crwdns96358:0crwdne96358:0
crwdns96370:0crwdne96370:0
-crwdns96372:0crwdne96372:0 crwdns96374:0crwdne96374:0 crwdns96376:0crwdne96376:0 crwdns96378:0crwdne96378:0 crwdns96380:0crwdne96380:0 crwdns96382:0crwdne96382:0 crwdns96384:0crwdne96384:0 crwdns96386:0crwdne96386:0
+crwdns101302:0crwdne101302:0 crwdns101304:0crwdne101304:0 crwdns101306:0crwdne101306:0 crwdns101308:0crwdne101308:0 crwdns101310:0crwdne101310:0 crwdns101312:0crwdne101312:0 crwdns101314:0crwdne101314:0
-crwdns96388:0crwdne96388:0
\ No newline at end of file
+crwdns101316:0crwdne101316:0
\ No newline at end of file
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md
index da4335e23c55e5..ea08ccdd23c5ff 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md
@@ -4,7 +4,7 @@
## Paketgröße zählt
-Die Paketgröße von Material-UI wird sehr ernst genommen. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Wir können, kombiniert mit [dangerJS](https://danger.systems/js/), [detaillierte Änderungen der Bündelgröße](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) bei jedem Pull Request prüfen.
+Die Paketgröße von Material-UI wird sehr ernst genommen. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Wir können, kombiniert mit [dangerJS](https://danger.systems/js/), [detaillierte Änderungen der Bündelgröße](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) bei jedem Pull Request prüfen.
## Wie kann ich die Paketgröße reduzieren?
@@ -34,7 +34,7 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
-This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+This is the option we document in **all** the demos because it requires no configuration. It is encouraged for library authors extending the components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
Beim direkten Importieren auf diese Weise werden die Exporte in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js) nicht verwendet. Diese Datei kann trotzdem als praktische Referenz für die öffentlichen Module dienen.
@@ -172,7 +172,7 @@ If you are using Create React App, you will need to use a couple of projects tha
#### 2. Convert all your imports
- Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+ Finally, you can convert your exisiting codebase to this option with this [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
It will perform the following diffs:
```diff
@@ -185,6 +185,6 @@ If you are using Create React App, you will need to use a couple of projects tha
Das auf npm veröffentlichte Paket ist mit [Babel](https://github.com/babel/babel) **transpiliert**, um die [ unterstützten Plattformen](/getting-started/supported-platforms/) zu berücksichtigen.
-Wir veröffentlichen auch eine zweite Version der Komponenten. Sie finden diese Version unter den [`/es` Ordner](https://unpkg.com/@material-ui/core/es/). Die gesamte nicht offizielle Syntax wird auf den [ECMA-262 Standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm) transpiliert, nichts mehr. Dies kann verwendet werden, um separate Bundles für verschiedene Browser zu erstellen. Ältere Browser erfordern mehr transpilierte JavaScript-Funktionen. Dies erhöht die Größe des Packets. Für die Laufzeitfunktionen von ES2015 sind keine polyfills enthalten. IE11 + und Evergreen-Browser unterstützen alle erforderlichen Funktionen. Wenn Sie Unterstützung für andere Browser benötigen, sollten Sie [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill) in Betracht ziehen.
+A second version of the components is also published, which you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
-⚠️ Um die Duplizierung von Code in Benutzerpaketen zu minimieren, raten wir **dringend davon ab** den `/es` Ordner zu benutzten.
\ No newline at end of file
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** from using the `/es` folder.
\ No newline at end of file
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md
index 1c995f735b09c1..1af28f60718a22 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md
@@ -4,7 +4,7 @@
## Bundle size matters
-The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+The bundle size of Material-UI is taken very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## How to reduce the bundle size?
@@ -34,7 +34,7 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
-This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+This is the option we document in **all** the demos because it requires no configuration. It is encouraged for library authors extending the components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
@@ -172,7 +172,7 @@ If you are using Create React App, you will need to use a couple of projects tha
#### 2. Convert all your imports
- Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+ Finally, you can convert your exisiting codebase to this option with this [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
It will perform the following diffs:
```diff
@@ -185,6 +185,6 @@ If you are using Create React App, you will need to use a couple of projects tha
The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/getting-started/supported-platforms/).
-We also publish a second version of the components. You can find this version under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
+A second version of the components is also published, which you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
-⚠️ In order to minimize duplication of code in users' bundles, we **strongly discourage** library authors from using the `/es` folder.
\ No newline at end of file
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** from using the `/es` folder.
\ No newline at end of file
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md
index c1b2ecfbcb35cb..919ff187474368 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md
@@ -4,7 +4,7 @@
## La taille du bundle compte
-The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+The bundle size of Material-UI is taken very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## Comment réduire la taille du bundle?
@@ -34,7 +34,7 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
-This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+This is the option we document in **all** the demos because it requires no configuration. It is encouraged for library authors extending the components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
@@ -172,7 +172,7 @@ If you are using Create React App, you will need to use a couple of projects tha
#### 2. Convert all your imports
- Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+ Finally, you can convert your exisiting codebase to this option with this [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
It will perform the following diffs:
```diff
@@ -185,6 +185,6 @@ If you are using Create React App, you will need to use a couple of projects tha
The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/getting-started/supported-platforms/).
-We also publish a second version of the components. You can find this version under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
+A second version of the components is also published, which you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
-⚠️ In order to minimize duplication of code in users' bundles, we **strongly discourage** library authors from using the `/es` folder.
\ No newline at end of file
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** from using the `/es` folder.
\ No newline at end of file
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md
index cc4571af2b3354..526a6985a5e36a 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md
@@ -4,7 +4,7 @@
## Bundle size matters
-The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+The bundle size of Material-UI is taken very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## How to reduce the bundle size?
@@ -34,7 +34,7 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
-This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+This is the option we document in **all** the demos because it requires no configuration. It is encouraged for library authors extending the components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
@@ -172,7 +172,7 @@ If you are using Create React App, you will need to use a couple of projects tha
#### 2. Convert all your imports
- Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+ Finally, you can convert your exisiting codebase to this option with this [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
It will perform the following diffs:
```diff
@@ -185,6 +185,6 @@ If you are using Create React App, you will need to use a couple of projects tha
The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/getting-started/supported-platforms/).
-We also publish a second version of the components. You can find this version under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
+A second version of the components is also published, which you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
-⚠️ In order to minimize duplication of code in users' bundles, we **strongly discourage** library authors from using the `/es` folder.
\ No newline at end of file
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** from using the `/es` folder.
\ No newline at end of file
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 bd9852b557a710..41fd513248e63d 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
@@ -4,7 +4,7 @@
## Tamanho do pacote importa
-O tamanho do pacote de Material-UI é levado muito a sério. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combinado com [dangerJS](https://danger.systems/js/) podemos inspecionar [alterações detalhadas no tamanho do pacote](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) em cada solicitação de Pull Request.
+O tamanho do pacote de Material-UI é levado muito a sério. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combinado com [dangerJS](https://danger.systems/js/) podemos inspecionar [alterações detalhadas no tamanho do pacote](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) em cada solicitação de Pull Request.
## Como reduzir o tamanho do pacote?
@@ -34,7 +34,7 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
-This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+This is the option we document in **all** the demos because it requires no configuration. It is encouraged for library authors extending the components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
Ao importar diretamente dessa maneira, não utiliza as exportações em [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), esse arquivo pode servir como uma referência útil para quais módulos são públicos.
@@ -172,7 +172,7 @@ If you are using Create React App, you will need to use a couple of projects tha
#### 2. Convert all your imports
- Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+ Finally, you can convert your exisiting codebase to this option with this [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
It will perform the following diffs:
```diff
@@ -185,6 +185,6 @@ If you are using Create React App, you will need to use a couple of projects tha
O pacote publicado no npm é **transpilado**, com [Babel](https://github.com/babel/babel), para levar em consideração as [plataformas suportadas](/getting-started/supported-platforms/).
-Também publicamos uma segunda versão dos componentes. Você pode encontrar esta versão sob a [pasta `/es`](https://unpkg.com/@material-ui/core/es/). Toda a sintaxe não oficial é transpilada para o padrão [ECMA-262](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nada mais. Isso pode ser usado para criar pacotes separados visando diferentes navegadores. Os navegadores mais antigos exigem mais recursos JavaScript para serem transpilados, o que aumenta o tamanho do pacote. Nenhum polyfill está incluído para os recursos de tempo de execução do ES2015. IE11+ e navegadores evergreen suportam todos os recursos necessários. Se você precisar de suporte para outros navegadores, considere usar [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
+A second version of the components is also published, which you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
-⚠️ Para minimizar a duplicação de código nos pacotes dos usuários, nós **desencorajamos fortemente** autores de bibliotecas de usar a pasta `/es`.
\ No newline at end of file
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** from using the `/es` folder.
\ No newline at end of file
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md
index 579c5dbefaafd1..05f0249b4a73e4 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md
@@ -4,7 +4,7 @@
## Bundle size matters
-Размер пакета Material-UI достаточно внушителен. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+Размер пакета Material-UI достаточно внушителен. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## How to reduce the bundle size?
@@ -34,7 +34,7 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
-This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+This is the option we document in **all** the demos because it requires no configuration. It is encouraged for library authors extending the components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
@@ -172,7 +172,7 @@ If you are using Create React App, you will need to use a couple of projects tha
#### 2. Convert all your imports
- Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+ Finally, you can convert your exisiting codebase to this option with this [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
It will perform the following diffs:
```diff
@@ -185,6 +185,6 @@ If you are using Create React App, you will need to use a couple of projects tha
The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/getting-started/supported-platforms/).
-We also publish a second version of the components. Вы можете найти эту версию в [каталоге ` / es ` ](https://unpkg.com/@material-ui/core/es/),. All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
+A second version of the components is also published, which you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
-⚠️ In order to minimize duplication of code in users' bundles, we **strongly discourage** library authors from using the `/es` folder.
\ No newline at end of file
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** from using the `/es` folder.
\ No newline at end of file
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 09b438b29fd6fa..40ab11eb2dfcba 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
@@ -4,7 +4,7 @@
## 打包文件的大小是很重要的
-Material-UI 的打包文件大小至关重要。 We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). 结合 [dangerJS](https://danger.systems/js/) 一起，我们可以在每个 Pull Request 中都可以查看[详细的打包文件的大小变化](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) 。
+Material-UI 的打包文件大小至关重要。 Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). 结合 [dangerJS](https://danger.systems/js/) 一起，我们可以在每个 Pull Request 中都可以查看[详细的打包文件的大小变化](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) 。
## 如何减少打包文件的体积？
@@ -34,7 +34,7 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
-This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+This is the option we document in **all** the demos because it requires no configuration. It is encouraged for library authors extending the components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
尽管这样直接导入并不会使用 [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js) 中的导出模式，但是对于那些公开的模块来说，此文件仍可以作为一个方便的参考。
@@ -172,7 +172,7 @@ If you are using Create React App, you will need to use a couple of projects tha
#### 2. Convert all your imports
- Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+ Finally, you can convert your exisiting codebase to this option with this [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
It will perform the following diffs:
```diff
@@ -185,6 +185,6 @@ If you are using Create React App, you will need to use a couple of projects tha
考虑到一些[支持的平台](/getting-started/supported-platforms/)，在 npm 上发布的包是和 [Babel](https://github.com/babel/babel) 一起被**编译**的。
-我们同时也发布了这些组件的第二种版本。 您可以在 [`/es` 文件夹](https://unpkg.com/@material-ui/core/es/)下找到此版本。 所有非官方的语义都被编译成[ECMA-262 的标准](https://www.ecma-international.org/publications/standards/Ecma-262.htm)，仅此而已。 这样一来，针对不同的浏览器，您可以编译出不同的打包文件。 一些旧的浏览器需编译一些 JavaScript 的功能，这样会增加打包文件的大小。 ES2015 运行的时候的功能中不包含垫片。 IE11+ 和一些长青浏览器会支持所有必要的功能。 如果您需要支持其他浏览器，请考虑使用 [`@ babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill)。
+A second version of the components is also published, which you can find under the [`/es` folder](https://unpkg.com/@material-ui/core/es/). All the non-official syntax is transpiled to the [ECMA-262 standard](https://www.ecma-international.org/publications/standards/Ecma-262.htm), nothing more. This can be used to make separate bundles targeting different browsers. Older browsers will require more JavaScript features to be transpiled, which increases the size of the bundle. No polyfills are included for ES2015 runtime features. IE11+ and evergreen browsers support all the necessary features. If you need support for other browsers, consider using [`@babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill).
-⚠️为了使得用户打包文件中的重复代码最小化，我们**强烈阻止**库的作者使用`/es` 文件夹。
\ No newline at end of file
+⚠️ In order to minimize duplication of code in users' bundles, library authors are **strongly discouraged** from using the `/es` folder.
\ No newline at end of file
diff --git a/docs/src/pages/guides/responsive-ui/responsive-ui-ja.md b/docs/src/pages/guides/responsive-ui/responsive-ui-ja.md
index 656098be92f445..74b9d0c8b518e8 100644
--- a/docs/src/pages/guides/responsive-ui/responsive-ui-ja.md
+++ b/docs/src/pages/guides/responsive-ui/responsive-ui-ja.md
@@ -7,5 +7,5 @@
- [Grid](/components/grid/): The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
- [Container](/components/container/): The container centers your content horizontally. それが最も基本的なレイアウト要素です。
- [Breakpoints](/customization/breakpoints/): API that enables the use of breakpoints in a wide variety of contexts.
-- [useMediaQuery](/components/use-media-query/): This is a CSS media query hook for React. It listens for matches to a CSS media query.
+- [useMediaQuery](/components/use-media-query/): This is a CSS media query hook for React. CSSメディアクエリへの一致をリッスンします。
- [Hidden](/components/hidden/): Quickly and responsively toggle the visibility value of components and more with our hidden utilities.
\ No newline at end of file
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-aa.md b/docs/src/pages/guides/right-to-left/right-to-left-aa.md
index d025d7add0d8be..1364a5e1b7f271 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-aa.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-aa.md
@@ -30,7 +30,7 @@ crwdns96442:0crwdne96442:0
crwdns96444:0crwdne96444:0 crwdns96446:0crwdne96446:0 crwdns96448:0crwdne96448:0
-crwdns96450:0crwdne96450:0 crwdns96452:0crwdne96452:0
+crwdns96450:0crwdne96450:0 crwdns101318:0crwdne101318:0
```jsx
crwdns96454:0{ create }crwdnd96454:0{ StylesProvider, jssPreset }crwdnd96454:0{jss}crwdnd96454:0{props.children}crwdne96454:0
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-de.md b/docs/src/pages/guides/right-to-left/right-to-left-de.md
index 2d352632e8bb8f..81f0ca543b5418 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-de.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-de.md
@@ -32,7 +32,7 @@ npm install jss-rtl
Nachdem Sie das Plugin in Ihrem Projekt installiert haben, müssen die Komponenten der Material-UI weiterhin von der jss-Instanz geladen werden, wie im Folgenden beschrieben. Intern verwendet withStyles dieses JSS-Plugin wenn `direction: 'rtl'` im Theme gesetzt ist. Schaue in die [plugin README](https://github.com/alitaheri/jss-rtl), um mehr zu erfahren.
-Nachdem Sie eine neue JSS-Instanz mit dem Plugin erstellt haben, müssen Sie diese für alle Komponenten in der Komponentenstruktur verfügbar machen. Wir haben eine [`StylesProvider`](/styles/api/#stylesprovider) Komponente dafür:
+Nachdem Sie eine neue JSS-Instanz mit dem Plugin erstellt haben, müssen Sie diese für alle Komponenten in der Komponentenstruktur verfügbar machen. The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
```jsx
import { create } from 'jss';
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-es.md b/docs/src/pages/guides/right-to-left/right-to-left-es.md
index f5040abe893103..bb2ddb634075b3 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-es.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-es.md
@@ -32,7 +32,7 @@ npm install jss-rtl
Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below. Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme. Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
-Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. We have a [`StylesProvider`](/styles/api/#stylesprovider) component for this:
+Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
```jsx
import { create } from 'jss';
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-fr.md b/docs/src/pages/guides/right-to-left/right-to-left-fr.md
index b1a1dd45a85c32..367340b60be9a3 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-fr.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-fr.md
@@ -32,7 +32,7 @@ npm install jss-rtl
Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below. Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme. Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
-Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. We have a [`StylesProvider`](/styles/api/#stylesprovider) component for this:
+Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
```jsx
import { create } from 'jss';
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-ja.md b/docs/src/pages/guides/right-to-left/right-to-left-ja.md
index a5e7bb97b703af..56f85b5fa16e24 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-ja.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-ja.md
@@ -32,7 +32,7 @@ npm install jss-rtl
Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below. Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme. Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
-Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. We have a [`StylesProvider`](/styles/api/#stylesprovider) component for this:
+Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
```jsx
import { create } from 'jss';
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-pt.md b/docs/src/pages/guides/right-to-left/right-to-left-pt.md
index d5c8d58379cee0..fa81f95af7b015 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-pt.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-pt.md
@@ -32,7 +32,7 @@ npm install jss-rtl
Tendo instalado o plugin em seu projeto, os componentes de Material-UI ainda exigem que ele seja carregado pela instância do jss, conforme descrito abaixo. Internamente, withStyles está usando este plugin JSS quando `direção: 'rtl'` está definido no tema. Vá para o [README do plugin](https://github.com/alitaheri/jss-rtl) para aprender mais sobre isso.
-Depois de criar uma nova instância do JSS com o plugin, você precisará disponibilizá-la para todos os componentes na árvore de componentes. Nós temos um componente [`StylesProvider`](/styles/api/#stylesprovider) para isso:
+Depois de criar uma nova instância do JSS com o plugin, você precisará disponibilizá-la para todos os componentes na árvore de componentes. The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
```jsx
import { create } from 'jss';
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-ru.md b/docs/src/pages/guides/right-to-left/right-to-left-ru.md
index 1592024c245400..e0915411979957 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-ru.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-ru.md
@@ -32,7 +32,7 @@ npm install jss-rtl
Having installed the plugin in your project, Material-UI components still require it to be loaded by the jss instance, as described below. Internally, withStyles is using this JSS plugin when `direction: 'rtl'` is set on the theme. Head to the [plugin README](https://github.com/alitaheri/jss-rtl) to learn more about it.
-Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. We have a [`StylesProvider`](/styles/api/#stylesprovider) component for this:
+Once you have created a new JSS instance with the plugin, you need to make it available to all the components in the component tree. The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
```jsx
import { create } from 'jss';
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-zh.md b/docs/src/pages/guides/right-to-left/right-to-left-zh.md
index 961dda27b7d6fc..d1a95959b6a1e0 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-zh.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-zh.md
@@ -32,7 +32,7 @@ npm install jss-rtl
如下所述，在项目中安装了插件后，Material-UI 组件仍然需要通过 jss 实例来加载。 在内部，若 `direction: 'rtl'` 上在主题设置了，withStyles 则会使用该 JSS 插件 。 请前往 [此插件的 README](https://github.com/alitaheri/jss-rtl) 来了解更多信息。
-一旦您通过插件创建了一个新的 JSS 实例，您需要提给组件树中的所有组件。 我们有一个 [`StylesProvider`](/styles/api/#stylesprovider) 组件来服务这个需求：
+一旦您通过插件创建了一个新的 JSS 实例，您需要提给组件树中的所有组件。 The [`StylesProvider`](/styles/api/#stylesprovider) component enables this:
```jsx
import { create } from 'jss';
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-aa.md b/docs/src/pages/guides/server-rendering/server-rendering-aa.md
index 0e199d6ed59441..7e185d9be6c486 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-aa.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-aa.md
@@ -21,7 +21,7 @@ crwdns96498:0crwdne96498:0
### crwdns96500:0crwdne96500:0
-crwdns96502:0crwdne96502:0
+crwdns101320:0crwdne101320:0
`crwdns96504:0crwdne96504:0`
@@ -40,7 +40,7 @@ crwdns96508:0{
### crwdns96510:0crwdne96510:0
-crwdns96512:0crwdne96512:0 crwdns96514:0crwdne96514:0 crwdns96516:0crwdne96516:0
+crwdns101322:0crwdne101322:0 crwdns101324:0crwdne101324:0 crwdns101326:0crwdne101326:0
`crwdns96518:0crwdne96518:0`
@@ -54,15 +54,15 @@ crwdns96528:0crwdne96528:0
crwdns96532:0crwdne96532:0
-crwdns96534:0crwdne96534:0
+crwdns101328:0crwdne101328:0
-crwdns96536:0crwdne96536:0 crwdns96538:0crwdne96538:0
+crwdns101330:0crwdne101330:0 crwdns96538:0crwdne96538:0
-crwdns96540:0crwdne96540:0 crwdns96542:0crwdne96542:0
+crwdns101332:0crwdne101332:0 crwdns101334:0crwdne101334:0
```jsx
crwdns96544:0{ ServerStyleSheets, ThemeProvider }crwdne96544:0
- crwdns96546:0{theme}crwdne96546:0
+ crwdns101336:0{theme}crwdne101336:0
crwdns96548:0crwdne96548:0
crwdns96550:0crwdne96550:0
crwdns96552:0crwdne96552:0
@@ -70,7 +70,7 @@ crwdns96552:0crwdne96552:0
### crwdns96554:0crwdne96554:0
-crwdns96556:0crwdne96556:0
+crwdns101338:0crwdne101338:0
```js
crwdns96558:0${css}crwdnd96558:0${html}crwdne96558:0
@@ -78,7 +78,7 @@ crwdns96558:0${css}crwdnd96558:0${html}crwdne96558:0
### crwdns96560:0crwdne96560:0
-crwdns96562:0crwdne96562:0 crwdns96564:0crwdne96564:0 crwdns96566:0crwdne96566:0
+crwdns96562:0crwdne96562:0 crwdns96564:0crwdne96564:0 crwdns101340:0crwdne101340:0
`crwdns96568:0crwdne96568:0`
@@ -96,4 +96,4 @@ crwdns96574:0crwdne96574:0
## crwdns96588:0crwdne96588:0
-crwdns96590:0crwdne96590:0
\ No newline at end of file
+crwdns101342:0crwdne101342:0
\ No newline at end of file
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-de.md b/docs/src/pages/guides/server-rendering/server-rendering-de.md
index 8ab10f21566115..9520fecaff4f20 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-de.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-de.md
@@ -21,7 +21,7 @@ Im folgenden Rezept wird beschrieben, wie das serverseitige Rendering eingericht
### Das Theme
-Wir erstellen ein Theme, das vom Client und vom Server gemeinsam genutzt wird.
+Create a theme that will be shared between the client and the server:
`theme.js`
@@ -52,7 +52,7 @@ export default theme;
### Die Server-Seite
-Im Folgenden wird beschrieben, wie unsere Serverseite aussehen wird. Wir werden eine[ Express-Middleware](https://expressjs.com/en/guide/using-middleware.html) mit [ app.use ](https://expressjs.com/en/api.html) einrichten, um alle Anfragen zu bearbeiten, die auf unserem Server eingehen. Wenn Sie mit Express oder Middleware nicht vertraut sind, sollten Sie wissen, dass unsere handleRender-Funktion jedes Mal aufgerufen wird, wenn der Server eine Anfrage erhält.
+The following is the outline for what the server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to the server. If you're unfamiliar with Express or middleware, just know that the handleRender function will be called every time the server receives a request.
`server.js`
@@ -81,11 +81,11 @@ app.listen(port);
Als Erstes müssen wir bei jeder Anfrage ein neues `ServerStyleSheets` erstellen.
-Beim Rendern wickeln wir die `App`, unsere Wurzelkomponente, in einem [`StylesProvider`](/styles/api/#stylesprovider) und [`ThemeProvider`](/styles/api/#themeprovider) ein, um die Stilkonfiguration und das `Theme` für alle Komponenten im Komponentenbaum verfügbar zu machen.
+When rendering, we will wrap `App`, the root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
-Der wichtigste Schritt beim serverseitigen Rendern ist das Rendern des ursprünglichen HTM-Codes unserer Komponente **bevor** wir es an den Kunden senden. Dazu verwenden wir [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
+The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. Dazu verwenden wir [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
-Wir erhalten dann das CSS aus unsere `Sheets` mit `sheets.toString()`. Wir werden sehen, wie dies in unserer ` enderFullPage`-Funktion weitergegeben wird.
+We then get the CSS from the `sheets` using `sheets.toString()`. We will see how this is passed along in the `renderFullPage` function.
```jsx
import express from 'express';
@@ -107,7 +107,7 @@ function handleRender(req, res) {
),
);
- // Entnahme des CSS aus dem Sheet.
+ // Grab the CSS from the sheets.
const css = sheets.toString();
// Zurücksenden der gerenderten Seite an den Client.
@@ -127,7 +127,7 @@ app.listen(port);
### Injizieren der ursprüngliche HTML Komponente und CSS
-Der letzte Schritt auf der Serverseite ist das Einfügen unserer ursprünglichen HTML Komponente und CSS in eine Vorlage, die auf der Clientseite gerendert werden soll.
+The final step on the server-side is to inject the initial component HTML and CSS into a template to be rendered on the client side.
```js
function renderFullPage(html, css) {
@@ -148,7 +148,7 @@ function renderFullPage(html, css) {
### Die Client-Seite
-Die Client-Seite ist unkompliziert. Wir müssen nur das serverseitig erzeugte CSS entfernen. Werfen wir einen Blick auf unsere Client Datei:
+Die Client-Seite ist unkompliziert. Wir müssen nur das serverseitig erzeugte CSS entfernen. Let's take a look at the client file:
`client.js`
@@ -187,4 +187,4 @@ Wir bieten verschiedene Referenzimplementierungen an, die Sie im [GitHub-Reposit
## Problemlösungen
-Lesen Sie unsere Antworten auf häufig gestellte Fragen: [Meine App wird auf dem Server nicht richtig gerendert](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
+Check out the FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-es.md b/docs/src/pages/guides/server-rendering/server-rendering-es.md
index 1580bf03ba93aa..4f4031f2c4412d 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-es.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-es.md
@@ -21,7 +21,7 @@ In the following recipe, we are going to look at how to set up server-side rende
### The theme
-We create a theme that will be shared between the client and the server.
+Create a theme that will be shared between the client and the server:
`theme.js`
@@ -52,7 +52,7 @@ export default theme;
### The server-side
-The following is the outline for what our server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to our server. If you're unfamiliar with Express or middleware, just know that our handleRender function will be called every time the server receives a request.
+The following is the outline for what the server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to the server. If you're unfamiliar with Express or middleware, just know that the handleRender function will be called every time the server receives a request.
`server.js`
@@ -81,11 +81,11 @@ app.listen(port);
The first thing that we need to do on every request is create a new `ServerStyleSheets`.
-When rendering, we will wrap `App`, our root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
+When rendering, we will wrap `App`, the root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
-The key step in server-side rendering is to render the initial HTML of our component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
+The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
-We then get the CSS from our `sheets` using `sheets.toString()`. We will see how this is passed along in our `renderFullPage` function.
+We then get the CSS from the `sheets` using `sheets.toString()`. We will see how this is passed along in the `renderFullPage` function.
```jsx
import express from 'express';
@@ -107,7 +107,7 @@ function handleRender(req, res) {
),
);
- // Grab the CSS from our sheets.
+ // Grab the CSS from the sheets.
const css = sheets.toString();
// Send the rendered page back to the client.
@@ -127,7 +127,7 @@ app.listen(port);
### Inject Initial Component HTML and CSS
-The final step on the server-side is to inject our initial component HTML and CSS into a template to be rendered on the client side.
+The final step on the server-side is to inject the initial component HTML and CSS into a template to be rendered on the client side.
```js
function renderFullPage(html, css) {
@@ -148,7 +148,7 @@ function renderFullPage(html, css) {
### The Client Side
-The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at our client file:
+The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at the client file:
`client.js`
@@ -187,4 +187,4 @@ We host different reference implementations which you can find in the [GitHub re
## Troubleshooting
-Check out our FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
+Check out the FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-fr.md b/docs/src/pages/guides/server-rendering/server-rendering-fr.md
index d1c3caee896337..1c3d190644c628 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-fr.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-fr.md
@@ -21,7 +21,7 @@ In the following recipe, we are going to look at how to set up server-side rende
### The theme
-We create a theme that will be shared between the client and the server.
+Create a theme that will be shared between the client and the server:
`theme.js`
@@ -52,7 +52,7 @@ export default theme;
### The server-side
-The following is the outline for what our server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to our server. If you're unfamiliar with Express or middleware, just know that our handleRender function will be called every time the server receives a request.
+The following is the outline for what the server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to the server. If you're unfamiliar with Express or middleware, just know that the handleRender function will be called every time the server receives a request.
`server.js`
@@ -81,11 +81,11 @@ app.listen(port);
The first thing that we need to do on every request is create a new `ServerStyleSheets`.
-When rendering, we will wrap `App`, our root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
+When rendering, we will wrap `App`, the root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
-The key step in server-side rendering is to render the initial HTML of our component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
+The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
-We then get the CSS from our `sheets` using `sheets.toString()`. We will see how this is passed along in our `renderFullPage` function.
+We then get the CSS from the `sheets` using `sheets.toString()`. We will see how this is passed along in the `renderFullPage` function.
```jsx
import express from 'express';
@@ -107,7 +107,7 @@ function handleRender(req, res) {
),
);
- // Grab the CSS from our sheets.
+ // Grab the CSS from the sheets.
const css = sheets.toString();
// Send the rendered page back to the client.
@@ -127,7 +127,7 @@ app.listen(port);
### Inject Initial Component HTML and CSS
-The final step on the server-side is to inject our initial component HTML and CSS into a template to be rendered on the client side.
+The final step on the server-side is to inject the initial component HTML and CSS into a template to be rendered on the client side.
```js
function renderFullPage(html, css) {
@@ -148,7 +148,7 @@ function renderFullPage(html, css) {
### Le côté client
-The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at our client file:
+The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at the client file:
`client.js`
@@ -187,4 +187,4 @@ We host different reference implementations which you can find in the [GitHub re
## Résolution de problèmes
-Check out our FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
+Check out the FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-ja.md b/docs/src/pages/guides/server-rendering/server-rendering-ja.md
index bdb5ed547b705e..7a23ad518476d7 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-ja.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-ja.md
@@ -1,12 +1,12 @@
# サーバーサイドレンダリング
-<p class="description">The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests your app.</p>
+<p class="description">サーバー側レンダリングの最も一般的な使用例は、ユーザー（または検索エンジンのクローラー）が最初にアプリを要求したときに最初のレンダリングを処理することです。</p>
-When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client. From that point on, the client takes over rendering duties.
+サーバーは要求を受信すると、必要なコンポーネントをHTMLストリングにレンダリングし、それを応答としてクライアントに送信します。 それ以降は、クライアントがレンダリング作業を引き継ぎます。
-## Material-UI on the server
+## サーバー上のMaterial-UI
-Material-UI was designed from the ground-up with the constraint of rendering on the server, but it's up to you to make sure it's correctly integrated. It's important to provide the page with the required CSS, otherwise the page will render with just the HTML then wait for the CSS to be injected by the client, causing it to flicker (FOUC). To inject the style down to the client, we need to:
+Material-UIは、サーバーでのレンダリングの制約を考慮してゼロから設計されましたが、正しく統合されるかどうかはユーザー次第です。 必要なCSSをページに提供することが重要です。そうしないと、ページはHTMLだけでレンダリングされ、クライアントによってCSSが注入されるのを待って、ちらつきが発生します (FOUC)。 クライアントにスタイルを注入するには、次のことが必要です。
1. Create a fresh, new [`ServerStyleSheets`](/styles/api/#serverstylesheets) instance on every request.
2. Render the React tree with the server-side collector.
@@ -15,13 +15,13 @@ Material-UI was designed from the ground-up with the constraint of rendering on
On the client side, the CSS will be injected a second time before removing the server-side injected CSS.
-## Setting Up
+## 設定する
In the following recipe, we are going to look at how to set up server-side rendering.
-### The theme
+### テーマ
-We create a theme that will be shared between the client and the server.
+Create a theme that will be shared between the client and the server:
`theme.js`
@@ -52,7 +52,7 @@ export default theme;
### The server-side
-The following is the outline for what our server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to our server. If you're unfamiliar with Express or middleware, just know that our handleRender function will be called every time the server receives a request.
+The following is the outline for what the server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to the server. If you're unfamiliar with Express or middleware, just know that the handleRender function will be called every time the server receives a request.
`server.js`
@@ -81,11 +81,11 @@ app.listen(port);
The first thing that we need to do on every request is create a new `ServerStyleSheets`.
-When rendering, we will wrap `App`, our root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
+When rendering, we will wrap `App`, the root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
-The key step in server-side rendering is to render the initial HTML of our component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
+The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
-We then get the CSS from our `sheets` using `sheets.toString()`. We will see how this is passed along in our `renderFullPage` function.
+We then get the CSS from the `sheets` using `sheets.toString()`. We will see how this is passed along in the `renderFullPage` function.
```jsx
import express from 'express';
@@ -107,7 +107,7 @@ function handleRender(req, res) {
),
);
- // Grab the CSS from our sheets.
+ // Grab the CSS from the sheets.
const css = sheets.toString();
// Send the rendered page back to the client.
@@ -127,7 +127,7 @@ app.listen(port);
### Inject Initial Component HTML and CSS
-The final step on the server-side is to inject our initial component HTML and CSS into a template to be rendered on the client side.
+The final step on the server-side is to inject the initial component HTML and CSS into a template to be rendered on the client side.
```js
function renderFullPage(html, css) {
@@ -148,7 +148,7 @@ function renderFullPage(html, css) {
### The Client Side
-The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at our client file:
+The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at the client file:
`client.js`
@@ -187,4 +187,4 @@ We host different reference implementations which you can find in the [GitHub re
## Troubleshooting
-Check out our FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
+Check out the FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-pt.md b/docs/src/pages/guides/server-rendering/server-rendering-pt.md
index 66ed23a0f1b971..7e38c18573cd65 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-pt.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-pt.md
@@ -21,7 +21,7 @@ Na receita a seguir, vamos ver como configurar a renderização do lado do servi
### O tema
-Criamos um tema que será compartilhado entre o cliente e o servidor.
+Create a theme that will be shared between the client and the server:
`theme.js`
@@ -52,7 +52,7 @@ export default theme;
### O lado do servidor
-O seguinte é o esboço para o aspecto que o nosso servidor deve olhar. Vamos montar um [middleware Express](https://expressjs.com/en/guide/using-middleware.html) usando [app.use](https://expressjs.com/en/api.html) para lidar com todas as requisições que chegam ao nosso servidor. Se você não estiver familiarizado com o Express ou o middleware, saiba apenas, que nossa função handleRender será chamada toda vez que o servidor receber uma requisição.
+The following is the outline for what the server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to the server. If you're unfamiliar with Express or middleware, just know that the handleRender function will be called every time the server receives a request.
`server.js`
@@ -81,11 +81,11 @@ app.listen(port);
A primeira coisa que precisamos fazer em cada solicitação é criar um novo `ServerStyleSheets`.
-Quando renderizando, vamos encapsular `App`, nosso componente raiz, dentro de um [`StylesProvider`](/styles/api/#stylesprovider) e [` ThemeProvider`](/styles/api/#themeprovider) para tornar a configuração de estilo e o ` theme` disponíveis para todos os componentes na árvore de componentes.
+When rendering, we will wrap `App`, the root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
-A etapa principal na renderização do lado do servidor, é renderizar o HTML inicial de nosso componente **antes** de nós enviarmos para o lado do cliente. Para fazer isso, usamos [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
+The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. Para fazer isso, usamos [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
-Em seguida, obtemos o CSS de nossas `folhas` usando `sheets.toString()`. Vamos ver como isso é passado em nossa função `renderFullPage`.
+We then get the CSS from the `sheets` using `sheets.toString()`. We will see how this is passed along in the `renderFullPage` function.
```jsx
import express from 'express';
@@ -107,7 +107,7 @@ function handleRender(req, res) {
),
);
- // Pega o CSS de nossas folhas.
+ // Grab the CSS from the sheets.
const css = sheets.toString();
// Envia a página renderizada de volta ao cliente.
@@ -127,7 +127,7 @@ app.listen(port);
### Injetar Componente Inicial HTML e CSS
-A etapa final no lado do servidor é injetar nosso componente HTML e CSS inicial em um modelo a ser renderizado no lado do cliente.
+The final step on the server-side is to inject the initial component HTML and CSS into a template to be rendered on the client side.
```js
function renderFullPage(html, css) {
@@ -148,7 +148,7 @@ function renderFullPage(html, css) {
### O lado do cliente
-O lado do cliente é direto. Tudo o que precisamos fazer é remover o CSS gerado no lado do servidor. Vamos dar uma olhada no nosso arquivo de cliente:
+O lado do cliente é direto. Tudo o que precisamos fazer é remover o CSS gerado no lado do servidor. Let's take a look at the client file:
`client.js`
@@ -187,4 +187,4 @@ Nós hospedamos diferentes implementações de referência que você pode encont
## Resolução de problemas
-Confira nossa resposta FAQ: [Minha aplicação não é renderizada corretamente no servidor](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
+Check out the FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-ru.md b/docs/src/pages/guides/server-rendering/server-rendering-ru.md
index c41edc1f5e0f4a..fbfedbc9351744 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-ru.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-ru.md
@@ -21,7 +21,7 @@ Material-UI was designed from the ground-up with the constraint of rendering on
### The theme
-We create a theme that will be shared between the client and the server.
+Create a theme that will be shared between the client and the server:
`theme.js`
@@ -52,7 +52,7 @@ export default theme;
### The server-side
-Ниже приведено описание того, как наша сторона сервера будет выглядеть. Мы настраиваем [Express middleware](https://expressjs.com/en/guide/using-middleware.html), используя [app.use](https://expressjs.com/en/api.html), чтобы обработать все запросы, которые приходят на наш сервер. Если вы не знакомы с Express или middleware, просто знайте, что наша функция handleRender будет вызвана каждый раз, когда сервер получает запрос.
+The following is the outline for what the server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to the server. If you're unfamiliar with Express or middleware, just know that the handleRender function will be called every time the server receives a request.
`server.js`
@@ -81,11 +81,11 @@ app.listen(port);
The first thing that we need to do on every request is create a new `ServerStyleSheets`.
-When rendering, we will wrap `App`, our root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
+When rendering, we will wrap `App`, the root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
-The key step in server-side rendering is to render the initial HTML of our component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
+The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
-We then get the CSS from our `sheets` using `sheets.toString()`. We will see how this is passed along in our `renderFullPage` function.
+We then get the CSS from the `sheets` using `sheets.toString()`. We will see how this is passed along in the `renderFullPage` function.
```jsx
import express from 'express';
@@ -107,7 +107,7 @@ function handleRender(req, res) {
),
);
- // Grab the CSS from our sheets.
+ // Grab the CSS from the sheets.
const css = sheets.toString();
// Send the rendered page back to the client.
@@ -127,7 +127,7 @@ app.listen(port);
### Inject Initial Component HTML and CSS
-The final step on the server-side is to inject our initial component HTML and CSS into a template to be rendered on the client side.
+The final step on the server-side is to inject the initial component HTML and CSS into a template to be rendered on the client side.
```js
function renderFullPage(html, css) {
@@ -148,7 +148,7 @@ function renderFullPage(html, css) {
### The Client Side
-The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at our client file:
+The client side is straightforward. All we need to do is remove the server-side generated CSS. Let's take a look at the client file:
`client.js`
@@ -187,4 +187,4 @@ We host different reference implementations which you can find in the [GitHub re
## Troubleshooting
-Check out our FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
+Check out the FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
diff --git a/docs/src/pages/guides/server-rendering/server-rendering-zh.md b/docs/src/pages/guides/server-rendering/server-rendering-zh.md
index 401e4a7ee36fda..b5ab9e8fab01e4 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-zh.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-zh.md
@@ -21,7 +21,7 @@ Material-UI 最初设计受到了在服务器端渲染的约束，但是您可
### 主题
-我们创建了一个能在客户端和服务器端共享的主题。
+Create a theme that will be shared between the client and the server:
`theme.js`
@@ -50,7 +50,7 @@ const theme = createMuiTheme({
### 服务器端
-下面的大纲可以大致展现一下我们的服务器端。 我们将使用 [app.use](https://expressjs.com/en/api.html) 来设置一个 [Express 的中间件](https://expressjs.com/en/guide/using-middleware.html)，从而处理来自我们服务器端的所有请求。 如果您对 Express 或者 middleware 不太熟悉，您只需要知道每次服务器收到了一个请求，都会调用我们的 handleRender 函数。
+The following is the outline for what the server-side is going to look like. We are going to set up an [Express middleware](https://expressjs.com/en/guide/using-middleware.html) using [app.use](https://expressjs.com/en/api.html) to handle all requests that come in to the server. If you're unfamiliar with Express or middleware, just know that the handleRender function will be called every time the server receives a request.
`server.js`
@@ -79,11 +79,11 @@ app.listen(port);
对于每次请求，我们首先需要做的是创建一个 `ServerStyleSheets`。
-当渲染的时候，我们将我们的根部组件，`App`，包装在一个 [`StylesProvider`](/styles/api/#stylesprovider) 和 [`ThemeProvider`](/styles/api/#themeprovider) 中，这样组件树中的所有组件都可以使用撰写的样式设置和 `theme`。
+When rendering, we will wrap `App`, the root component, inside a [`StylesProvider`](/styles/api/#stylesprovider) and [`ThemeProvider`](/styles/api/#themeprovider) to make the style configuration and the `theme` available to all components in the component tree.
-服务器渲染的关键步骤是在我们发送到客户端**之前**渲染我们组件的初始 HTML。 我们用 [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html) 来实现此操作。
+The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client side. 我们用 [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html) 来实现此操作。
-接着，我们可以使用 `sheets.toString()` 来从我们的`表单`中得到 CSS。 我们将会了解到这是如何在我们的 `renderFullPage` 函数中传递下去的。
+We then get the CSS from the `sheets` using `sheets.toString()`. We will see how this is passed along in the `renderFullPage` function.
```jsx
import express from 'express';
@@ -105,7 +105,7 @@ function handleRender(req, res) {
),
);
- // 从我们的样式表中获取 CSS。
+ // Grab the CSS from the sheets.
const css = sheets.toString();
// 将渲染的页面送回到客户端。
@@ -125,7 +125,7 @@ app.listen(port);
### 注入组件的初始 HTML 和 CSS
-服务器端最后一个步骤则是在我们的组件初始 HTML 和 CSS 中注入一个模板，从而在客户端渲染。
+The final step on the server-side is to inject the initial component HTML and CSS into a template to be rendered on the client side.
```js
function renderFullPage(html, css) {
@@ -146,7 +146,7 @@ function renderFullPage(html, css) {
### 客户端
-客户端则是简单明了的。 我们只需要移除服务器端生成的 CSS。 让我们来看一看我们客户端的文件：
+客户端则是简单明了的。 我们只需要移除服务器端生成的 CSS。 Let's take a look at the client file:
`client.js`
@@ -185,4 +185,4 @@ ReactDOM.hydrate(<Main />, document.querySelector('#root'));
## 故障排除（Troubleshooting）
-查看我们的常见问题解答答案：[我的应用程序无法在服务器上正确地渲染](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server) 。
\ No newline at end of file
+Check out the FAQ answer: [My App doesn't render correctly on the server](/getting-started/faq/#my-app-doesnt-render-correctly-on-the-server).
\ No newline at end of file
diff --git a/docs/src/pages/guides/testing/testing-aa.md b/docs/src/pages/guides/testing/testing-aa.md
index 2b9d3268081ab6..31cf77ebae7cd2 100644
--- a/docs/src/pages/guides/testing/testing-aa.md
+++ b/docs/src/pages/guides/testing/testing-aa.md
@@ -6,37 +6,35 @@ crwdns96596:0crwdne96596:0
## crwdns96598:0crwdne96598:0
-crwdns96600:0crwdne96600:0 crwdns96602:0crwdne96602:0 crwdns96604:0crwdne96604:0
-
-crwdns96612:0crwdne96612:0[](crwdns96606:0crwdne96606:0)
+crwdns101344:0crwdne101344:0 crwdns101346:0crwdne101346:0
## crwdns96614:0crwdne96614:0
-crwdns96616:0crwdne96616:0 crwdns96618:0crwdne96618:0 crwdns96620:0crwdne96620:0 crwdns96622:0crwdne96622:0 crwdns96624:0crwdne96624:0 crwdns96626:0crwdne96626:0
+crwdns101348:0crwdne101348:0 crwdns101350:0crwdne101350:0 crwdns101352:0crwdne101352:0 crwdns101354:0crwdne101354:0 crwdns101356:0crwdne101356:0 crwdns101358:0crwdne101358:0
### crwdns96628:0crwdne96628:0
-crwdns96630:0crwdne96630:0
+crwdns101360:0crwdne101360:0
-crwdns96632:0crwdne96632:0 crwdns96634:0crwdne96634:0
+crwdns101362:0crwdne101362:0 crwdns101364:0crwdne101364:0
### crwdns96636:0crwdne96636:0
-crwdns96638:0crwdne96638:0 crwdns96640:0crwdne96640:0 crwdns96642:0crwdne96642:0 crwdns96644:0crwdne96644:0
+crwdns101366:0crwdne101366:0 crwdns101368:0crwdne101368:0 crwdns101370:0crwdne101370:0 crwdns101372:0crwdne101372:0
-crwdns96646:0crwdne96646:0 crwdns96648:0crwdne96648:0
+crwdns101374:0crwdne101374:0 crwdns101376:0crwdne101376:0
### crwdns96650:0crwdne96650:0
-crwdns96652:0crwdne96652:0 crwdns96654:0crwdne96654:0
+crwdns101378:0crwdne101378:0 crwdns101380:0crwdne101380:0
-crwdns96656:0crwdne96656:0 crwdns96658:0crwdne96658:0
+crwdns101382:0crwdne101382:0 crwdns101384:0crwdne101384:0
## crwdns96660:0crwdne96660:0
### `crwdns96662:0[options]crwdne96662:0`
-crwdns96664:0crwdne96664:0 crwdns96666:0crwdne96666:0
+crwdns101386:0crwdne101386:0 crwdns101388:0crwdne101388:0
#### crwdns96668:0crwdne96668:0
@@ -46,7 +44,7 @@ crwdns96664:0crwdne96664:0 crwdns96666:0crwdne96666:0
#### crwdns96676:0crwdne96676:0
-crwdns96678:0crwdne96678:0
+crwdns101390:0crwdne101390:0
#### crwdns96680:0crwdne96680:0
@@ -56,7 +54,7 @@ crwdns96682:0{ createMount }crwdnd96682:0{ MuiThemeProvider }crwdnd96682:0{ chil
### `crwdns96684:0[options]crwdne96684:0`
-crwdns96686:0crwdne96686:0 crwdns96688:0crwdne96688:0
+crwdns101392:0crwdne101392:0 crwdns101394:0crwdne101394:0
#### crwdns96690:0crwdne96690:0
@@ -68,7 +66,7 @@ crwdns96686:0crwdne96686:0 crwdns96688:0crwdne96688:0
#### crwdns96704:0crwdne96704:0
-crwdns96706:0crwdne96706:0
+crwdns101396:0crwdne101396:0
#### crwdns96708:0crwdne96708:0
@@ -78,7 +76,7 @@ crwdns96710:0{ createShallow }crwdne96710:0
### `crwdns96712:0[options]crwdne96712:0`
-crwdns96714:0crwdne96714:0 crwdns96716:0crwdne96716:0
+crwdns101398:0crwdne101398:0 crwdns101400:0crwdne101400:0
#### crwdns96718:0crwdne96718:0
@@ -88,7 +86,7 @@ crwdns96714:0crwdne96714:0 crwdns96716:0crwdne96716:0
#### crwdns96726:0crwdne96726:0
-crwdns96728:0crwdne96728:0
+crwdns101402:0crwdne101402:0
#### crwdns96730:0crwdne96730:0
diff --git a/docs/src/pages/guides/testing/testing-de.md b/docs/src/pages/guides/testing/testing-de.md
index c1fd0ad234b051..ac5da7954d0f0c 100644
--- a/docs/src/pages/guides/testing/testing-de.md
+++ b/docs/src/pages/guides/testing/testing-de.md
@@ -6,37 +6,35 @@ Die Beispiele in diesem Abschnitt verwenden [globale Methoden von Mocha](https:/
## Intern
-Wir nehmen Tests ernst. Wir haben **eine breite Palette** von Tests geschrieben und halten diese aktuell, sodass wir mit Vertrauen auf den Komponenten iterieren können, zum Beispiel haben sich die, von [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) zur Verfügung gestellten, visuellen Regressionstests als sehr hilfreich erwiesen. Weitere Informationen zu unseren internen Tests finden Sie in der [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
-
-Obwohl wir eine 100%ige Testabdeckung erreicht haben, empfehlen wir unseren Benutzern nicht, dasselbe zu tun. [](https://codecov.io/gh/mui-org/material-ui/branch/master)
+Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
## Benutzerraum
-Was ist mit Tests im Benutzerraum? Die Material-UI-Styling-Infrastruktur verwendet einige Hilfsfunktionen, die auf dem [enzym ](https://github.com/airbnb/enzyme) basieren, um den Prozess zu erleichtern, den wir offenlegen. Sie können sie nutzen, wenn Sie dies wünschen. We use almost exclusively full DOM rendering APIs. We encourage you to do the same especially if your components rely on custom themes. Tests using shallow rendering APIs become more brittle with the amount of provider components they require.
+What about writing tests in userspace? The Material-UI styling infrastructure uses some helper functions built on top of [enzyme](https://github.com/airbnb/enzyme) to make the process easier, which we are exposing. You can take advantage of them if you so choose. We use almost exclusively full DOM rendering APIs. We encourage you to do the same especially if your components rely on custom themes. Tests using shallow rendering APIs become more brittle with the amount of provider components they require.
### Volles DOM-Rendering
-Das vollständige DOM-Rendering ist ideal für Anwendungsfälle, in denen Komponenten vorhanden sind, die mit DOM-APIs interagieren oder den gesamten Lebenszyklus erfordern, um die Komponente vollständig zu testen (z. B. `componentDidMount` usw.).
+Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs or may require the full lifecycle in order to fully test the component (e.g., `componentDidMount` etc.).
-Die `createMount()` Funktion kann für diese Situation verwendet werden. Neben dem Einwickeln der Enzym-API bietet es eine `cleanUp` Möglichkeit.
+The `createMount()` function is provided for this situation. Aside from wrapping the enzyme API, it provides a `cleanUp` function.
### Flaches Rendering (Shallow)
-Flaches Rendering ist nützlich, um Ihre Tests auf eine Komponente als Einheit zu beschränken. Dadurch wird auch sichergestellt, dass Ihre Tests das Verhalten untergeordneter Komponenten nicht indirekt durchsetzen. Es wurde ein flaches Rendering erstellt, um Komponenten isoliert zu testen. Dies bedeutet, dass untergeordnete Implementierungsdetails wie der Kontext nicht verloren gehen.
+Shallow rendering is useful to constrain your testing to a component as a unit. This also ensures that your tests aren't indirectly asserting behavior of child components. Shallow rendering was created to test components in isolation. This means without leaking child implementation details such as the context.
-Die `createShallow()` Funktion kann für diese Situation verwendet werden. Neben dem Einwickeln der Enzym-API bietet es eine `dive` und `untilSelector` Möglichkeit.
+The `createShallow()` function can be used for this situation. Aside from wrapping the enzyme API, it provides a `dive` and `untilSelector` option.
### Als string rendern
-Das Rendern in einen String ist hilfreich, um das Verhalten der auf dem Server verwendeten Komponenten zu testen. Sie können dies nutzen, um die generierte HTML-Zeichenfolge zu bestätigen.
+Rendering to a string is useful to test the behavior of the components that are used on the server. You can take advantage of this to assert the generated HTML string.
-Die `createRender()` Funktion ist dafür ideal. Dies ist nur ein Alias für die Enzym-API, die nur wegen der Konsistenz sichtbar ist.
+The `createRender()` function is ideal for this. This is just an alias for the enzyme API, which is only exposed for consistency.
## API
### `createMount([options]) => mount`
-Generieren Sie eine erweiterte Mount-Funktion mit dem erforderlichen Kontext. Bitte beachten Sie die [Enzyme API-Dokumentation](https://airbnb.io/enzyme/docs/api/mount.html) für weitere Informationen zur `mount` Funktion.
+Generate an enhanced mount function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/mount.html) for further details on the `mount` function.
#### Argumente
@@ -46,7 +44,7 @@ Generieren Sie eine erweiterte Mount-Funktion mit dem erforderlichen Kontext. Bi
#### Rückgabewerte
-`mount` (*mount*): Die mount-Funktion.
+`mount` (*mount*): A mount function.
#### Beispiele
@@ -81,7 +79,7 @@ describe('<MyComponent />', () => {
### `createShallow([options]) => shallow`
-Generieren Sie eine erweiterte Shallow-Funktion mit dem erforderlichen Kontext. Bitte beachten Sie die [Enzyme API-Dokumentation](https://airbnb.io/enzyme/docs/api/shallow.html) für weitere Informationen zur `shallow` Funktion.
+Generate an enhanced shallow function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/shallow.html) for further details on the `shallow` function.
#### Argumente
@@ -93,7 +91,7 @@ Generieren Sie eine erweiterte Shallow-Funktion mit dem erforderlichen Kontext.
#### Rückgabewerte
-`shallow` (*shallow*): Eine shallow-Funktion.
+`shallow` (*shallow*): A shallow function.
#### Beispiele
@@ -115,7 +113,7 @@ beschreiben ('<0 />', () => {
### `createRender([options]) => render`
-Generieren Sie eine Render-zu-String-Funktion mit dem erforderlichen Kontext. Bitte beachten Sie die [Enzyme API-Dokumentation](https://airbnb.io/enzyme/docs/api/render.html) für weitere Informationen zur `render` Funktion.
+Generate a render to string function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/render.html) for further details on the `render` function.
#### Argumente
@@ -125,7 +123,7 @@ Generieren Sie eine Render-zu-String-Funktion mit dem erforderlichen Kontext. Bi
#### Rückgabewerte
-`render` (*Funktion*): Eine Render-zu-String-Funktion.
+`render` (*Function*): A render to string function.
#### Beispiele
diff --git a/docs/src/pages/guides/testing/testing-es.md b/docs/src/pages/guides/testing/testing-es.md
index e1bfaf4627cb93..5e00d06b68ebc6 100644
--- a/docs/src/pages/guides/testing/testing-es.md
+++ b/docs/src/pages/guides/testing/testing-es.md
@@ -6,9 +6,7 @@ Examples in this guide use [global methods from Mocha](https://mochajs.org/api/g
## Internal
-We take tests seriously. We have written and maintain **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about our internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
-
-While we have reached the 100% test coverage achievement, we don't encourage our users to do the same. [](https://codecov.io/gh/mui-org/material-ui/branch/master)
+Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
## Userspace
diff --git a/docs/src/pages/guides/testing/testing-fr.md b/docs/src/pages/guides/testing/testing-fr.md
index b75e0b18f60c9c..ce18e1dc712a1e 100644
--- a/docs/src/pages/guides/testing/testing-fr.md
+++ b/docs/src/pages/guides/testing/testing-fr.md
@@ -6,9 +6,7 @@ Examples in this guide use [global methods from Mocha](https://mochajs.org/api/g
## Internal
-We take tests seriously. We have written and maintain **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about our internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
-
-While we have reached the 100% test coverage achievement, we don't encourage our users to do the same. [](https://codecov.io/gh/mui-org/material-ui/branch/master)
+Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
## Userspace
diff --git a/docs/src/pages/guides/testing/testing-ja.md b/docs/src/pages/guides/testing/testing-ja.md
index 04c2c2fe22644f..d6fc8cc327ddc9 100644
--- a/docs/src/pages/guides/testing/testing-ja.md
+++ b/docs/src/pages/guides/testing/testing-ja.md
@@ -1,14 +1,12 @@
-# テスト中
+# テスト
-<p class="description">Write tests to prevent regressions and write better code.</p>
+<p class="description">テスト書いて、リグレッションを防ぎ、より良いコードを作成します。</p>
-Examples in this guide use [global methods from Mocha](https://mochajs.org/api/global.html), not [Jest](https://jestjs.io/docs/en/api).
+このガイドの例では、Mochaの[グローバルメソッドを使用しています](https://mochajs.org/api/global.html) 、[ Jestではありません](https://jestjs.io/docs/en/api) 。
## Internal
-We take tests seriously. We have written and maintain **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about our internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
-
-While we have reached the 100% test coverage achievement, we don't encourage our users to do the same. [](https://codecov.io/gh/mui-org/material-ui/branch/master)
+Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
## Userspace
diff --git a/docs/src/pages/guides/testing/testing-pt.md b/docs/src/pages/guides/testing/testing-pt.md
index 92d6c8781833b5..4ee601328d2a7a 100644
--- a/docs/src/pages/guides/testing/testing-pt.md
+++ b/docs/src/pages/guides/testing/testing-pt.md
@@ -6,37 +6,35 @@ Exemplos neste guia usam [métodos globais do Mocha](https://mochajs.org/api/glo
## Interno
-Nós levamos os testes a sério. Nós escrevemos e mantemos **uma vasta gama** de testes para que possamos iterar os componentes com confiança, por exemplo, os testes de regressão visual fornecidos por [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) provaram ser realmente úteis. Para saber mais sobre nossos testes internos, você pode dar uma olhada no [LEIA-ME](https://github.com/mui-org/material-ui/blob/master/test/README.md).
-
-Embora tenhamos atingido a conquista de 100% de cobertura de teste, não incentivamos nossos usuários a fazer o mesmo. [](https://codecov.io/gh/mui-org/material-ui/branch/master)
+Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
## Espaço do usuário
-Que tal escrever testes no espaço do usuário? A infraestrutura de estilos do Material-UI usa algumas funções auxiliares construídas sobre o [enzyme](https://github.com/airbnb/enzyme) para facilitar o processo, ao qual estamos expondo. Você pode aproveitá-los, se assim preferir. Usamos APIs de processamento de DOM quase que totalmente completas. Nós encorajamos você a fazer o mesmo, especialmente, se seus componentes dependem de temas personalizados. Testes usando APIs de renderização rasas tornam-se mais frágeis com a quantidade de componentes que necessitam.
+What about writing tests in userspace? The Material-UI styling infrastructure uses some helper functions built on top of [enzyme](https://github.com/airbnb/enzyme) to make the process easier, which we are exposing. You can take advantage of them if you so choose. We use almost exclusively full DOM rendering APIs. We encourage you to do the same especially if your components rely on custom themes. Tests using shallow rendering APIs become more brittle with the amount of provider components they require.
### Renderização completa do DOM (Full)
-A renderização total do DOM é ideal para casos em que você tem componentes que podem interagir com as APIs do DOM, ou podem exigir o ciclo de vida completo para testar completamente o componente (por exemplo, `componentDidMount` etc).
+Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs or may require the full lifecycle in order to fully test the component (e.g., `componentDidMount` etc.).
-A função `createMount ()` é fornecida para esta situação. Além de envolver enzyme API, ela fornece uma função chamada `cleanUp`.
+The `createMount()` function is provided for this situation. Aside from wrapping the enzyme API, it provides a `cleanUp` function.
### Renderização Rasa (Shallow)
-A renderização rasa é útil para restringir seu teste a um componente como uma unidade. Isso também garante que seus testes não estão adquirindo indiretamente o comportamento de componentes filhos. A renderização rasa foi criada para testar componentes isoladamente. Isso significa sem vazar detalhes de implementação de filhos, como o contexto.
+Shallow rendering is useful to constrain your testing to a component as a unit. This also ensures that your tests aren't indirectly asserting behavior of child components. Shallow rendering was created to test components in isolation. This means without leaking child implementation details such as the context.
-A função `createShallow()` pode ser utilizada para esta situação. Além de encapsular a API do enzyme, ela fornece uma opção `dive` e `untilSelector`.
+The `createShallow()` function can be used for this situation. Aside from wrapping the enzyme API, it provides a `dive` and `untilSelector` option.
### Renderizar para string
-Renderizar em uma string é útil para testar o comportamento dos componentes usados no servidor. Você pode aproveitar isso para confirmar a sequência HTML gerada.
+Rendering to a string is useful to test the behavior of the components that are used on the server. You can take advantage of this to assert the generated HTML string.
-A função `createRender()` é ideal para isso. Isso é apenas um alias para enzyme API, que é apenas exposta para consistência.
+The `createRender()` function is ideal for this. This is just an alias for the enzyme API, which is only exposed for consistency.
## API
### `createMount([options]) => mount`
-Gere uma função de montagem aprimorada com o contexto necessário. Por favor, consulte [a documentação da API enzyme ](https://airbnb.io/enzyme/docs/api/mount.html) para mais detalhes sobre a função `mount`.
+Generate an enhanced mount function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/mount.html) for further details on the `mount` function.
#### Argumentos
@@ -46,7 +44,7 @@ Gere uma função de montagem aprimorada com o contexto necessário. Por favor,
#### Retornos
-`mount` (*mount*): A função mount.
+`mount` (*mount*): A mount function.
#### Exemplos
@@ -81,7 +79,7 @@ describe('<MyComponent />', () => {
### `createShallow([options]) => shallow`
-Gere uma função superficial aprimorada com o contexto necessário. Por favor, consulte [a documentação da API enzyme ](https://airbnb.io/enzyme/docs/api/shallow.html) para mais detalhes sobre a função `shallow`.
+Generate an enhanced shallow function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/shallow.html) for further details on the `shallow` function.
#### Argumentos
@@ -93,7 +91,7 @@ Gere uma função superficial aprimorada com o contexto necessário. Por favor,
#### Retornos
-`shallow` (*shallow*): A função shallow.
+`shallow` (*shallow*): A shallow function.
#### Exemplos
@@ -115,7 +113,7 @@ describe('<MyComponent />', () => {
### `createRender([options]) => render`
-Gere uma função de render para string com o contexto necessário. Por favor, consulte [a documentação da API enzyme ](https://airbnb.io/enzyme/docs/api/render.html) para mais detalhes sobre a função `render`.
+Generate a render to string function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/render.html) for further details on the `render` function.
#### Argumentos
@@ -125,7 +123,7 @@ Gere uma função de render para string com o contexto necessário. Por favor, c
#### Retornos
-`render` (*Function*): Uma função render para string.
+`render` (*Function*): A render to string function.
#### Exemplos
diff --git a/docs/src/pages/guides/testing/testing-ru.md b/docs/src/pages/guides/testing/testing-ru.md
index b00c2fcebf4a4a..5d48a72746496d 100644
--- a/docs/src/pages/guides/testing/testing-ru.md
+++ b/docs/src/pages/guides/testing/testing-ru.md
@@ -6,9 +6,7 @@ Examples in this guide use [global methods from Mocha](https://mochajs.org/api/g
## Internal
-Мы серьезно относимся к тестам. We have written and maintain **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about our internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
-
-While we have reached the 100% test coverage achievement, we don't encourage our users to do the same. [](https://codecov.io/gh/mui-org/material-ui/branch/master)
+Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
## Userspace
diff --git a/docs/src/pages/guides/testing/testing-zh.md b/docs/src/pages/guides/testing/testing-zh.md
index b4c24166ed48a3..a36e4ea96cdd6c 100644
--- a/docs/src/pages/guides/testing/testing-zh.md
+++ b/docs/src/pages/guides/testing/testing-zh.md
@@ -6,37 +6,35 @@
## 内部
-我们十分注重测试问题。 我们已编写并且维护了**一系列的** 测试，这样一来我们可以非常自信地迭代开发组件，例如，由 [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) 提供的可视化回归测试，亲测有效。 若您想要进一步了解内部测试，您可以查看 [README](https://github.com/mui-org/material-ui/blob/master/test/README.md)。
-
-尽管我们已达到100％的测试覆盖率，但是我们不鼓励我们的用户也这样做。 [](https://codecov.io/gh/mui-org/material-ui/branch/master)
+Material-UI has a wide **a wide range** of tests so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://www.argos-ci.com/mui-org/material-ui) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui-org/material-ui/blob/master/test/README.md).
## 用户空间
-在用户空间编写测试会如何呢？ Material-UI 的样式基础架构使用构建在 [enzyme](https://github.com/airbnb/enzyme) 的一些辅助函数之上来，这样一来整个流程会更简便，而这正是我们正在开源的。 若你愿意，你可以对它们加之利用。 我们几乎只使用完整的 DOM 渲染 API。 尤其若您的组件依赖于自定义主题，我们建议您执行相同的操作。 那些使用浅层渲染 API 的测试会变得更脆弱，因为他们需要一定量的 provider 组件。
+What about writing tests in userspace? The Material-UI styling infrastructure uses some helper functions built on top of [enzyme](https://github.com/airbnb/enzyme) to make the process easier, which we are exposing. You can take advantage of them if you so choose. We use almost exclusively full DOM rendering APIs. We encourage you to do the same especially if your components rely on custom themes. Tests using shallow rendering APIs become more brittle with the amount of provider components they require.
### 完整的 DOM 渲染
-当你有组件可能会与 DOM API 产生交互，或者当为了完整测试组件而要求完整的生命周期时，用例会更趋向使用完整的 DOM 渲染（例如，`componentDidMount` 等等。）。
+Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs or may require the full lifecycle in order to fully test the component (e.g., `componentDidMount` etc.).
-针对这种情况，我们提供了 `createMount()` 函数。 除了封装 enzyme 的 API，它还提供了一个 `cleanUp` 函数。
+The `createMount()` function is provided for this situation. Aside from wrapping the enzyme API, it provides a `cleanUp` function.
### Shallow rendering（浅层渲染）
-当把测试的组件当做一个小的单元时，浅层渲染起到了很好的约束作用。 这样也确保了你的测试不会间接地断言子组件的行为。 浅层渲染的目的是单独测试组件。 也就是说子元素的具体实现，如上下文信息，不会被泄漏。
+Shallow rendering is useful to constrain your testing to a component as a unit. This also ensures that your tests aren't indirectly asserting behavior of child components. Shallow rendering was created to test components in isolation. This means without leaking child implementation details such as the context.
-`createShallow()` 函数可用于此情况。 除了包装酶API，它还提供了 `dive` 和 `untilSelector` 这两个选项。
+The `createShallow()` function can be used for this situation. Aside from wrapping the enzyme API, it provides a `dive` and `untilSelector` option.
### 渲染为字符串
-当在测试服务器组件行为时，渲染为字符串会有帮助。 你可以依此来断言所生成的 HTML 字符串。
+Rendering to a string is useful to test the behavior of the components that are used on the server. You can take advantage of this to assert the generated HTML string.
-`createRender()` 函数非常适合这种情况。 这只是 enzyme API 的一个别名，为了保持一致性，用户也可以使用。
+The `createRender()` function is ideal for this. This is just an alias for the enzyme API, which is only exposed for consistency.
## API
### `createMount([options]) => mount`
-在特定的情况下，您能够生成一个加强版的 mount 函数。 有关 `mount` 功能的更多详细信息，请参阅 [enzyme API文档](https://airbnb.io/enzyme/docs/api/mount.html)。
+Generate an enhanced mount function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/mount.html) for further details on the `mount` function.
#### 参数
@@ -46,7 +44,7 @@
#### 返回结果
-`mount` (*mount*)：一个 mount 函数。
+`mount` (*mount*): A mount function.
#### 示例
@@ -81,7 +79,7 @@ describe('<MyComponent />', () => {
### `createShallow([options]) => shallow`
-在特定的情况下，您能够生成一个加强版的浅层函数。 有关 `shallow` 函数的更多详细信息, 请参考 [enzyme API 文档 ](https://airbnb.io/enzyme/docs/api/shallow.html),
+Generate an enhanced shallow function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/shallow.html) for further details on the `shallow` function.
#### 参数
@@ -93,7 +91,7 @@ describe('<MyComponent />', () => {
#### 返回结果
-`shallow`(*shallow*)：一个浅层函数。
+`shallow` (*shallow*): A shallow function.
#### 示例
@@ -115,7 +113,7 @@ describe('<MyComponent />', () => {
### `createRender([options]) => render`
-在特定的情况下，您能够生成一个加强版的字符串函数。 若您想获取更多有关 ` mount `函数的详细信息，请参考 [enzyme API 文档 ](https://airbnb.io/enzyme/docs/api/render.html)。
+Generate a render to string function with the needed context. Please refer to the [enzyme API documentation](https://airbnb.io/enzyme/docs/api/render.html) for further details on the `render` function.
#### 参数
@@ -125,7 +123,7 @@ describe('<MyComponent />', () => {
#### 返回结果
-`render` (*Function*)：渲染到字符串函数。
+`render` (*Function*): A render to string function.
#### 示例
diff --git a/docs/src/pages/guides/typescript/typescript-aa.md b/docs/src/pages/guides/typescript/typescript-aa.md
index 67e041cb808c1f..db69b5da7100ca 100644
--- a/docs/src/pages/guides/typescript/typescript-aa.md
+++ b/docs/src/pages/guides/typescript/typescript-aa.md
@@ -4,139 +4,145 @@
crwdns96738:0crwdne96738:0 crwdns96740:0crwdne96740:0
-crwdns96742:0crwdne96742:0 crwdns96744:0crwdne96744:0
+crwdns101404:0crwdne101404:0
+
+```json
+crwdns100592:0crwdne100592:0
+```
+
+crwdns100594:0crwdne100594:0 crwdns100596:0crwdne100596:0 crwdns101406:0crwdne101406:0
## crwdns96746:0crwdne96746:0
-crwdns96748:0crwdne96748:0
+crwdns100600:0crwdne100600:0
### crwdns96750:0crwdne96750:0
-crwdns96752:0crwdne96752:0
+crwdns100602:0crwdne100602:0
```ts
-crwdns96754:0{
+crwdns100604:0{
display: 'flex',
flexDirection: 'column',
- }crwdne96754:0
-crwdns96756:0crwdne96756:0
+ }crwdne100604:0
+crwdns100606:0crwdne100606:0
```
-crwdns96758:0crwdne96758:0 crwdns96760:0crwdne96760:0
+crwdns100608:0crwdne100608:0 crwdns100610:0crwdne100610:0
```ts
-crwdns96762:0{
+crwdns100612:0{
display: 'flex',
flexDirection: 'column',
- }crwdne96762:0
+ }crwdne100612:0
```
-crwdns96764:0crwdne96764:0
+crwdns100614:0crwdne100614:0
```ts
-crwdns96766:0{ palette, spacing }crwdne96766:0
+crwdns100616:0{ palette, spacing }crwdne100616:0
```
-crwdns96768:0crwdne96768:0
+crwdns100618:0crwdne100618:0
-crwdns96770:0crwdne96770:0
+crwdns101408:0crwdne101408:0
```ts
-crwdns96772:0{
+crwdns100622:0{
display: 'flex',
flexDirection: 'column',
- }crwdnd96772:0{ palette, spacing }crwdne96772:0
+ }crwdnd100622:0{ palette, spacing }crwdne100622:0
```
-crwdns96774:0crwdne96774:0
+crwdns100624:0crwdne100624:0
### crwdns96776:0crwdne96776:0
-crwdns96778:0crwdne96778:0
+crwdns100626:0crwdne100626:0
```ts
-crwdns96780:0{
+crwdns100628:0{
minHeight: '100vh',
- }crwdnd96780:0{
+ }crwdnd100628:0{
display: 'flex',
- }crwdne96780:0
+ }crwdne100628:0
```
-crwdns96782:0crwdne96782:0 crwdns96784:0crwdne96784:0
+crwdns100630:0crwdne100630:0 crwdns100632:0crwdne100632:0
```ts
-crwdns96786:0{
+crwdns100634:0{
minHeight: '100vh',
- }crwdnd96786:0{
+ }crwdnd100634:0{
display: 'flex',
- }crwdnd96786:0{
+ }crwdnd100634:0{
minHeight: '100vh',
- }crwdnd96786:0{
+ }crwdnd100634:0{
display: 'flex',
- }crwdne96786:0
+ }crwdne100634:0
```
### crwdns96788:0crwdne96788:0
-crwdns96790:0crwdne96790:0
+crwdns100636:0crwdne100636:0
```ts
-crwdns96792:0crwdne96792:0 crwdns96794:0crwdne96794:0 crwdns96796:0crwdne96796:0 crwdns96798:0crwdne96798:0
+crwdns100638:0crwdne100638:0 crwdns96806:0crwdne96806:0 crwdns96808:0crwdne96808:0 crwdns100640:0crwdne100640:0
```
-crwdns96800:0%27crwdne96800:0 crwdns96802:0crwdne96802:0
+crwdns100642:0%27crwdne100642:0 crwdns100644:0crwdne100644:0
```ts
-crwdns96804:0{ WithStyles, createStyles }crwdne96804:0 crwdns96806:0crwdne96806:0 crwdns96808:0crwdne96808:0 crwdns96810:0crwdne96810:0
+crwdns100646:0{ WithStyles, createStyles }crwdne100646:0 crwdns100648:0crwdne100648:0 crwdns100650:0crwdne100650:0 crwdns100652:0crwdne100652:0
```
### crwdns96812:0crwdne96812:0
-crwdns96814:0crwdne96814:0
+crwdns100654:0crwdne100654:0
```tsx
-crwdns96816:0{type}crwdnd96816:0{color}crwdnd96816:0{classes}crwdnd96816:0{text}crwdnd96816:0{type}crwdnd96816:0{color}crwdnd96816:0{classes}crwdnd96816:0{text}crwdne96816:0
+crwdns100656:0{type}crwdnd100656:0{color}crwdnd100656:0{classes}crwdnd100656:0{text}crwdnd100656:0{type}crwdnd100656:0{color}crwdnd100656:0{classes}crwdnd100656:0{text}crwdne100656:0
```
-crwdns96818:0crwdne96818:0
+crwdns100658:0crwdne100658:0
## crwdns96820:0crwdne96820:0
-crwdns96822:0crwdne96822:0
+crwdns100660:0crwdne100660:0
-crwdns96824:0crwdne96824:0
+crwdns100662:0crwdne100662:0
```ts
-crwdns96826:0{ Theme }crwdnd96826:0{ Breakpoint }crwdne96826:0
+crwdns100664:0{ Theme }crwdnd100664:0{ Breakpoint }crwdne100664:0
```
-crwdns96828:0crwdne96828:0
+crwdns100666:0crwdne100666:0
-crwdns96830:0crwdne96830:0
+crwdns100668:0crwdne100668:0
```ts
-crwdns96832:0{ ThemeOptions }crwdnd96832:0{
+crwdns100670:0{ ThemeOptions }crwdnd100670:0{
width: 225,
breakpoint: 'lg',
- }crwdne96832:0
+ }crwdne100670:0
```
-crwdns96834:0crwdne96834:0
+crwdns100672:0crwdne100672:0
```ts
-crwdns96836:0{ breakpoint: 'md' }crwdne96836:0
+crwdns100674:0{ breakpoint: 'md' }crwdne100674:0
```
## crwdns96838:0crwdne96838:0
-crwdns96840:0crwdne96840:0 crwdns96842:0crwdne96842:0 crwdns96844:0crwdne96844:0
+crwdns100676:0crwdne100676:0 crwdns100678:0crwdne100678:0 crwdns100680:0crwdne100680:0
-crwdns96846:0crwdne96846:0 crwdns96848:0crwdne96848:0 crwdns96850:0crwdne96850:0
+crwdns100682:0crwdne100682:0 crwdns100684:0crwdne100684:0 crwdns100686:0crwdne100686:0
## crwdns96852:0crwdne96852:0
-crwdns96854:0crwdne96854:0 crwdns96856:0crwdne96856:0
+crwdns100688:0crwdne100688:0 crwdns100690:0crwdne100690:0
-crwdns96858:0crwdne96858:0 crwdns96860:0crwdne96860:0 crwdns96862:0crwdne96862:0
+crwdns100692:0crwdne100692:0 crwdns100694:0crwdne100694:0 crwdns100696:0crwdne100696:0
-crwdns96864:0crwdne96864:0 crwdns96866:0crwdne96866:0 crwdns96868:0crwdne96868:0 crwdns96870:0crwdne96870:0
\ No newline at end of file
+crwdns101410:0crwdne101410:0 crwdns100700:0crwdne100700:0 crwdns100702:0crwdne100702:0 crwdns101412:0crwdne101412:0
\ No newline at end of file
diff --git a/docs/src/pages/guides/typescript/typescript-de.md b/docs/src/pages/guides/typescript/typescript-de.md
index 6192757b357655..393d85c603b6f3 100644
--- a/docs/src/pages/guides/typescript/typescript-de.md
+++ b/docs/src/pages/guides/typescript/typescript-de.md
@@ -4,15 +4,28 @@
Schauen Sie sich das [Create React App mit TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) Beispiel an. Eine Mindestversion von TypeScript 2.8 ist erforderlich.
-Unsere Type Definitionen werden mit der folgenden [tsconfig.json](https://github.com/mui-org/material-ui/tree/master/tsconfig.json) getestet. Verwendung einer weniger strengen `tsconfig.json` oder das Weglassen einiger Bibliotheken kann zu Fehlern führen.
+In order for types to work, you have to at least have the following options enabled in your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "lib": ["es6", "dom"],
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true
+ }
+}
+```
+
+The strict mode options are the same that are required for every types package published in the `@types/` namespace. Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors. To get the best type experience with the types we recommend setting `"strict": true`.
## Verwendung von `withStyles`
-Verwenden von `withStyles` in TypeScript kann es etwas kniffelig sein, aber es gibt einige Hilfsprogramme, um die Erfahrung so schmerzlos wie möglich zu gestalten.
+Using `withStyles` in TypeScript can be a little tricky, but there are some utilities to make the experience as painless as possible.
### Verwenden von `CreateStyles`, um die Typerweiterung zu besiegen
-Eine häufige Quelle der Verwirrung ist die [Erweiterung der Typen](https://mariusschulz.com/blog/typescript-2-1-literal-type-widening) von TypeScript, was dazu führt, dass dieses Beispiel nicht wie erwartet funktioniert:
+A frequent source of confusion is TypeScript's [type widening](https://mariusschulz.com/blog/typescript-2-1-literal-type-widening), which causes this example not to work as expected:
```ts
const styles = {
@@ -24,13 +37,11 @@ const styles = {
withStyles(styles);
// ^^^^^^
-// Typen der Eigenschaft 'flexDirection' sind nicht kompatibel.
-// Der Typ 'string' kann dem Typ '"-moz-initial" | "inherit" | "initial" |
-// "revert" | "unset" | "column" | "column-reverse" | "row"...'
-// nicht zugewiesen werden.
+// Types of property 'flexDirection' are incompatible.
+// Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row"...'.
```
-Das Problem ist, dass der Typ der `flexDirection` als `string` interpretiert wird, was zu ungenau ist. Um dies zu beheben, können Sie das Styles-Objekt direkt an `withStyles`: übergeben:
+The problem is that the type of the `flexDirection` property is inferred as `string`, which is too arbitrary. To fix this, you can pass the styles object directly to `withStyles`:
```ts
withStyles({
@@ -41,7 +52,7 @@ withStyles({
});
```
-Wenn Sie jedoch versuchen, die Stile von dem Thema abhängig zu machen, macht Ihnen die Typenerweiterung wieder eine Strich durch die Rechnung:
+However type widening rears its ugly head once more if you try to make the styles depend on the theme:
```ts
withStyles(({ palette, spacing }) => ({
@@ -55,9 +66,9 @@ withStyles(({ palette, spacing }) => ({
}));
```
-Dies liegt daran, dass TypeScript [die Rückgabetypen von Funktionsausdrücken ](https://github.com/Microsoft/TypeScript/issues/241) erweitert.
+This is because TypeScript [widens the return types of function expressions](https://github.com/Microsoft/TypeScript/issues/241).
-Aus diesem Grund empfehlen wir die Verwendung unserer `createStyles` Hilfsfunktion zum Erstellen Ihres Stilregelobjekts:
+Because of this, using the `createStyles` helper function to construct your style rules object is recommended:
```ts
// Non-dependent styles
@@ -80,11 +91,11 @@ const styles = ({ palette, spacing }: Theme) => createStyles({
});
```
-`createStyles` ist nur die Identitätsfunktion; es "tut" nichts zur Laufzeit, es hilft nur die Typen zur Kompilierzeit festzulegen.
+`createStyles` is just the identity function; it doesn't "do anything" at runtime, just helps guide type inference at compile time.
### Media-Anfragen
-`withStyles` erlaubt ein Styles-Objekt mit Top-Level-Media-Abfragen wie:
+`withStyles` allows a styles object with top level media-queries like so:
```ts
const styles = createStyles({
@@ -99,11 +110,11 @@ const styles = createStyles({
});
```
-Damit diese Stile an TypeScript übergeben werden können, müssen die Definitionen hinsichtlich der Namen der CSS-Klassen und der tatsächlichen CSS-Eigenschaftsnamen mehrdeutig sein. Aus diesem Grund sollten Klassennamen, die den CSS-Eigenschaften entsprechen, vermieden werden.
+However to allow these styles to pass TypeScript, the definitions have to be ambiguous concerning names for CSS classes and actual CSS property names. Due to this class names that are equal to CSS properties should be avoided.
```ts
-// Fehler, da TypeScript denkte, dass `@media (min-width: 960px)` ein Klassen-
-// name und `content` eine css Eigenschaft ist
+// error because TypeScript thinks `@media (min-width: 960px)` is a class name
+// and `content` is the css property
const ambiguousStyles = createStyles({
content: {
minHeight: '100vh',
@@ -115,7 +126,7 @@ const ambiguousStyles = createStyles({
},
});
-// Dies funktioniert
+// works just fine
const ambiguousStyles = createStyles({
contentClass: {
minHeight: '100vh',
@@ -130,7 +141,7 @@ const ambiguousStyles = createStyles({
### Erweitern Sie Ihre Eigenschaften mit `WithStyles`
-Da, wenn eine Komponente mit `withStyles(styles)` dekoriert ist, eine spezielle `classes` Eigenschaft injiziert bekommt, möchten Sie die Eigenschaften entsprechend definieren:
+Since a component decorated with `withStyles(styles)` gets a special `classes` prop injected, you will want to define its props accordingly:
```ts
const styles = (theme: Theme) => createStyles({
@@ -140,10 +151,10 @@ const styles = (theme: Theme) => createStyles({
});
interface Props {
- // Nicht style Eigenschaften
+ // non-style props
foo: number;
bar: boolean;
- // Injizierte Style Eigenschaften
+ // injected style props
classes: {
root: string;
paper: string;
@@ -152,7 +163,7 @@ interface Props {
}
```
-Dies ist jedoch nicht sehr [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) weil Sie die Klassennamen (`'root'`, `'paper'`, `'button'`, ...) an zwei verschiedenen Stellen pflegen müssen. Wir stellen einen Typoperator `WithStyles` bereit, um damit zu helfen. So kannst du einfach schreiben:
+However this isn't very [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) because it requires you to maintain the class names (`'root'`, `'paper'`, `'button'`, ...) in two different places. We provide a type operator `WithStyles` to help with this, so that you can just write:
```ts
import { WithStyles, createStyles } from '@material-ui/core';
@@ -171,7 +182,7 @@ interface Props extends WithStyles<typeof styles> {
### Komponenten dekorieren
-Anwenden von `withStyles(styles)` als Funktion funktioniert wie erwartet:
+Applying `withStyles(styles)` as a function works as expected:
```tsx
const DecoratedSFC = withStyles(styles)(({ text, type, color, classes }: Props) => (
@@ -194,13 +205,13 @@ const DecoratedClass = withStyles(styles)(
);
```
-Aufgrund einer [aktuellen Einschränkung der TypeScript-Dekorateure](https://github.com/Microsoft/TypeScript/issues/4881), kann `withStyles(styles)` leider nicht als Dekorator in TypeScript verwendet werden.
+Unfortunately due to a [current limitation of TypeScript decorators](https://github.com/Microsoft/TypeScript/issues/4881), `withStyles(styles)` can't be used as a decorator in TypeScript.
## Anpassung des `Theme`
-Beim Hinzufügen benutzerdefinierter Eigenschaften zum `Theme` können Sie es weiterhin in stark typisierter Weise verwenden, indem Sie die [Modulerweiterung von TypeScript](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) nutzen.
+When adding custom properties to the `Theme`, you may continue to use it in a strongly typed way by exploiting [TypeScript's module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation).
-Im folgenden Beispiel wird eine `appDrawer` Eigenschaft hinzugefügt, welche in das von `material-ui` exportierte Theme eingefügt wird:
+The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`:
```ts
import { Theme } from '@material-ui/core/styles/createMuiTheme';
@@ -223,7 +234,7 @@ declare module '@material-ui/core/styles/createMuiTheme' {
}
```
-Und eine benutzerdefinierte Theme Generierung mit zusätzlichen Standardoptionen:
+And a custom theme factory with additional defaulted options:
**./styles/createMyTheme**:
@@ -241,7 +252,7 @@ export default function createMyTheme(options: ThemeOptions) {
}
```
-Dies könnte wie folgt verwendet werden:
+This could be used like:
```ts
import createMyTheme from './styles/createMyTheme';
@@ -251,9 +262,9 @@ const theme = createMyTheme({ appDrawer: { breakpoint: 'md' }});
## Verwendung der `component` Eigenschaft
-Mit der Material-UI können Sie die root Komponente einer Komponente durch die `component` Eigenschaft ersetzen. Zum Beispiel ist die Stamm Komponente eines `Button` durch einen React Router `Link` ersetzt werden und alle zusätzlichen Eigenschaften, die an den `Button` übergeben werden, wie `to`, wird auf die `Link` Komponente verteilt. Für ein Code Beispiel für den `Button ` und `react-router-dom` schau dir [diese Demo an](/components/buttons/#third-party-routing-library).
+Material-UI allows you to replace a component's root node via a `component` property. For example, a `Button`'s root node can be replaced with a React Router `Link`, and any additional props that are passed to `Button`, such as `to`, will be spread to the `Link` component. For a code example concerning `Button` and `react-router-dom` checkout [this Button demo](/components/buttons/#third-party-routing-library).
-Nicht jede Komponente unterstützt vollständig jeden übergebenen Komponententyp. Wenn Sie auf eine Komponente stoßen, die ihre `component` Eigenschaft ablehnt in TypeScript, öffnen Sie bitte eine Frage in Github. Es besteht ein ständiger Aufwand, um dies zu beheben, indem Komponentenstützen generisch gemacht werden.
+Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic.
## Handling `value` and event handlers
@@ -261,4 +272,4 @@ Many components concerned with user input offer a `value` prop or event handlers
However, that type cannot be verified at compile time in situations where it depends on the component's children e.g. for `Select` or `RadioGroup`. This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
-Our demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. We want our library types to be strict by default and loose via opt-in.
\ No newline at end of file
+The demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. The library types are be strict by default and loose via opt-in.
\ No newline at end of file
diff --git a/docs/src/pages/guides/typescript/typescript-es.md b/docs/src/pages/guides/typescript/typescript-es.md
index 225d5827ace3fa..8bd6021082e766 100644
--- a/docs/src/pages/guides/typescript/typescript-es.md
+++ b/docs/src/pages/guides/typescript/typescript-es.md
@@ -4,7 +4,20 @@
Have a look at the [Create React App with TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) example. A minimum version of TypeScript 2.8 is required.
-Our definitions are tested with the following [tsconfig.json](https://github.com/mui-org/material-ui/tree/master/tsconfig.json). Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors.
+In order for types to work, you have to at least have the following options enabled in your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "lib": ["es6", "dom"],
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true
+ }
+}
+```
+
+The strict mode options are the same that are required for every types package published in the `@types/` namespace. Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors. To get the best type experience with the types we recommend setting `"strict": true`.
## Usage of `withStyles`
@@ -55,7 +68,7 @@ withStyles(({ palette, spacing }) => ({
This is because TypeScript [widens the return types of function expressions](https://github.com/Microsoft/TypeScript/issues/241).
-Because of this, we recommend using our `createStyles` helper function to construct your style rules object:
+Because of this, using the `createStyles` helper function to construct your style rules object is recommended:
```ts
// Non-dependent styles
@@ -259,4 +272,4 @@ Many components concerned with user input offer a `value` prop or event handlers
However, that type cannot be verified at compile time in situations where it depends on the component's children e.g. for `Select` or `RadioGroup`. This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
-Our demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. We want our library types to be strict by default and loose via opt-in.
\ No newline at end of file
+The demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. The library types are be strict by default and loose via opt-in.
\ No newline at end of file
diff --git a/docs/src/pages/guides/typescript/typescript-fr.md b/docs/src/pages/guides/typescript/typescript-fr.md
index 201c2fba3eb255..323bee0744a315 100644
--- a/docs/src/pages/guides/typescript/typescript-fr.md
+++ b/docs/src/pages/guides/typescript/typescript-fr.md
@@ -4,7 +4,20 @@
Have a look at the [Create React App with TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) example. Une version minimale de TypeScript 2.8 est requise.
-Our definitions are tested with the following [tsconfig.json](https://github.com/mui-org/material-ui/tree/master/tsconfig.json). Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors.
+In order for types to work, you have to at least have the following options enabled in your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "lib": ["es6", "dom"],
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true
+ }
+}
+```
+
+The strict mode options are the same that are required for every types package published in the `@types/` namespace. Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors. To get the best type experience with the types we recommend setting `"strict": true`.
## Usage of `withStyles`
@@ -55,7 +68,7 @@ withStyles(({ palette, spacing }) => ({
This is because TypeScript [widens the return types of function expressions](https://github.com/Microsoft/TypeScript/issues/241).
-Because of this, we recommend using our `createStyles` helper function to construct your style rules object:
+Because of this, using the `createStyles` helper function to construct your style rules object is recommended:
```ts
// Non-dependent styles
@@ -259,4 +272,4 @@ Many components concerned with user input offer a `value` prop or event handlers
However, that type cannot be verified at compile time in situations where it depends on the component's children e.g. for `Select` or `RadioGroup`. This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
-Our demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. We want our library types to be strict by default and loose via opt-in.
\ No newline at end of file
+The demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. The library types are be strict by default and loose via opt-in.
\ No newline at end of file
diff --git a/docs/src/pages/guides/typescript/typescript-ja.md b/docs/src/pages/guides/typescript/typescript-ja.md
index 923a4291f69df5..22c63a5c2f0053 100644
--- a/docs/src/pages/guides/typescript/typescript-ja.md
+++ b/docs/src/pages/guides/typescript/typescript-ja.md
@@ -4,7 +4,20 @@
[Create React AppでのTypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript)の使用例を参考にしてください。 TypeScript 2.8以上が必要です。
-私たちの定義は、こちらの[tsconfig.json](https://github.com/mui-org/material-ui/tree/master/tsconfig.json) でテストしています。 あまり厳密でない`tsconfig.json`を使ったり、一部のライブラリを省略した場合、エラーが発生する可能性があります。
+In order for types to work, you have to at least have the following options enabled in your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "lib": ["es6", "dom"],
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true
+ }
+}
+```
+
+Strictモードのオプションは、すべてのタイプのパッケージに必要なものと同じです。 は`@types/`namespaceで発行されます。 あまり厳密でない`tsconfig.json`を使ったり、一部のライブラリを省略した場合、エラーが発生する可能性があります。 To get the best type experience with the types we recommend setting `"strict": true`.
## `withStyles`の使い方
@@ -39,7 +52,7 @@ withStyles({
});
```
-However type widening rears its ugly head once more if you try to make the styles depend on the theme:
+ただし、スタイルをテーマに依存させようとすると、タイプを広げるとい頭が再び現れます：
```ts
withStyles(({ palette, spacing }) => ({
@@ -53,9 +66,9 @@ withStyles(({ palette, spacing }) => ({
}));
```
-This is because TypeScript [widens the return types of function expressions](https://github.com/Microsoft/TypeScript/issues/241).
+これは、TypeScript [が関数式の戻り値の型を広げるためです。 ](https://github.com/Microsoft/TypeScript/issues/241)
-Because of this, we recommend using our `createStyles` helper function to construct your style rules object:
+Because of this, using the `createStyles` helper function to construct your style rules object is recommended:
```ts
// Non-dependent styles
@@ -78,11 +91,11 @@ const styles = ({ palette, spacing }: Theme) => createStyles({
});
```
-`createStyles` is just the identity function; it doesn't "do anything" at runtime, just helps guide type inference at compile time.
+`createStyles`は、単なるidentity関数です。実行時に「何でもする」するのではなく、コンパイル時に型推論をガイドするのに役立つだけです。
-### Media queries
+### メディアクエリ
-`withStyles` allows a styles object with top level media-queries like so:
+`withStyles`では、次のような最上位のメディアクエリを持つスタイルオブジェクトを使用できます。
```ts
const styles = createStyles({
@@ -97,7 +110,7 @@ const styles = createStyles({
});
```
-However to allow these styles to pass TypeScript, the definitions have to be ambiguous concerning names for CSS classes and actual CSS property names. Due to this class names that are equal to CSS properties should be avoided.
+ただし、これらのスタイルがTypeScriptを渡せるようにするには、CSSクラスの名前と実際のCSSプロパティ名に関して定義があいまいでなければなりません。 このため、CSSプロパティと同じクラス名は使用しないでください。
```ts
// error because TypeScript thinks `@media (min-width: 960px)` is a class name
@@ -126,9 +139,9 @@ const ambiguousStyles = createStyles({
});
```
-### Augmenting your props using `WithStyles`
+### ` WithStylesを使用して propsを増強する`
-Since a component decorated with `withStyles(styles)` gets a special `classes` prop injected, you will want to define its props accordingly:
+`withStyles(styles) で装飾されたコンポーネント`には、特別な`classes` プロパティが挿入されるため、それに応じてプロパティを定義する必要があります。
```ts
const styles = (theme: Theme) => createStyles({
@@ -150,7 +163,7 @@ interface Props {
}
```
-However this isn't very [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) because it requires you to maintain the class names (`'root'`, `'paper'`, `'button'`, ...) in two different places. We provide a type operator `WithStyles` to help with this, so that you can just write:
+しかし、これはあまり[DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)ではありません。なぜなら、クラス名(`'root'`、`'paper'`、`'button'`、...。) を二つの異なる場所に維持する必要があるからです。 このために、型演算子`WithStyles`を使用して、次のように記述します。
```ts
import { WithStyles, createStyles } from '@material-ui/core';
@@ -167,9 +180,9 @@ interface Props extends WithStyles<typeof styles> {
}
```
-### Decorating components
+### コンポーネントの装飾
-Applying `withStyles(styles)` as a function works as expected:
+` withStyles（styles）`の適用で、関数が期待どおりに機能する：
```tsx
const DecoratedSFC = withStyles(styles)(({ text, type, color, classes }: Props) => (
@@ -192,13 +205,13 @@ const DecoratedClass = withStyles(styles)(
);
```
-Unfortunately due to a [current limitation of TypeScript decorators](https://github.com/Microsoft/TypeScript/issues/4881), `withStyles(styles)` can't be used as a decorator in TypeScript.
+残念ながら、[TypeScript decoratorsの現在の制限](https://github.com/Microsoft/TypeScript/issues/4881) により、`withStyles(スタイル)`はTypeScriptのデコレータとして使用できません。
-## Customization of `Theme`
+## `テーマのカスタマイズ`
-When adding custom properties to the `Theme`, you may continue to use it in a strongly typed way by exploiting [TypeScript's module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation).
+カスタムプロパティを`テーマ`に追加する場合、[TypeScriptのモジュール拡張](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)を利用して、厳密に型指定した方法で引き続き使用できます。
-The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`:
+次の例では、`material-ui`によって書き出されたプロパティに合成される`appDrawer`プロパティを追加します。
```ts
import { Theme } from '@material-ui/core/styles/createMuiTheme';
@@ -221,7 +234,7 @@ declare module '@material-ui/core/styles/createMuiTheme' {
}
```
-And a custom theme factory with additional defaulted options:
+カスタムテーマファクトリには、追加の既定のオプションがあります。
**./styles/createMyTheme**:
@@ -239,7 +252,7 @@ export default function createMyTheme(options: ThemeOptions) {
}
```
-This could be used like:
+これは次のように使用できます。
```ts
import createMyTheme from './styles/createMyTheme';
@@ -247,16 +260,16 @@ import createMyTheme from './styles/createMyTheme';
const theme = createMyTheme({ appDrawer: { breakpoint: 'md' }});
```
-## Usage of `component` property
+## `コンポーネントの`プロパティの使用法
-Material-UI allows you to replace a component's root node via a `component` property. For example, a `Button`'s root node can be replaced with a React Router `Link`, and any additional props that are passed to `Button`, such as `to`, will be spread to the `Link` component. For a code example concerning `Button` and `react-router-dom` checkout [this Button demo](/components/buttons/#third-party-routing-library).
+Material-UIでは、`component`プロパティを使用してコンポーネントのルートノードを置き換えることができます。 たとえば、`Button`のルートノードはReact Router`Link`に置き換えることができ、`Button`に渡される`to`などの追加のプロップはすべて`Link`コンポーネントに分散されます。 `Button`と`react-router-dom`checkoutに関するコード例は、[このボタンのデモ](/components/buttons/#third-party-routing-library)を参照してください。
-Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic.
+すべてのコンポーネントが、渡すコンポーネントタイプを完全にサポートしているわけではありません。 次のような問題が発生した場合 TypeScriptで `component`プロパティを拒否するコンポーネントの問題を開いてください。 コンポーネントプロップを汎用化することで、この問題を解決するための取り組みが続けられています。
-## Handling `value` and event handlers
+## `value` およびイベントハンドラの処理
-Many components concerned with user input offer a `value` prop or event handlers which include the current `value`. In most situations that `value` is only handled within React which allows it be of any type, such as objects or arrays.
+ユーザ入力に関連する多くのコンポーネントは、現在の `value`を含む`value`プロパティまたはイベントハンドラを提供します。 ほとんどの場合、`値`のみが処理されます。 オブジェクトや配列などの任意のタイプを使用できます。
-However, that type cannot be verified at compile time in situations where it depends on the component's children e.g. for `Select` or `RadioGroup`. This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
+ただし、そのタイプは、たとえば`Select`または`RadioGroup`など、コンポーネントの子に依存する状況では、コンパイル時に検証できません。 つまり、soundest オプションは、それを`unknown`として入力し、その型をどのように絞り込むかを開発者に決定させることです。 [同じ理由で` event.target` は Reactでは一般的ではないため](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682)これらの場合にジェネリック タイプを使用する可能性は提供しません。
-Our demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. We want our library types to be strict by default and loose via opt-in.
\ No newline at end of file
+The demos include typed variants that use type casting. すべての型が単一のファイル内にあり、非常に基本的であるため、これは許容できるトレードオフです。 同じトレードオフが受け入れられるかどうかは、自分で判断する必要があります。 The library types are be strict by default and loose via opt-in.
\ No newline at end of file
diff --git a/docs/src/pages/guides/typescript/typescript-pt.md b/docs/src/pages/guides/typescript/typescript-pt.md
index 7829e3ddbf4473..1595dc6ad9e27e 100644
--- a/docs/src/pages/guides/typescript/typescript-pt.md
+++ b/docs/src/pages/guides/typescript/typescript-pt.md
@@ -4,15 +4,28 @@
Dê uma olhada no exemplo [Create React App com TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript). É necessário estar no mínimo com a versão 2.8 do TypeScript.
-Nossas definições são testadas com a seguinte configuração [tsconfig.json](https://github.com/mui-org/material-ui/tree/master/tsconfig.json). Usando uma `tsconfig.json` menos rigorosa ou omitindo algumas das bibliotecas podem causar erros.
+In order for types to work, you have to at least have the following options enabled in your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "lib": ["es6", "dom"],
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true
+ }
+}
+```
+
+The strict mode options are the same that are required for every types package published in the `@types/` namespace. Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors. To get the best type experience with the types we recommend setting `"strict": true`.
## Uso de `withStyles`
-Utilizando `withStyles` no TypeScript pode ser um pouco complicado, mas há alguns utilitários que tornam a experiência menos dolorosa possível.
+Using `withStyles` in TypeScript can be a little tricky, but there are some utilities to make the experience as painless as possible.
### Utilizando `createStyles` para evitar a ampliação de tipo (type widening)
-Uma fonte frequente de confusão é a ampliação de tipos ([type widening](https://mariusschulz.com/blog/typescript-2-1-literal-type-widening)) do TypeScript, que faz com que este exemplo não funcione como o esperado:
+A frequent source of confusion is TypeScript's [type widening](https://mariusschulz.com/blog/typescript-2-1-literal-type-widening), which causes this example not to work as expected:
```ts
const styles = {
@@ -24,11 +37,11 @@ const styles = {
withStyles(styles);
// ^^^^^^
-// Os tipos de propriedade 'flexDirection' são incompatíveis.
-// Tipo 'string' não pode ser atribuído para o tipo '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row"...'.
+// Types of property 'flexDirection' are incompatible.
+// Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row"...'.
```
-O problema é que o tipo da propriedade `flexDirection` é convertido como `string`, no qual é o tipo mais conveniente. Para corrigir isto, você pode passar o objeto de estilos diretamente para `withStyles`:
+The problem is that the type of the `flexDirection` property is inferred as `string`, which is too arbitrary. To fix this, you can pass the styles object directly to `withStyles`:
```ts
withStyles({
@@ -39,7 +52,7 @@ withStyles({
});
```
-No entanto, a ampliação de tipos continuará a causar dores de cabeça se você tentar fazer com que os estilos dependam do tema:
+However type widening rears its ugly head once more if you try to make the styles depend on the theme:
```ts
withStyles(({ palette, spacing }) => ({
@@ -53,12 +66,12 @@ withStyles(({ palette, spacing }) => ({
}));
```
-Isso ocorre pois o TypeScript [amplia o retorno de tipos de expressões de função](https://github.com/Microsoft/TypeScript/issues/241).
+This is because TypeScript [widens the return types of function expressions](https://github.com/Microsoft/TypeScript/issues/241).
-Por causa disto, nós recomendamos utilizar nossa função auxiliar `createStyles` para construir seu objeto de regras de estilo:
+Because of this, using the `createStyles` helper function to construct your style rules object is recommended:
```ts
-// Estilos sem dependência
+// Non-dependent styles
const styles = createStyles({
root: {
display: 'flex',
@@ -66,7 +79,7 @@ const styles = createStyles({
},
});
-// Estilos com dependência do tema
+// Theme-dependent styles
const styles = ({ palette, spacing }: Theme) => createStyles({
root: {
display: 'flex',
@@ -78,11 +91,11 @@ const styles = ({ palette, spacing }: Theme) => createStyles({
});
```
-`createStyles` é apenas a identidade da função; ela não "faz nada" em tempo de execução, apenas auxilia a inferência de tipos em tempo de compilação.
+`createStyles` is just the identity function; it doesn't "do anything" at runtime, just helps guide type inference at compile time.
### Consultas de Mídia (Media queries)
-`withStyles` permite utilizar um objeto de estilos de nível superior com consultas de mídia assim:
+`withStyles` allows a styles object with top level media-queries like so:
```ts
const styles = createStyles({
@@ -97,11 +110,11 @@ const styles = createStyles({
});
```
-No entanto, para permitir que estes estilos passem pelo TypeScript, as definições devem ser ambíguas em relação aos nomes de classes CSS e nomes de propriedades CSS. Devido a isso, evite utilizar nomes de classes iguais a propriedades do CSS.
+However to allow these styles to pass TypeScript, the definitions have to be ambiguous concerning names for CSS classes and actual CSS property names. Due to this class names that are equal to CSS properties should be avoided.
```ts
-// erro porque TypeScript acha que `@media (min-width: 960px)` é o nome da classe
-// e `content` é a propriedade css
+// error because TypeScript thinks `@media (min-width: 960px)` is a class name
+// and `content` is the css property
const ambiguousStyles = createStyles({
content: {
minHeight: '100vh',
@@ -113,7 +126,7 @@ const ambiguousStyles = createStyles({
},
});
-// funciona corretamente
+// works just fine
const ambiguousStyles = createStyles({
contentClass: {
minHeight: '100vh',
@@ -128,7 +141,7 @@ const ambiguousStyles = createStyles({
### Incrementando suas propriedades utilizando `WithStyles`
-Desde que um componente seja decorado com `withStyles(styles)`, ele recebe uma propriedade injetada `classes`, você pode querer definir estas propriedades de acordo com:
+Since a component decorated with `withStyles(styles)` gets a special `classes` prop injected, you will want to define its props accordingly:
```ts
const styles = (theme: Theme) => createStyles({
@@ -150,7 +163,7 @@ interface Props {
}
```
-No entanto isto não é muito elegante de acordo com o princípio de software [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), porque requer que você mantenha os nomes das classes (`'root'`, `'paper'`, `'button'`, ...) em dois locais diferentes. Nós fornecemos um operador de tipo `WithStyles` para ajudar com isso, assim você pode apenas escrever:
+However this isn't very [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) because it requires you to maintain the class names (`'root'`, `'paper'`, `'button'`, ...) in two different places. We provide a type operator `WithStyles` to help with this, so that you can just write:
```ts
import { WithStyles, createStyles } from '@material-ui/core';
@@ -169,7 +182,7 @@ interface Props extends WithStyles<typeof styles> {
### Decorando componentes
-Aplicando `withStyles(styles)` como uma função, nos dá o resultado como o esperado:
+Applying `withStyles(styles)` as a function works as expected:
```tsx
const DecoratedSFC = withStyles(styles)(({ text, type, color, classes }: Props) => (
@@ -192,13 +205,13 @@ const DecoratedClass = withStyles(styles)(
);
```
-Infelizmente devido a uma [limitação atual dos decoradores do TypeScript](https://github.com/Microsoft/TypeScript/issues/4881), `withStyles(styles)` não pode ser usado como decorador no TypeScript.
+Unfortunately due to a [current limitation of TypeScript decorators](https://github.com/Microsoft/TypeScript/issues/4881), `withStyles(styles)` can't be used as a decorator in TypeScript.
## Customização de tema
-Ao adicionar propriedades customizadas ao `Theme`, você pode continuar a utilizá-lo de uma maneira fortemente tipada, explorando o conceito de extensão de módulos do TypeScript ([TypeScript's module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)).
+When adding custom properties to the `Theme`, you may continue to use it in a strongly typed way by exploiting [TypeScript's module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation).
-O exemplo a seguir adiciona uma propriedade `appDrawer` que é mesclada na que foi exportada pelo `material-ui`:
+The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`:
```ts
import { Theme } from '@material-ui/core/styles/createMuiTheme';
@@ -211,7 +224,7 @@ declare module '@material-ui/core/styles/createMuiTheme' {
breakpoint: Breakpoint
}
}
- // permitir configuração usando `createMuiTheme`
+ // allow configuration using `createMuiTheme`
interface ThemeOptions {
appDrawer?: {
width?: React.CSSProperties['width']
@@ -221,7 +234,7 @@ declare module '@material-ui/core/styles/createMuiTheme' {
}
```
-E uma fábrica customizada de temas com opções padrão adicionais:
+And a custom theme factory with additional defaulted options:
**./styles/createMyTheme**:
@@ -239,7 +252,7 @@ export default function createMyTheme(options: ThemeOptions) {
}
```
-Isso poderia ser usado como:
+This could be used like:
```ts
import createMyTheme from './styles/createMyTheme';
@@ -249,14 +262,14 @@ const theme = createMyTheme({ appDrawer: { breakpoint: 'md' }});
## Uso da propriedade `component`
-Material-UI permite que você substitua o nó raiz de um componente através de uma propriedade `component`. Por exemplo, a raiz de um componente `Button` pode ser substituída com um React Router `Link`, e quaisquer propriedades adicionais passadas para o `Button`, como `to`, será repassada para o componente `Link`. Para um exemplo de código relativo ao `Button` e `react-router-dom` verifique [esta demonstração](/components/buttons/#third-party-routing-library).
+Material-UI allows you to replace a component's root node via a `component` property. For example, a `Button`'s root node can be replaced with a React Router `Link`, and any additional props that are passed to `Button`, such as `to`, will be spread to the `Link` component. For a code example concerning `Button` and `react-router-dom` checkout [this Button demo](/components/buttons/#third-party-routing-library).
-Nem todos os componentes suportam totalmente qualquer tipo de componente que você passe. Se você encontrar algum componente que rejeita sua propriedade `component` no TypeScript por favor abra um issue. Há um esforço contínuo para corrigir isso fazendo com que a propriedade component seja genérica.
+Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic.
## Manipulando `value` e manipuladores de eventos
-Muitos componentes preocupados com a entrada do usuário oferecem uma propriedade `value` ou manipuladores de eventos que incluem o valor atual em `value`. Na maioria das situações, `value` só é manipulado dentro do React, o que permite que seja de qualquer tipo, como objetos ou matrizes.
+Many components concerned with user input offer a `value` prop or event handlers which include the current `value`. In most situations that `value` is only handled within React which allows it be of any type, such as objects or arrays.
-No entanto, esse tipo não pode ser verificado em tempo de compilação em situações em que depende de nós filhos do componente, por exemplo, para `Select` ou `RadioGroup`. Isso significa que a opção mais segura é tipando como `unknown` e deixar que o desenvolvedor decida como deseja restringir esse tipo. Não oferecemos a possibilidade de usar um tipo genérico nesses casos, devido [as mesmas razões que `event.target` não é genérico no React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
+However, that type cannot be verified at compile time in situations where it depends on the component's children e.g. for `Select` or `RadioGroup`. This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
-Nossas demonstrações incluem variantes tipadas que usam conversão de tipo. É uma troca aceitável porque os tipos estão todos localizados em um único arquivo e são muito básicos. Você tem que decidir por si mesmo se a mesma troca é aceitável para você. Queremos que a nossa biblioteca de tipos seja estrita por padrão e livre através de opt-in.
\ No newline at end of file
+The demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. The library types are be strict by default and loose via opt-in.
\ No newline at end of file
diff --git a/docs/src/pages/guides/typescript/typescript-ru.md b/docs/src/pages/guides/typescript/typescript-ru.md
index 225d5827ace3fa..8bd6021082e766 100644
--- a/docs/src/pages/guides/typescript/typescript-ru.md
+++ b/docs/src/pages/guides/typescript/typescript-ru.md
@@ -4,7 +4,20 @@
Have a look at the [Create React App with TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) example. A minimum version of TypeScript 2.8 is required.
-Our definitions are tested with the following [tsconfig.json](https://github.com/mui-org/material-ui/tree/master/tsconfig.json). Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors.
+In order for types to work, you have to at least have the following options enabled in your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "lib": ["es6", "dom"],
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true
+ }
+}
+```
+
+The strict mode options are the same that are required for every types package published in the `@types/` namespace. Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors. To get the best type experience with the types we recommend setting `"strict": true`.
## Usage of `withStyles`
@@ -55,7 +68,7 @@ withStyles(({ palette, spacing }) => ({
This is because TypeScript [widens the return types of function expressions](https://github.com/Microsoft/TypeScript/issues/241).
-Because of this, we recommend using our `createStyles` helper function to construct your style rules object:
+Because of this, using the `createStyles` helper function to construct your style rules object is recommended:
```ts
// Non-dependent styles
@@ -259,4 +272,4 @@ Many components concerned with user input offer a `value` prop or event handlers
However, that type cannot be verified at compile time in situations where it depends on the component's children e.g. for `Select` or `RadioGroup`. This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
-Our demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. We want our library types to be strict by default and loose via opt-in.
\ No newline at end of file
+The demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. The library types are be strict by default and loose via opt-in.
\ No newline at end of file
diff --git a/docs/src/pages/guides/typescript/typescript-zh.md b/docs/src/pages/guides/typescript/typescript-zh.md
index 7798ec3a886d86..8f36a95bb8794e 100644
--- a/docs/src/pages/guides/typescript/typescript-zh.md
+++ b/docs/src/pages/guides/typescript/typescript-zh.md
@@ -4,31 +4,44 @@
请查看一下 [Create React App with TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) 的例子。 我们要求 TypeScript 版本必须大于 2.8。
-我们的定义都通过 [tsconfig.json](https://github.com/mui-org/material-ui/tree/master/tsconfig.json) 进行测试。 使用不太严格的 `tsconfig.json` 或省略某些库可能会带来一些错误。
+In order for types to work, you have to at least have the following options enabled in your `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "lib": ["es6", "dom"],
+ "noImplicitAny": true,
+ "noImplicitThis": true,
+ "strictNullChecks": true
+ }
+}
+```
+
+The strict mode options are the same that are required for every types package published in the `@types/` namespace. Using a less strict `tsconfig.json` or omitting some of the libraries might cause errors. To get the best type experience with the types we recommend setting `"strict": true`.
## `withStyles` 的使用
-在 TypeScript 中使用 `withStyles` 可能有点棘手，但有一些实用程序可以帮助提高使用感受。
+Using `withStyles` in TypeScript can be a little tricky, but there are some utilities to make the experience as painless as possible.
### 使用 `createStyles` 来杜绝类型扩展
-有一个造成混淆的常见原因是 TypeScript的 [类型扩展](https://mariusschulz.com/blog/typescript-2-1-literal-type-widening)，因此这个示例不会像预期那样工作：
+A frequent source of confusion is TypeScript's [type widening](https://mariusschulz.com/blog/typescript-2-1-literal-type-widening), which causes this example not to work as expected:
```ts
const styles = {
- root： {
+ root: {
display: 'flex',
flexDirection: 'column',
}
};
-withStyles（styles）;
+withStyles(styles);
// ^^^^^^
-// 属性 'flexDirection' 的类型是不兼容的。
-// 'string' 类型不能赋予给这些类型：'"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row"...'。
+// Types of property 'flexDirection' are incompatible.
+// Type 'string' is not assignable to type '"-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row"...'.
```
-问题是 `flexDirection` 属性的类型被推断为 `string`，这样太随意了。 要解决此问题，您可以将样式对象直接传递给 `withStyles`：
+The problem is that the type of the `flexDirection` property is inferred as `string`, which is too arbitrary. To fix this, you can pass the styles object directly to `withStyles`:
```ts
withStyles({
@@ -39,7 +52,7 @@ withStyles({
});
```
-然而，如果您尝试让样式随主题而变化，类型扩展会再次显示其不怎么雅观的部分：
+However type widening rears its ugly head once more if you try to make the styles depend on the theme:
```ts
withStyles(({ palette, spacing }) => ({
@@ -53,12 +66,12 @@ withStyles(({ palette, spacing }) => ({
}));
```
-这是因为 TypeScript [扩展了函数表达式](https://github.com/Microsoft/TypeScript/issues/241)的返回类型。
+This is because TypeScript [widens the return types of function expressions](https://github.com/Microsoft/TypeScript/issues/241).
-因此，我们建议使用我们的 `createStyles` 帮助函数来构造样式规则对象：
+Because of this, using the `createStyles` helper function to construct your style rules object is recommended:
```ts
-// 不依赖于主题的样式
+// Non-dependent styles
const styles = createStyles({
root: {
display: 'flex',
@@ -66,7 +79,7 @@ const styles = createStyles({
},
});
-// 依赖于主题的样式
+// Theme-dependent styles
const styles = ({ palette, spacing }: Theme) => createStyles({
root: {
display: 'flex',
@@ -78,11 +91,11 @@ const styles = ({ palette, spacing }: Theme) => createStyles({
});
```
-`createStyles` 只是身份函数；它不会在运行时“做任何事情”，只是在编译时指导类型推断。
+`createStyles` is just the identity function; it doesn't "do anything" at runtime, just helps guide type inference at compile time.
### Media queries（媒体查询）
-`withStyles` 允许样式对象具有顶级媒体查询的权限，如下所示：
+`withStyles` allows a styles object with top level media-queries like so:
```ts
const styles = createStyles({
@@ -97,11 +110,11 @@ const styles = createStyles({
});
```
-但是，为了允许这些样式传递 TypeScript，鉴于CSS 类的名称和实际的 CSS 属性名称不一致，定义必须是模糊的。 由于类名称应与 CSS 属性相同，因此应避免使用。
+However to allow these styles to pass TypeScript, the definitions have to be ambiguous concerning names for CSS classes and actual CSS property names. Due to this class names that are equal to CSS properties should be avoided.
```ts
-// 这样是错误的，由于 TypeScript 认为 `@media (min-width: 960px)` 是一个类名
-// 并且 `content` 是 css 属性
+// error because TypeScript thinks `@media (min-width: 960px)` is a class name
+// and `content` is the css property
const ambiguousStyles = createStyles({
content: {
minHeight: '100vh',
@@ -113,7 +126,7 @@ const ambiguousStyles = createStyles({
},
});
-// 这样定义就可以
+// works just fine
const ambiguousStyles = createStyles({
contentClass: {
minHeight: '100vh',
@@ -128,7 +141,7 @@ const ambiguousStyles = createStyles({
### 使用 `WithStyles` 来扩充你的属性
-由于用 `withStyles(styles)` 装饰的组件被注入了一个特殊的 `classes` 属性，您需要相应地定义其属性：
+Since a component decorated with `withStyles(styles)` gets a special `classes` prop injected, you will want to define its props accordingly:
```ts
const styles = (theme: Theme) => createStyles({
@@ -138,10 +151,10 @@ const styles = (theme: Theme) => createStyles({
});
interface Props {
- // 未被注入样式的属性
+ // non-style props
foo: number;
bar: boolean;
- // 被注入样式的属性
+ // injected style props
classes: {
root: string;
paper: string;
@@ -150,7 +163,7 @@ interface Props {
}
```
-然而，这是不是很 [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) ，因为它需要你在两个不同的地方保持类名（`'root'`， `'paper'`， `'button'`，...）。 我们提供了一个类型操作符 `WithStyles` 来帮助解决这个问题，因此您可以直接写入：:
+However this isn't very [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) because it requires you to maintain the class names (`'root'`, `'paper'`, `'button'`, ...) in two different places. We provide a type operator `WithStyles` to help with this, so that you can just write:
```ts
import { WithStyles, createStyles } from '@material-ui/core';
@@ -169,7 +182,7 @@ interface Props extends WithStyles<typeof styles> {
### 装饰组件
-将 `withStyles(styles)` 作为函数来如期使用：
+Applying `withStyles(styles)` as a function works as expected:
```tsx
const DecoratedSFC = withStyles(styles)(({ text, type, color, classes }: Props) => (
@@ -192,13 +205,13 @@ const DecoratedClass = withStyles(styles)(
);
```
-不幸的是，由于[TypeScript 装饰器现有的限制 ](https://github.com/Microsoft/TypeScript/issues/4881)， `withStyles(styles)` 不能用在 TypeScript 中作为一个装饰器。
+Unfortunately due to a [current limitation of TypeScript decorators](https://github.com/Microsoft/TypeScript/issues/4881), `withStyles(styles)` can't be used as a decorator in TypeScript.
## 自定义 `主题`
-将自定义属性添加到`主题`中时，您可以通过以强类型的方式实现 [TypeScript 的模块扩充](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)而继续使用它 。
+When adding custom properties to the `Theme`, you may continue to use it in a strongly typed way by exploiting [TypeScript's module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation).
-以下示例添加了一个 `appDrawer` 属性，并将其合并到由 `material-ui` 提供的属性中：
+The following example adds an `appDrawer` property that is merged into the one exported by `material-ui`:
```ts
import { Theme } from '@material-ui/core/styles/createMuiTheme';
@@ -211,7 +224,7 @@ declare module '@material-ui/core/styles/createMuiTheme' {
breakpoint: Breakpoint
}
}
- // 使用 `createMuiTheme` 来配置
+ // allow configuration using `createMuiTheme`
interface ThemeOptions {
appDrawer?: {
width?: React.CSSProperties['width']
@@ -221,7 +234,7 @@ declare module '@material-ui/core/styles/createMuiTheme' {
}
```
-以及一个带有其他默认选项的自定义主题仓库：
+And a custom theme factory with additional defaulted options:
**./styles/createMyTheme**:
@@ -239,7 +252,7 @@ export default function createMyTheme(options: ThemeOptions) {
}
```
-也可以这样使用：
+This could be used like:
```ts
import createMyTheme from './styles/createMyTheme';
@@ -249,14 +262,14 @@ const theme = createMyTheme({ appDrawer: { breakpoint: 'md' }});
## `组件`属性的用法
-在 Material-UI 中，您可以用`组件`的属性来替换一个组件的根节点。 譬如，一个 `Button` 的根节点可以用一个 React Router 的`Link`来替换，而且 `Button` 的其余属性，例如 `to`，也可以运用到 `Link` 组件当中。 若您想查看 `Button` 以及 `react-router-dom` 的例子，请查看 [this Button demo](/components/buttons/#third-party-routing-library)。
+Material-UI allows you to replace a component's root node via a `component` property. For example, a `Button`'s root node can be replaced with a React Router `Link`, and any additional props that are passed to `Button`, such as `to`, will be spread to the `Link` component. For a code example concerning `Button` and `react-router-dom` checkout [this Button demo](/components/buttons/#third-party-routing-library).
-但是，并不是每个组件都完全支持您传入的任何组件类型。 如果您在 TypeScript 中遇到一个不接受其 `component` 属性的组件，请新建一个 issue。 我们也一直在努力实现组件属性的通用化， 这样能够帮助我们解决这个问题。
+Not every component fully supports any component type you pass in. If you encounter a component that rejects its `component` props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic.
## 处理`值`和事件处理器
-很多与用户输入有关的组件会提供一个 `value` 属性或者包含当前`值`的事件处理器。 大多数情况下`值`只在 React 内被处理，这样的话它能够是任何类型，譬如 objects 或者 arrays。
+Many components concerned with user input offer a `value` prop or event handlers which include the current `value`. In most situations that `value` is only handled within React which allows it be of any type, such as objects or arrays.
-然而，如果是它依赖于组件子项的情况，此类型无法在编译时被验证，例如对于 `Select` 或者 `RadioGroup` 来说。 这意味着留给我们的最合适的选项是将其输入为 `unknown` 并让开发者自行决定如何来缩小该类型。 与 [`event.target` 在 React 中并不通用的原因](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682)相同，我们并不推荐您在这些案例中尝试使用一个通用的类型。
+However, that type cannot be verified at compile time in situations where it depends on the component's children e.g. for `Select` or `RadioGroup`. This means that the soundest option is to type it as `unknown` and let the developer decide how they want to narrow that type down. We do not offer the possibility to use a generic type in those cases for [the same reasons `event.target` is not generic in React](https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682).
-我们的演示包含了使用类型转换的类型变体。 鉴于所有的类型都位于一个文件中，并且都是非常基本的，这样的折衷可以接受。 您必须自行决定是否能够接受同样的折衷。 我们则希望，通过选择性加入，我们的库的类型默认为严格的。
\ No newline at end of file
+The demos include typed variants that use type casting. It is an acceptable tradeoff because the types are all located in a single file and are very basic. You have to decide for yourself if the same tradeoff is acceptable for you. The library types are be strict by default and loose via opt-in.
\ No newline at end of file
diff --git a/docs/src/pages/styles/advanced/advanced-aa.md b/docs/src/pages/styles/advanced/advanced-aa.md
index c90186428374d6..e0f9fd6918d31d 100644
--- a/docs/src/pages/styles/advanced/advanced-aa.md
+++ b/docs/src/pages/styles/advanced/advanced-aa.md
@@ -109,7 +109,7 @@ crwdns97002:0crwdne97002:0
## crwdns97004:0crwdne97004:0
-> crwdns97006:0crwdne97006:0 crwdns97008:0crwdne97008:0 crwdns97010:0crwdne97010:0
+> crwdns101414:0crwdne101414:0 crwdns101416:0crwdne101416:0
crwdns97012:0crwdne97012:0 crwdns97014:0crwdne97014:0
@@ -184,7 +184,7 @@ crwdns97082:0crwdne97082:0
### crwdns97084:0crwdne97084:0
-crwdns97086:0crwdne97086:0 crwdns97088:0crwdne97088:0
+crwdns101418:0crwdne101418:0 crwdns97088:0crwdne97088:0
crwdns97090:0crwdne97090:0
diff --git a/docs/src/pages/styles/advanced/advanced-de.md b/docs/src/pages/styles/advanced/advanced-de.md
index 59d369a36d73f1..d55ce3a467297a 100644
--- a/docs/src/pages/styles/advanced/advanced-de.md
+++ b/docs/src/pages/styles/advanced/advanced-de.md
@@ -218,7 +218,7 @@ Beachten Sie, dass dies keine Selektoren oder verschachtelten Regeln unterstütz
## CSS-Injektionsreihenfolge
-> Es ist **wirklich wichtig** um zu verstehen, wie die CSS-Spezifität vom Browser berechnet wird. Dies ist eines der Schlüsselelemente, die beim Überschreiben von Stilen zu beachten sind. Wir **ermutigen** Sie diesen MDN-Absatz: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated) zu lesen
+> It's **really important** to understand how the CSS specificity is calculated by the browser, as it's one of the key elements to know when overriding styles. You are encouraged to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
Standardmäßig werden die Style-Tags **zuletzt** im `<head>` -Element der Seite eingefügt. Sie erhalten mehr Details als jedes andere Styletag auf Ihrer Seite, z.B. CSS-Module oder StilKomponenten.
@@ -386,7 +386,7 @@ Sie können der [serverseitigen Anleitung](/guides/server-rendering/) für ein d
### Gatsby
-Wir haben [ein offizielles Plugin](https://github.com/hupe1980/gatsby-plugin-material-ui), welches serverseitiges Rendering für `@material-ui/styles` ermöglicht. Anleitungen zur Einrichtung und Verwendung finden Sie auf der Seite des Plugins.
+There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Anleitungen zur Einrichtung und Verwendung finden Sie auf der Seite des Plugins.
Siehe [dieses Beispielprojekt](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) für ein aktuelles Verwendungsbeispiel.
diff --git a/docs/src/pages/styles/advanced/advanced-es.md b/docs/src/pages/styles/advanced/advanced-es.md
index 693237b2b86dfb..9b0d59462bf56a 100644
--- a/docs/src/pages/styles/advanced/advanced-es.md
+++ b/docs/src/pages/styles/advanced/advanced-es.md
@@ -218,7 +218,7 @@ Note that this doesn't support selectors, or nested rules.
## CSS injection order
-> It's **really important** to understand how the CSS specificity is calculated by the browser. It's one of the key elements to know when overriding styles. We **encourage** you to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
+> It's **really important** to understand how the CSS specificity is calculated by the browser, as it's one of the key elements to know when overriding styles. You are encouraged to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
By default, the style tags are injected **last** in the `<head>` element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.
@@ -386,7 +386,7 @@ You can [follow the server side guide](/guides/server-rendering/) for a more det
### Gatsby
-We have [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
+There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
Refer to [this example project](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) for an up-to-date usage example.
diff --git a/docs/src/pages/styles/advanced/advanced-fr.md b/docs/src/pages/styles/advanced/advanced-fr.md
index d88043ccf87702..2bbc10ff838213 100644
--- a/docs/src/pages/styles/advanced/advanced-fr.md
+++ b/docs/src/pages/styles/advanced/advanced-fr.md
@@ -218,7 +218,7 @@ Note that this doesn't support selectors, or nested rules.
## CSS injection order
-> It's **really important** to understand how the CSS specificity is calculated by the browser. It's one of the key elements to know when overriding styles. We **encourage** you to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
+> It's **really important** to understand how the CSS specificity is calculated by the browser, as it's one of the key elements to know when overriding styles. You are encouraged to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
By default, the style tags are injected **last** in the `<head>` element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.
@@ -386,7 +386,7 @@ You can [follow the server side guide](/guides/server-rendering/) for a more det
### Gatsby
-We have [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
+There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
Refer to [this example project](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) for an up-to-date usage example.
diff --git a/docs/src/pages/styles/advanced/advanced-ja.md b/docs/src/pages/styles/advanced/advanced-ja.md
index 531e8719e285e5..d87938dd644ef9 100644
--- a/docs/src/pages/styles/advanced/advanced-ja.md
+++ b/docs/src/pages/styles/advanced/advanced-ja.md
@@ -1,6 +1,6 @@
-# 高度な
+# 高度な機能(Advanced)
-<p class="description">This section covers more advanced usage of @material-ui/styles.</p>
+<p class="description">このセクションでは、@material-ui/stylesのより高度な使用法について説明します。</p>
## テーマ
@@ -218,7 +218,7 @@ Note that this doesn't support selectors, or nested rules.
## CSS injection order
-> It's **really important** to understand how the CSS specificity is calculated by the browser. It's one of the key elements to know when overriding styles. We **encourage** you to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
+> It's **really important** to understand how the CSS specificity is calculated by the browser, as it's one of the key elements to know when overriding styles. You are encouraged to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
By default, the style tags are injected **last** in the `<head>` element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.
@@ -386,7 +386,7 @@ You can [follow the server side guide](/guides/server-rendering/) for a more det
### Gatsby
-We have [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
+There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
Refer to [this example project](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) for an up-to-date usage example.
@@ -508,7 +508,7 @@ The [`jss-plugin-global`](#jss-plugins) plugin is installed in the default prese
{{"demo": "pages/styles/advanced/GlobalCss.js"}}
-### Hybrid
+### ハイブリッド
You can also combine JSS generated class names with global ones.
@@ -518,7 +518,7 @@ You can also combine JSS generated class names with global ones.
JSS uses feature detection to apply the correct prefixes. [Don't be surprised](https://github.com/mui-org/material-ui/issues/9293) if you can't see a specific prefix in the latest version of Chrome. Your browser probably doesn't need it.
-## Content Security Policy (CSP)
+## コンテンツセキュリティポリシー（CSP）
### What is CSP and why is it useful?
@@ -534,7 +534,7 @@ This vulnerability would allow the attacker to execute anything. However, with a
You can read more about CSP on the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
-### How does one implement CSP?
+### CSPの実装方法
In order to use CSP with Material-UI (and JSS), you need to use a nonce. A nonce is a randomly generated string that is only used once, therefore you need to add server middleware to generate one on each request. JSS has a [great tutorial](https://github.com/cssinjs/jss/blob/master/docs/csp.md) on how to achieve this with Express and React Helmet. For a basic rundown, continue reading.
diff --git a/docs/src/pages/styles/advanced/advanced-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md
index 44b1e514cf14eb..38247ee31e6d99 100644
--- a/docs/src/pages/styles/advanced/advanced-pt.md
+++ b/docs/src/pages/styles/advanced/advanced-pt.md
@@ -116,12 +116,12 @@ Este é o caso mais simples. O componente encapsulado aceita a propriedade `clas
```jsx
const Nested = withStyles({
- root: {}, // a style rule
- label: {}, // a nested style rule
+ root: {}, // uma regra de estilo
+ label: {}, // uma regra de estilo aninhada
})(({ classes }) => (
<button className={classes.root}>
<span className={classes.label}> // 'jss2 my-label'
- Nested
+ Aninhado
</span>
</button>
));
@@ -218,7 +218,7 @@ Note que isto não suporta seletores, ou regras aninhadas.
## Ordem de injeção de CSS
-> É **muito importante** entender como a especificidade do CSS é calculada pelo navegador. É um dos elementos-chave para saber quando sobrescrever estilos. Nós **recomendamos** que leia este parágrafo do MDN: [Como a especificidade é calculada?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
+> It's **really important** to understand how the CSS specificity is calculated by the browser, as it's one of the key elements to know when overriding styles. You are encouraged to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
Por padrão, os estilos são inseridos **por último** no elemento `<head>` da sua página. Eles ganham mais especificidade do que qualquer outra folha de estilo em sua página, por exemplo, módulos CSS, componentes estilizados (styled components).
@@ -386,7 +386,7 @@ Você pode [seguir o guia lado do servidor](/guides/server-rendering/) para um e
### Gatsby
-Nós temos [um plugin oficial](https://github.com/hupe1980/gatsby-plugin-material-ui) que permite a renderização do lado do servidor para `@material-ui/ styles`. Consulte a página do plugin para obter instruções de configuração e uso.
+There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Consulte a página do plugin para obter instruções de configuração e uso.
Para um exemplo de uso atualizado, consulte [este projeto de exemplo](https://github.com/mui-org/material-ui/blob/master/examples/gatsby).
diff --git a/docs/src/pages/styles/advanced/advanced-ru.md b/docs/src/pages/styles/advanced/advanced-ru.md
index a583bf8f085064..9fe280332fb9e9 100644
--- a/docs/src/pages/styles/advanced/advanced-ru.md
+++ b/docs/src/pages/styles/advanced/advanced-ru.md
@@ -218,7 +218,7 @@ Note that this doesn't support selectors, or nested rules.
## CSS injection order
-> It's **really important** to understand how the CSS specificity is calculated by the browser. It's one of the key elements to know when overriding styles. We **encourage** you to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
+> It's **really important** to understand how the CSS specificity is calculated by the browser, as it's one of the key elements to know when overriding styles. You are encouraged to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
By default, the style tags are injected **last** in the `<head>` element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.
@@ -386,7 +386,7 @@ You can [follow the server side guide](/guides/server-rendering/) for a more det
### Gatsby
-We have [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
+There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
Refer to [this example project](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) for an up-to-date usage example.
diff --git a/docs/src/pages/styles/advanced/advanced-zh.md b/docs/src/pages/styles/advanced/advanced-zh.md
index 589f7dde8019fa..de24cf65ad60e9 100644
--- a/docs/src/pages/styles/advanced/advanced-zh.md
+++ b/docs/src/pages/styles/advanced/advanced-zh.md
@@ -218,7 +218,7 @@ const useStyles = makeStyles({
## CSS 注入顺序
-> 了解浏览器如何计算CSS特异性**非常重要**。 这是重写样式时要知道的关键元素之一。 我们 **推荐**您要阅读此MDN资料：[如何计算特异性？ ](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
+> It's **really important** to understand how the CSS specificity is calculated by the browser, as it's one of the key elements to know when overriding styles. You are encouraged to read this MDN paragraph: [How is specificity calculated?](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_is_specificity_calculated)
默认情况下，注入的style标签会被插入到页面`<head>`元素的最后。 它们比页面上任何其他样式标签更具特异性，例如CSS模块， styled components。
@@ -386,7 +386,7 @@ You can [follow the server side guide](/guides/server-rendering/) for a more det
### Gatsby
-We have [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
+There is [an official plugin](https://github.com/hupe1980/gatsby-plugin-material-ui) that enables server-side rendering for `@material-ui/styles`. Refer to the plugin's page for setup and usage instructions.
Refer to [this example project](https://github.com/mui-org/material-ui/blob/master/examples/gatsby) for an up-to-date usage example.
diff --git a/docs/src/pages/styles/api/api-aa.md b/docs/src/pages/styles/api/api-aa.md
index 7259ddacc9cb94..185ba254110e89 100644
--- a/docs/src/pages/styles/api/api-aa.md
+++ b/docs/src/pages/styles/api/api-aa.md
@@ -68,7 +68,7 @@ crwdns97334:0{ makeStyles }crwdnd97334:0{classes.root}crwdne97334:0
## `crwdns97336:0crwdne97336:0`
-crwdns97338:0crwdne97338:0 crwdns97340:0crwdne97340:0
+crwdns97338:0crwdne97338:0 crwdns101420:0crwdne101420:0
```jsx
crwdns97342:0{ ServerStyleSheets }crwdnd97342:0${cssString}crwdnd97342:0${html}crwdne97342:0
diff --git a/docs/src/pages/styles/api/api-de.md b/docs/src/pages/styles/api/api-de.md
index e5b16ba3d4503a..49924e870c2613 100644
--- a/docs/src/pages/styles/api/api-de.md
+++ b/docs/src/pages/styles/api/api-de.md
@@ -103,7 +103,7 @@ export default function MyComponent(props) {
## `ServerStyleSheets`
-Dies ist ein Klassenhelfer für das serverseitige Rendering. [ Sie können unserem Leitfaden für einen praktischen Ansatz folgen](/guides/server-rendering/).
+Dies ist ein Klassenhelfer für das serverseitige Rendering. [You can follow this guide for a practical approach](/guides/server-rendering/).
```jsx
import ReactDOMServer from 'react-dom/server';
diff --git a/docs/src/pages/styles/api/api-es.md b/docs/src/pages/styles/api/api-es.md
index 29288435d0fe4a..258ba529a6f7fe 100644
--- a/docs/src/pages/styles/api/api-es.md
+++ b/docs/src/pages/styles/api/api-es.md
@@ -103,7 +103,7 @@ export default function MyComponent(props) {
## `ServerStyleSheets`
-This is a class helper to handle server-side rendering. [You can follow our guide for a practical approach](/guides/server-rendering/).
+This is a class helper to handle server-side rendering. [You can follow this guide for a practical approach](/guides/server-rendering/).
```jsx
import ReactDOMServer from 'react-dom/server';
diff --git a/docs/src/pages/styles/api/api-fr.md b/docs/src/pages/styles/api/api-fr.md
index 2bbb338ce8fe63..c1f9c83926aa98 100644
--- a/docs/src/pages/styles/api/api-fr.md
+++ b/docs/src/pages/styles/api/api-fr.md
@@ -103,7 +103,7 @@ export default function MyComponent(props) {
## `ServerStyleSheets`
-This is a class helper to handle server-side rendering. [You can follow our guide for a practical approach](/guides/server-rendering/).
+This is a class helper to handle server-side rendering. [You can follow this guide for a practical approach](/guides/server-rendering/).
```jsx
import ReactDOMServer from 'react-dom/server';
diff --git a/docs/src/pages/styles/api/api-ja.md b/docs/src/pages/styles/api/api-ja.md
index 2b635674c59565..fd5cafe7b85c1f 100644
--- a/docs/src/pages/styles/api/api-ja.md
+++ b/docs/src/pages/styles/api/api-ja.md
@@ -103,9 +103,10 @@ export default function MyComponent(props) {
## `ServerStyleSheets`
-This is a class helper to handle server-side rendering. [You can follow our guide for a practical approach](/guides/server-rendering/).
+This is a class helper to handle server-side rendering. [You can follow this guide for a practical approach](/guides/server-rendering/).
```jsx
+
import ReactDOMServer from 'react-dom/server';
import { ServerStyleSheets } from '@material-ui/styles';
@@ -140,7 +141,8 @@ The method returns the collected styles.
⚠️ You must call `.collect()` before using this method.
-### `sheets.getStyleElement() => CSS React element`
+### `
+sheets.getStyleElement() => CSS React element`
The method is an alternative to `.toString()` when you are rendering the whole page with React.
@@ -163,7 +165,7 @@ Link a style sheet with a function component using the **styled components** pat
#### 戻り値
-`Component`: The new component created.
+`Component` ：作成された新しいコンポーネント。
#### 例
@@ -336,7 +338,7 @@ ReactDOM.render(<App />, document.querySelector('#app'));
</h4>
<p>
- <code>theme</code>: The theme object previously injected in the context.
+ <code>theme</code>：以前にコンテキストに挿入されたテーマオブジェクト。
</p>
<h4>
@@ -439,7 +441,7 @@ export default withStyles(styles)(MyComponent);
</code></pre>
<p>
- Also, you can use as <a href="https://babeljs.io/docs/en/babel-plugin-proposal-decorators">decorators</a> like so:
+ また、<a href="https://babeljs.io/docs/en/babel-plugin-proposal-decorators">デコレータ</a>などとしてしても使用できます。
</p>
<pre><code class="jsx">import React from 'react';
@@ -475,7 +477,7 @@ export default MyComponent
<ol start="1" spaces="0" level="0">
<li level="0">
- <code>Component</code>: The component that will be wrapped.
+ <code>Component</code>:：ラップされるコンポーネント。
</li>
</ol>
@@ -484,7 +486,7 @@ export default MyComponent
</h4>
<p>
- <code>Component</code>: The new component created. Does forward refs to the inner component.
+ <code>Component</code> ：作成された新しいコンポーネント。 内部コンポーネントへの参照を転送します。
</p>
<h4>
diff --git a/docs/src/pages/styles/api/api-pt.md b/docs/src/pages/styles/api/api-pt.md
index 45f8acd5bd1c51..39d2baceebc224 100644
--- a/docs/src/pages/styles/api/api-pt.md
+++ b/docs/src/pages/styles/api/api-pt.md
@@ -103,7 +103,7 @@ export default function MyComponent(props) {
## `ServerStyleSheets`
-Esta é uma classe auxiliar para manipular a renderização do lado do servidor. [Você pode seguir nosso guia para uma abordagem prática](/guides/server-rendering/).
+Esta é uma classe auxiliar para manipular a renderização do lado do servidor. [You can follow this guide for a practical approach](/guides/server-rendering/).
```jsx
import ReactDOMServer from 'react-dom/server';
diff --git a/docs/src/pages/styles/api/api-ru.md b/docs/src/pages/styles/api/api-ru.md
index a63e8c78e2ef6c..d90dd92ba30159 100644
--- a/docs/src/pages/styles/api/api-ru.md
+++ b/docs/src/pages/styles/api/api-ru.md
@@ -103,7 +103,7 @@ export default function MyComponent(props) {
## `ServerStyleSheets`
-This is a class helper to handle server-side rendering. [You can follow our guide for a practical approach](/guides/server-rendering/).
+This is a class helper to handle server-side rendering. [You can follow this guide for a practical approach](/guides/server-rendering/).
```jsx
import ReactDOMServer from 'react-dom/server';
diff --git a/docs/src/pages/styles/api/api-zh.md b/docs/src/pages/styles/api/api-zh.md
index c070824d21167e..b8c7091ca4ad12 100644
--- a/docs/src/pages/styles/api/api-zh.md
+++ b/docs/src/pages/styles/api/api-zh.md
@@ -103,7 +103,7 @@ export default function MyComponent(props) {
## `ServerStyleSheets`
-This is a class helper to handle server-side rendering. [You can follow our guide for a practical approach](/guides/server-rendering/).
+This is a class helper to handle server-side rendering. [You can follow this guide for a practical approach](/guides/server-rendering/).
```jsx
import ReactDOMServer from 'react-dom/server';
diff --git a/docs/src/pages/styles/basics/basics-aa.md b/docs/src/pages/styles/basics/basics-aa.md
index 86da45534c1717..59a75d63a98d0d 100644
--- a/docs/src/pages/styles/basics/basics-aa.md
+++ b/docs/src/pages/styles/basics/basics-aa.md
@@ -6,18 +6,15 @@ crwdns97616:0crwdne97616:0 crwdns97618:0crwdne97618:0 crwdns97620:0crwdne97620:0
## crwdns97622:0crwdne97622:0
-crwdns97624:0crwdne97624:0 crwdns97626:0crwdne97626:0 crwdns97628:0crwdne97628:0 crwdns97630:0crwdne97630:0
-
-- [crwdns97634:0crwdne97634:0](crwdns97632:0crwdne97632:0)
-- [crwdns97638:0crwdne97638:0](crwdns97636:0crwdne97636:0)
+crwdns97624:0crwdne97624:0 crwdns101422:0crwdne101422:0
crwdns97640:0crwdne97640:0
-- crwdns97642:0crwdne97642:0
-- crwdns97644:0crwdne97644:0
-- crwdns97646:0crwdne97646:0
-- crwdns97648:0crwdne97648:0
-- crwdns97650:0crwdne97650:0
+- crwdns101424:0crwdne101424:0
+- crwdns101426:0crwdne101426:0
+- crwdns101428:0crwdne101428:0
+- crwdns101430:0crwdne101430:0
+- crwdns101432:0crwdne101432:0
## crwdns97652:0crwdne97652:0
@@ -29,7 +26,7 @@ crwdns97656:0crwdne97656:0
## crwdns97658:0crwdne97658:0
-crwdns97660:0crwdne97660:0
+crwdns101434:0crwdne101434:0
### crwdns97662:0crwdne97662:0
diff --git a/docs/src/pages/styles/basics/basics-de.md b/docs/src/pages/styles/basics/basics-de.md
index a6df0a1aaed61f..8bb0d376913013 100644
--- a/docs/src/pages/styles/basics/basics-de.md
+++ b/docs/src/pages/styles/basics/basics-de.md
@@ -6,18 +6,15 @@ Material-UI hat das Ziel, solide Grundlagen für dynamische UIs zu schaffen. Der
## Wieso die Styling-Lösung von Material-UI benutzten?
-In früheren Versionen hat Material-UI LESS verwendet, eine benutzerdefinierte Inline-Lösung zum Schreiben der Stile der Komponenten. Diese Ansätze erwiesen sich jedoch als begrenzt Einsetzbar. Wir haben eine [*CSS-in-JS* Lösung adoptiert](https://github.com/oliviertassinari/a-journey-toward-better-style). Es ** schaltet viele großartige Funktionen frei ** (Verschachtelung von Themen, dynamische Stile, Selbstunterstützung usw.). Wir denken, das ist die Zukunft:
-
-- [Eine vereinheitlichte Styling-Sprache](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [SCSS (Sass) in CSS-in-JS umwandeln](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+In früheren Versionen hat Material-UI LESS verwendet, eine benutzerdefinierte Inline-Lösung zum Schreiben der Stile der Komponenten. Diese Ansätze erwiesen sich jedoch als begrenzt Einsetzbar. [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
Die Styling-Lösung von Material-UI ist von vielen anderen Styling-Bibliotheken wie [styled-components](https://www.styled-components.com/) und [emotion](https://emotion.sh/) inspiriert.
-- 💅 Sie können [die gleichen Vorteile](https://www.styled-components.com/docs/basics#motivation) wie bei styled-components erwarten.
-- 🚀 Es ist [blitzschnell](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uistyles).
-- 🧩 Es ist erweiterbar über eine [Plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
-- ⚡️ Es verwednet [JSS](https://github.com/cssinjs/jss) im Kern - ein JavaScript zum CSS-Compiler mit [hohe Leistung](https://github.com/cssinjs/jss/blob/master/docs/performance.md), der zur Laufzeit und serverseitig arbeitet.
-- 📦 Weniger als [15 KB komprimiert](https://bundlephobia.com/result?p=@material-ui/styles); und keine Erhöhung der Bündelgröße, wenn es zusammen mit der Material-UI verwendet wird.
+- 💅 You can expect [the same advantages](https://www.styled-components.com/docs/basics#motivation) as styled-components.
+- 🚀 It's [blazing fast](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uistyles).
+- 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
+- ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side.
+- 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles); and no bundle size increase if used alongside Material-UI.
## Installation
@@ -33,7 +30,7 @@ yarn add @material-ui/styles
## Erste Schritte
-Wir bieten 3 verschiedene APIs zum Generieren und Anwenden von Stilen, die jedoch alle dieselbe zugrunde liegende Logik aufweisen.
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
### Hook API
diff --git a/docs/src/pages/styles/basics/basics-es.md b/docs/src/pages/styles/basics/basics-es.md
index 631a27454f5c3d..88999383310003 100644
--- a/docs/src/pages/styles/basics/basics-es.md
+++ b/docs/src/pages/styles/basics/basics-es.md
@@ -6,10 +6,7 @@ Material-UI aims to provide a strong foundation for building dynamic UIs. For th
## Why use Material-UI's styling solution?
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. We have [adopted a *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style). It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that this is the future:
-
-- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
Material-UI's styling solution is inspired by many other styling libraries such as [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
@@ -33,7 +30,7 @@ yarn add @material-ui/styles
## Getting started
-We provide 3 different APIs to generate and apply styles, however they all share the same underlying logic.
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
### Hook API
diff --git a/docs/src/pages/styles/basics/basics-fr.md b/docs/src/pages/styles/basics/basics-fr.md
index fafb98ad4bd7e6..5b4fc9032f7418 100644
--- a/docs/src/pages/styles/basics/basics-fr.md
+++ b/docs/src/pages/styles/basics/basics-fr.md
@@ -6,10 +6,7 @@ Material-UI aims to provide a strong foundation for building dynamic UIs. For th
## Why use Material-UI's styling solution?
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. We have [adopted a *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style). It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that this is the future:
-
-- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Conversion de SCSS (Sass) en CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
Material-UI's styling solution is inspired by many other styling libraries such as [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
@@ -33,7 +30,7 @@ yarn add @material-ui/styles
## Getting started
-We provide 3 different APIs to generate and apply styles, however they all share the same underlying logic.
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
### Hook API
diff --git a/docs/src/pages/styles/basics/basics-ja.md b/docs/src/pages/styles/basics/basics-ja.md
index 470b31090c22a8..a03e22cb365d6c 100644
--- a/docs/src/pages/styles/basics/basics-ja.md
+++ b/docs/src/pages/styles/basics/basics-ja.md
@@ -4,12 +4,9 @@
Material-UI aims to provide a strong foundation for building dynamic UIs. For the sake of simplicity, **we expose the styling solution used in Material-UI components** as the `@material-ui/styles` package. You can use it, but you don't have to, since Material-UI is also [interoperable with](/guides/interoperability/) all the other major styling solutions.
-## Why use Material-UI's styling solution?
+## Material-UIのスタイリングソリューションを使用する理由
-In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. We have [adopted a *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style). It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that this is the future:
-
-- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
Material-UI's styling solution is inspired by many other styling libraries such as [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
@@ -31,9 +28,9 @@ npm install @material-ui/styles
yarn add @material-ui/styles
```
-## Getting started
+## さあ、はじめよう
-We provide 3 different APIs to generate and apply styles, however they all share the same underlying logic.
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
### Hook API
@@ -64,7 +61,7 @@ export default function Hook() {
### Styled components API
-Note: this only applies to the calling syntax – style definitions still use a JSS object. You can also [change this behavior](/styles/advanced/#string-templates), with some limitations.
+注：これは呼び出し構文にのみ適用されます。スタイル定義は引き続きJSSオブジェクトを使用します。 [この動作を変更することもできます](/styles/advanced/#string-templates) が、いくつかの制限があります。
```jsx
import React from 'react';
@@ -183,7 +180,7 @@ This button component has a color property that changes its color:
{{"demo": "pages/styles/basics/AdaptingHOC.js"}}
-## Stress test
+## ストレステスト
In the following stress test, you can update the *theme color* and the *background-color property* live:
diff --git a/docs/src/pages/styles/basics/basics-pt.md b/docs/src/pages/styles/basics/basics-pt.md
index 8355f73337bfea..c552a42de784d1 100644
--- a/docs/src/pages/styles/basics/basics-pt.md
+++ b/docs/src/pages/styles/basics/basics-pt.md
@@ -6,18 +6,15 @@ Material-UI, tem como objetivo fornecer uma base sólida para a criação de int
## Por que usar a solução de estilo do Material-UI?
-Nas versões anteriores, o Material-UI usava o LESS, e em seguida, uma solução customizada no estilo inline para escrever os estilos dos componentes, mas essas abordagens provaram ser limitadas. Nós [adotamos a solução *CSS-in-JS*](https://github.com/oliviertassinari/a-journey-toward-better-style). Ela **desbloqueia muitos ótimos recursos** (aninhamento de temas, estilos dinâmicos, auto-suporte, etc.). Nós pensamos que este é o futuro:
-
-- [Um idioma de estilo unificado](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Converter SCSS (Sass) para CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+Nas versões anteriores, o Material-UI usava o LESS, e em seguida, uma solução customizada no estilo inline para escrever os estilos dos componentes, mas essas abordagens provaram ser limitadas. [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
A solução de estilo do Material-UI é inspirada em muitas outras bibliotecas de estilo, como [styled-components](https://www.styled-components.com/) e [emotion](https://emotion.sh/).
-- 💅 Você pode esperar [as mesmas vantagens](https://www.styled-components.com/docs/basics#motivation) que styled-components.
-- 🚀 Está [super rápida](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uistyles).
-- 🧩 É extensível através de uma API de [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md).
-- ⚡️Ela usa [JSS](https://github.com/cssinjs/jss) em seu núcleo – um [alto desempenho](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript para o compilador CSS, que funciona em tempo de execução e no lado do servidor.
-- 📦 Menor que [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles); e nenhum aumento no tamanho do pacote se usado juntamente com o Material-UI.
+- 💅 You can expect [the same advantages](https://www.styled-components.com/docs/basics#motivation) as styled-components.
+- 🚀 It's [blazing fast](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uistyles).
+- 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
+- ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side.
+- 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles); and no bundle size increase if used alongside Material-UI.
## Instalação
@@ -33,7 +30,7 @@ yarn add @material-ui/styles
## Primeiros passos
-Fornecemos três APIs diferentes para gerar e aplicar estilos, mas todas compartilham a mesma lógica subjacente.
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
### Hook API
diff --git a/docs/src/pages/styles/basics/basics-ru.md b/docs/src/pages/styles/basics/basics-ru.md
index f665ae98d7d148..dbfa89631e66b9 100644
--- a/docs/src/pages/styles/basics/basics-ru.md
+++ b/docs/src/pages/styles/basics/basics-ru.md
@@ -6,10 +6,7 @@ Material-UI aims to provide a strong foundation for building dynamic UIs. For th
## Зачем использовать решение для стилей Material-UI?
-В предыдущих версиях Material-UI использовал LESS, а затем пользовательское решение для написания стилей компонентов, но эти подходы оказались ограниченными. We have [adopted a *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style). It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that this is the future:
-
-- [Унифицированный язык стилей](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [Конвертировать SCSS (Sass) в CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+В предыдущих версиях Material-UI использовал LESS, а затем пользовательское решение для написания стилей компонентов, но эти подходы оказались ограниченными. [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
Material-UI's styling solution is inspired by many other styling libraries such as [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/).
@@ -33,7 +30,7 @@ yarn add @material-ui/styles
## Начало работы
-Мы предоставляем 3 разных API для генерации и применения стилей, но все они имеют одинаковую базовую логику.
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
### Hook API
diff --git a/docs/src/pages/styles/basics/basics-zh.md b/docs/src/pages/styles/basics/basics-zh.md
index f9953b57adb364..02fb3c3b7ad188 100644
--- a/docs/src/pages/styles/basics/basics-zh.md
+++ b/docs/src/pages/styles/basics/basics-zh.md
@@ -6,17 +6,14 @@ Material-UI 旨在为构建动态 UI 提供坚实的基础。 为了项目结构
## Why use Material-UI's styling solution?
-在以前的版本中，Material-UI 曾使用过 LESS，以及而后的自定义内嵌式来编写组件的样式。但是这些方法已被证明了其局限性。 最近， [我们开始向*CSS-in-JS*解决方案方向转移 ](https://github.com/oliviertassinari/a-journey-toward-better-style)。 它**解锁了许多很棒的功能**(主题嵌套、动态样式、自我支持等...) 我们认为这是未来：
-
-- [统一的样式语言](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660)
-- [将 SCSS（Sass）转换为 CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js)
+在以前的版本中，Material-UI 曾使用过 LESS，以及而后的自定义内嵌式来编写组件的样式。但是这些方法已被证明了其局限性。 [A *CSS-in-JS* solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
Material-UI的样式解决方案受到许多其他CSS-in-JS库的启发，例如 [styled-components](https://www.styled-components.com/) 和 [emotion](https://emotion.sh/)。
-- 💅具备styled-components的 [ 优势](https://www.styled-components.com/docs/basics#motivation)。
-- 🚀[超 ](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uistyles)快 。
-- 🧩可通过[插件](https://github.com/cssinjs/jss/blob/master/docs/plugins.md)API 扩展。
-- ⚡️它使用[ JSS ](https://github.com/cssinjs/jss)作为其核心 -- 一个 [高性能](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript到CSS编译器，它在运行时和服务器端工作。
+- 💅 You can expect [the same advantages](https://www.styled-components.com/docs/basics#motivation) as styled-components.
+- 🚀 It's [blazing fast](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uistyles).
+- 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.
+- ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side.
- 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles); and no bundle size increase if used alongside Material-UI.
## 安装
@@ -33,7 +30,7 @@ yarn add @material-ui/styles
## 入门
-我们提供3种不同的API来生成和应用样式，但它们都共享相同的底层逻辑。
+There are 3 possible APIs you can use to generate and apply styles, however they all share the same underlying logic.
### Hook API
diff --git a/docs/src/pages/styles/typescript/typescript-aa.md b/docs/src/pages/styles/typescript/typescript-aa.md
new file mode 100644
index 00000000000000..c51e41cd4bfbee
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-aa.md
@@ -0,0 +1,9 @@
+# crwdns100788:0crwdne100788:0
+
+### crwdns100790:0crwdne100790:0
+
+crwdns100792:0crwdne100792:0
+
+```typescript
+crwdns100794:0crwdne100794:0
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/typescript/typescript-de.md b/docs/src/pages/styles/typescript/typescript-de.md
new file mode 100644
index 00000000000000..9ecfcbf2aaa2d0
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-de.md
@@ -0,0 +1,13 @@
+# TypeScript
+
+### Anpassung des `Theme`
+
+You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`.
+
+```typescript
+declare module '@material-ui/styles' {
+ interface DefaultTheme {
+ myProperty: string;
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/typescript/typescript-es.md b/docs/src/pages/styles/typescript/typescript-es.md
new file mode 100644
index 00000000000000..a476dcc024b115
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-es.md
@@ -0,0 +1,13 @@
+# TypeScript
+
+### Customization of `Theme`
+
+You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`.
+
+```typescript
+declare module '@material-ui/styles' {
+ interface DefaultTheme {
+ myProperty: string;
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/typescript/typescript-fr.md b/docs/src/pages/styles/typescript/typescript-fr.md
new file mode 100644
index 00000000000000..a476dcc024b115
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-fr.md
@@ -0,0 +1,13 @@
+# TypeScript
+
+### Customization of `Theme`
+
+You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`.
+
+```typescript
+declare module '@material-ui/styles' {
+ interface DefaultTheme {
+ myProperty: string;
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/typescript/typescript-ja.md b/docs/src/pages/styles/typescript/typescript-ja.md
new file mode 100644
index 00000000000000..dba48535c506dc
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-ja.md
@@ -0,0 +1,13 @@
+# TypeScript
+
+### `テーマのカスタマイズ`
+
+デフォルトのテーマタイプを拡張して、` makeStyles ` 、` useTheme ` 、または` styled ` を使用するたびにテーマタイプを設定する必要がないようにすることができます。
+
+```typescript
+declare module '@material-ui/styles' {
+ interface DefaultTheme {
+ myProperty: string;
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/typescript/typescript-pt.md b/docs/src/pages/styles/typescript/typescript-pt.md
new file mode 100644
index 00000000000000..5c24fed5f1b2d3
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-pt.md
@@ -0,0 +1,13 @@
+# TypeScript
+
+### Customização de tema
+
+You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`.
+
+```typescript
+declare module '@material-ui/styles' {
+ interface DefaultTheme {
+ myProperty: string;
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/typescript/typescript-ru.md b/docs/src/pages/styles/typescript/typescript-ru.md
new file mode 100644
index 00000000000000..a476dcc024b115
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-ru.md
@@ -0,0 +1,13 @@
+# TypeScript
+
+### Customization of `Theme`
+
+You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`.
+
+```typescript
+declare module '@material-ui/styles' {
+ interface DefaultTheme {
+ myProperty: string;
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/src/pages/styles/typescript/typescript-zh.md b/docs/src/pages/styles/typescript/typescript-zh.md
new file mode 100644
index 00000000000000..8a01fc8b24943d
--- /dev/null
+++ b/docs/src/pages/styles/typescript/typescript-zh.md
@@ -0,0 +1,13 @@
+# TypeScript
+
+### 自定义 `主题`
+
+You can augment the default theme type to avoid having to set the theme type every time you use `makeStyles`, `useTheme`, or `styled`.
+
+```typescript
+declare module '@material-ui/styles' {
+ interface DefaultTheme {
+ myProperty: string;
+ }
+}
+```
\ No newline at end of file
diff --git a/docs/src/pages/system/api/api-aa.md b/docs/src/pages/system/api/api-aa.md
index 11ab628215de17..76cfc15e9c4000 100644
--- a/docs/src/pages/system/api/api-aa.md
+++ b/docs/src/pages/system/api/api-aa.md
@@ -38,14 +38,14 @@
| [crwdns98122:0crwdne98122:0](crwdns98120:0crwdne98120:0) | `crwdns98124:0crwdne98124:0` | `crwdns98126:0crwdne98126:0` | `crwdns98128:0crwdne98128:0` | crwdns98130:0crwdne98130:0 |
| [crwdns98134:0crwdne98134:0](crwdns98132:0crwdne98132:0) | `crwdns98136:0crwdne98136:0` | `crwdns98138:0crwdne98138:0` | `crwdns98140:0crwdne98140:0` | crwdns98142:0crwdne98142:0 |
| [crwdns98146:0crwdne98146:0](crwdns98144:0crwdne98144:0) | `crwdns98148:0crwdne98148:0` | `crwdns98150:0crwdne98150:0` | `crwdns98152:0crwdne98152:0` | crwdns98154:0crwdne98154:0 |
-| [crwdns98158:0crwdne98158:0](crwdns98156:0crwdne98156:0) | `crwdns98160:0crwdne98160:0` | `dns98162:0crwdne98162:0ask_5d6165c8d6c4c5.47817650crwdns98162:0crwdne98162:0` | `crwdns98164:0crwdne98164:0` | [`crwdns98168:0crwdne98168:0`](crwdns98166:0crwdne98166:0) |
+| [crwdns98158:0crwdne98158:0](crwdns98156:0crwdne98156:0) | `crwdns98160:0crwdne98160:0` | `dns98162:0crwdne98162:0ask_5d7380c86b6080.45132922crwdns98162:0crwdne98162:0` | `crwdns98164:0crwdne98164:0` | [`crwdns98168:0crwdne98168:0`](crwdns98166:0crwdne98166:0) |
| [crwdns98172:0crwdne98172:0](crwdns98170:0crwdne98170:0) | `crwdns98174:0crwdne98174:0` | `crwdns98176:0crwdne98176:0` | `crwdns98178:0crwdne98178:0` | [`crwdns98182:0crwdne98182:0`](crwdns98180:0crwdne98180:0) |
| [crwdns98186:0crwdne98186:0](crwdns98184:0crwdne98184:0) | `crwdns98188:0crwdne98188:0` | `crwdns98190:0crwdne98190:0` | `crwdns98192:0crwdne98192:0` | [`crwdns98196:0crwdne98196:0`](crwdns98194:0crwdne98194:0) |
| [crwdns98200:0crwdne98200:0](crwdns98198:0crwdne98198:0) | `crwdns98202:0crwdne98202:0` | `crwdns98204:0crwdne98204:0` | `crwdns98206:0crwdne98206:0` | [`crwdns98210:0crwdne98210:0`](crwdns98208:0crwdne98208:0) |
| [crwdns98214:0crwdne98214:0](crwdns98212:0crwdne98212:0) | `crwdns98216:0crwdne98216:0` | `crwdns98218:0crwdne98218:0` | `crwdns98220:0crwdne98220:0` | [`crwdns98224:0crwdne98224:0`](crwdns98222:0crwdne98222:0) |
| [crwdns98228:0crwdne98228:0](crwdns98226:0crwdne98226:0) | `crwdns98230:0crwdne98230:0` | `crwdns98232:0crwdne98232:0` | crwdns98234:0crwdne98234:0 | [`crwdns98238:0crwdne98238:0`](crwdns98236:0crwdne98236:0) |
| [crwdns98242:0crwdne98242:0](crwdns98240:0crwdne98240:0) | `crwdns98244:0crwdne98244:0` | `crwdns98246:0crwdne98246:0` | crwdns98248:0crwdne98248:0 | [`crwdns98252:0crwdne98252:0`](crwdns98250:0crwdne98250:0) |
-| [crwdns98256:0crwdne98256:0](crwdns98254:0crwdne98254:0) | `crwdns98258:0crwdne98258:0` | `k_5d6165c8eb0157.13080129crwdns98260:0crwdne98260:0` | `crwdns98262:0crwdne98262:0` | [`crwdns98266:0crwdne98266:0`](crwdns98264:0crwdne98264:0) |
+| [crwdns98256:0crwdne98256:0](crwdns98254:0crwdne98254:0) | `crwdns98258:0crwdne98258:0` | `k_5d7380c879c969.93601751crwdns98260:0crwdne98260:0` | `crwdns98262:0crwdne98262:0` | [`crwdns98266:0crwdne98266:0`](crwdns98264:0crwdne98264:0) |
| [crwdns98270:0crwdne98270:0](crwdns98268:0crwdne98268:0) | `crwdns98272:0crwdne98272:0` | `crwdns98274:0crwdne98274:0` | `crwdns98276:0crwdne98276:0` | [`crwdns98280:0crwdne98280:0`](crwdns98278:0crwdne98278:0) |
| [crwdns98284:0crwdne98284:0](crwdns98282:0crwdne98282:0) | `crwdns98286:0crwdne98286:0` | `crwdns98288:0crwdne98288:0` | `crwdns98290:0crwdne98290:0` | [`crwdns98294:0crwdne98294:0`](crwdns98292:0crwdne98292:0) |
| [crwdns98298:0crwdne98298:0](crwdns98296:0crwdne98296:0) | `crwdns98300:0crwdne98300:0` | `crwdns98302:0crwdne98302:0` | `crwdns98304:0crwdne98304:0` | [`crwdns98308:0crwdne98308:0`](crwdns98306:0crwdne98306:0) |
diff --git a/docs/src/pages/system/basics/basics-aa.md b/docs/src/pages/system/basics/basics-aa.md
index 8251f6266bebbf..ab85b725324895 100644
--- a/docs/src/pages/system/basics/basics-aa.md
+++ b/docs/src/pages/system/basics/basics-aa.md
@@ -80,7 +80,7 @@ crwdns98482:0crwdne98482:0
- [crwdns98514:0crwdne98514:0](crwdns98512:0crwdne98512:0)
- [crwdns98518:0crwdne98518:0](crwdns98516:0crwdne98516:0)
-crwdns98520:0crwdne98520:0
+crwdns101436:0crwdne101436:0
```jsx
crwdns98522:0crwdne98522:0
@@ -126,7 +126,7 @@ crwdns98556:0{{ xs: 2, sm: 3, md: 4 }}crwdne98556:0
### crwdns98558:0crwdne98558:0
-crwdns98560:0crwdne98560:0
+crwdns101438:0crwdne101438:0
```jsx
crwdns98562:0{2}crwdnd98562:0{{ p: 3 }}crwdnd98562:0{{ p: 4 }}crwdne98562:0
@@ -140,7 +140,7 @@ crwdns98564:0crwdne98564:0
crwdns98570:0crwdne98570:0
-crwdns98572:0crwdne98572:0 crwdns98574:0crwdne98574:0 crwdns98576:0crwdne98576:0
+crwdns101440:0crwdne101440:0 crwdns98574:0crwdne98574:0 crwdns98576:0crwdne98576:0
#### crwdns98578:0crwdne98578:0
@@ -156,13 +156,13 @@ crwdns98600:0crwdne98600:0
#### crwdns98602:0crwdne98602:0
-crwdns98604:0crwdne98604:0 crwdns98606:0crwdne98606:0
+crwdns101442:0crwdne101442:0 crwdns101444:0crwdne101444:0
```jsx
crwdns98608:0{ style }crwdnd98608:0{ Box }crwdnd98608:0${gridGap}crwdne98608:0
```
-crwdns98610:0crwdne98610:0
+crwdns101446:0crwdne101446:0
```jsx
crwdns98612:0{ style }crwdnd98612:0${value}crwdnd98612:0${borderColor}crwdne98612:0
@@ -190,7 +190,7 @@ crwdns98632:0crwdne98632:0
## crwdns98634:0crwdne98634:0
-crwdns98636:0crwdne98636:0 crwdns98638:0crwdne98638:0
+crwdns101448:0crwdne101448:0 crwdns98638:0crwdne98638:0
crwdns98640:0crwdne98640:0
@@ -210,7 +210,7 @@ crwdns98658:0crwdne98658:0
- crwdns98660:0crwdne98660:0
- crwdns98662:0crwdne98662:0 crwdns98664:0crwdne98664:0
-- crwdns98666:0crwdne98666:0 crwdns98668:0crwdne98668:0
+- crwdns98666:0crwdne98666:0 crwdns101450:0crwdne101450:0
- crwdns98670:0crwdne98670:0 crwdns98672:0crwdne98672:0
- crwdns98674:0crwdne98674:0
- [crwdns98678:0crwdne98678:0](crwdns98676:0crwdne98676:0)
diff --git a/docs/src/pages/system/basics/basics-de.md b/docs/src/pages/system/basics/basics-de.md
index fae092420e68b6..eaae1a9d7f9af6 100644
--- a/docs/src/pages/system/basics/basics-de.md
+++ b/docs/src/pages/system/basics/basics-de.md
@@ -107,7 +107,7 @@ Um die Box-Komponente noch nützlicher zu machen, haben wir eine Sammlung von St
- [spacing](/system/spacing/#api)
- [typography](/system/typography/#api)
-Wenn Sie bereits `@material-ui/core` verwenden, können Sie unsere [vorgefertigte Box](/components/box/) Komponente verwenden (intern mit JSS):
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
```jsx
import Box from '@material-ui/core/Box';
@@ -190,7 +190,7 @@ const theme = {
### Kollokation
-Wenn Sie die Rasterpunktewerte gruppieren möchten, können Sie unsere ` breakpoints()` Helfer verwenden.
+If you want to group the breakpoint values, you can use the `breakpoints()` helper.
```jsx
import { compose, spacing, palette, breakpoints } from '@material-ui/system';
@@ -232,7 +232,7 @@ const Box = styled.div`
Verwenden Sie diesen Helfer, um Ihre eigene Style-Funktion zu erstellen.
-Wir unterstützen nicht alle CSS-Eigenschaften. Möglicherweise möchten Sie neue unterstützen. Es ist auch möglich, dass Sie das Designpfad-Präfix ändern möchten.
+Not all CSS properties are supported. Möglicherweise möchten Sie neue unterstützen. Es ist auch möglich, dass Sie das Designpfad-Präfix ändern möchten.
#### Argumente
@@ -248,7 +248,7 @@ Wir unterstützen nicht alle CSS-Eigenschaften. Möglicherweise möchten Sie neu
#### Beispiele
-We can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` we can reuse logic enabling the behavior we see in other spacing properties like `padding`.
+You can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`.
```jsx
import styled from 'styled-components';
@@ -264,7 +264,7 @@ const Grid = styled(Box)`${gridGap}`;
const example = <Grid display="grid" gridGap={[2, 3]}>...</Grid>;
```
-We can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
+You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
```jsx
import styled from 'styled-components';
@@ -316,7 +316,7 @@ Der `style()` Helfer kann auch verwendet werden, um Eigenschaften Stilobjekten i
## CSS-Eigenschaft
-Wenn Sie benutzerdefinierte CSS-Werte unterstützen möchten, können Sie unseren `css()` Helfer verwenden. Dieser verarbeitet die `css ` Eigenshaften.
+If you want to support custom CSS values, you can use the `css()` helper. Dieser verarbeitet die `css ` Eigenshaften.
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
@@ -336,7 +336,7 @@ In Praxis kann eine Box-Komponente viel Zeit sparen. In diesem Beispiel wird gez
- [Tachyons](https://tachyons.io/) war eine der ersten (2014) CSS-Bibliotheken, die das [Atomic CSS-Muster](https://css-tricks.com/lets-define-exactly-atomic-css/) förderten (oder funktionales CSS).
- Tachyons wurde später (2017) gefolgt von [Tailwind CSS](https://tailwindcss.com/). Sie haben Atomic CSS populärer gemacht.
-- [Twitter-Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) hat langsam atomare Klassennamen in v2, v3 und v4 eingeführt. Wir haben die Art, wie sie ihre "Helper-Klassen" gruppieren, als Inspiration genutzt.
+- [Twitter-Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) hat langsam atomare Klassennamen in v2, v3 und v4 eingeführt. The way they group their "Helper classes" was used as inspiration.
- In der Welt von React, war das [Styled System](https://github.com/jxnblk/styled-system) eins der ersten (2017), die Stilfunktionen unterstützte. Sie kann als generische Box-Komponente verwendet werden und ersetzt die atomaren CSS-Helfer sowie Helfer beim Schreiben neuer Komponenten.
- Große Unternehmen wie Pinterest, GitHub und Segment.io verwenden denselben Ansatz in verschiedenen Geschmacksrichtungen:
- [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/)
diff --git a/docs/src/pages/system/basics/basics-es.md b/docs/src/pages/system/basics/basics-es.md
index 26447e0a4ac66d..9ec5fb1b30246a 100644
--- a/docs/src/pages/system/basics/basics-es.md
+++ b/docs/src/pages/system/basics/basics-es.md
@@ -107,7 +107,7 @@ To make the Box component more useful, we have been building a collection of sty
- [spacing](/system/spacing/#api)
- [typography](/system/typography/#api)
-If you are already using `@material-ui/core`, you can use our [prepackaged Box](/components/box/) component (using JSS internally):
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
```jsx
import Box from '@material-ui/core/Box';
@@ -190,7 +190,7 @@ const theme = {
### Collocation
-If you want to group the breakpoint values, you can use our `breakpoints()` helper.
+If you want to group the breakpoint values, you can use the `breakpoints()` helper.
```jsx
import { compose, spacing, palette, breakpoints } from '@material-ui/system';
@@ -232,7 +232,7 @@ const Box = styled.div`
Use this helper to create your own style function.
-We don't support all the CSS properties. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
+Not all CSS properties are supported. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
#### Argumentos
@@ -248,7 +248,7 @@ We don't support all the CSS properties. It's possible that you want to support
#### Ejemplos
-We can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` we can reuse logic enabling the behavior we see in other spacing properties like `padding`.
+You can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`.
```jsx
import styled from 'styled-components';
@@ -264,7 +264,7 @@ const Grid = styled(Box)`${gridGap}`;
const example = <Grid display="grid" gridGap={[2, 3]}>...</Grid>;
```
-We can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
+You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
```jsx
import styled from 'styled-components';
@@ -316,7 +316,7 @@ The `style()` helper can also be used to maps properties to style objects in a t
## Propiedad CSS
-If you want to support custom CSS values, you can use our `css()` helper. It will process the `css` property.
+If you want to support custom CSS values, you can use the `css()` helper. It will process the `css` property.
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
@@ -336,7 +336,7 @@ In practice, a Box component can save you a lot of time. In this example, we dem
- [Tachyons](https://tachyons.io/) was one of the first (2014) CSS libraries to promote the [Atomic CSS pattern](https://css-tricks.com/lets-define-exactly-atomic-css/) (or Functional CSS).
- Tachyons was later on (2017) followed by [Tailwind CSS](https://tailwindcss.com/). They have made Atomic CSS more popular.
-- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. We have used the way they group their "Helper classes" as inspiration.
+- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. The way they group their "Helper classes" was used as inspiration.
- In the React world, [Styled System](https://github.com/jxnblk/styled-system) was one of the first (2017) to promote the style functions. It can be used as a generic Box component replacing the atomic CSS helpers as well as helpers to write new components.
- Large companies such as Pinterest, GitHub, and Segment.io are using the same approach in different flavours:
- [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/)
diff --git a/docs/src/pages/system/basics/basics-fr.md b/docs/src/pages/system/basics/basics-fr.md
index 8589429cd1aab5..3912db9e241075 100644
--- a/docs/src/pages/system/basics/basics-fr.md
+++ b/docs/src/pages/system/basics/basics-fr.md
@@ -107,7 +107,7 @@ To make the Box component more useful, we have been building a collection of sty
- [spacing](/system/spacing/#api)
- [typography](/system/typography/#api)
-If you are already using `@material-ui/core`, you can use our [prepackaged Box](/components/box/) component (using JSS internally):
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
```jsx
import Box from '@material-ui/core/Box';
@@ -190,7 +190,7 @@ const theme = {
### Collocation
-If you want to group the breakpoint values, you can use our `breakpoints()` helper.
+If you want to group the breakpoint values, you can use the `breakpoints()` helper.
```jsx
import { compose, spacing, palette, breakpoints } from '@material-ui/system';
@@ -232,7 +232,7 @@ const Box = styled.div`
Use this helper to create your own style function.
-We don't support all the CSS properties. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
+Not all CSS properties are supported. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
#### Paramètres
@@ -248,7 +248,7 @@ We don't support all the CSS properties. It's possible that you want to support
#### Exemples
-We can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` we can reuse logic enabling the behavior we see in other spacing properties like `padding`.
+You can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`.
```jsx
import styled from 'styled-components';
@@ -264,7 +264,7 @@ const Grid = styled(Box)`${gridGap}`;
const example = <Grid display="grid" gridGap={[2, 3]}>...</Grid>;
```
-We can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
+You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
```jsx
import styled from 'styled-components';
@@ -316,7 +316,7 @@ The `style()` helper can also be used to maps properties to style objects in a t
## CSS property
-If you want to support custom CSS values, you can use our `css()` helper. It will process the `css` property.
+If you want to support custom CSS values, you can use the `css()` helper. It will process the `css` property.
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
@@ -336,7 +336,7 @@ In practice, a Box component can save you a lot of time. In this example, we dem
- [Tachyons](https://tachyons.io/) was one of the first (2014) CSS libraries to promote the [Atomic CSS pattern](https://css-tricks.com/lets-define-exactly-atomic-css/) (or Functional CSS).
- Tachyons was later on (2017) followed by [Tailwind CSS](https://tailwindcss.com/). They have made Atomic CSS more popular.
-- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. We have used the way they group their "Helper classes" as inspiration.
+- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. The way they group their "Helper classes" was used as inspiration.
- In the React world, [Styled System](https://github.com/jxnblk/styled-system) was one of the first (2017) to promote the style functions. It can be used as a generic Box component replacing the atomic CSS helpers as well as helpers to write new components.
- Large companies such as Pinterest, GitHub, and Segment.io are using the same approach in different flavours:
- [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/)
diff --git a/docs/src/pages/system/basics/basics-ja.md b/docs/src/pages/system/basics/basics-ja.md
index 45148d43f9b867..f75a14c04a5291 100644
--- a/docs/src/pages/system/basics/basics-ja.md
+++ b/docs/src/pages/system/basics/basics-ja.md
@@ -1,18 +1,18 @@
# @material-ui/system
-<p class="description">Styled system & style functions for building powerful design systems.</p>
+<p class="description">強力なデザインシステムを構築するためのスタイル設定されたシステムおよびスタイル機能。</p>
## はじめに
-`@material-ui/system` provides low-level utility functions called "*style functions*" for building powerful design systems. 主な機能の一部：
+`@material-ui/system`は、 "*style functions*" と呼ばれる低レベルのユーティリティ関数を提供し、強力な設計システムを構築します。 主な機能の一部：
-- ⚛️ Access the theme values directly from the component props.
-- 🦋 Encourage UI consistency.
-- 🌈 Write responsive style effortlessly.
-- 🦎 Work with any theme object.
-- 💅 Work with the most popular CSS-in-JS solutions.
+- ⚛️コンポーネントのpropsからテーマの値に直接アクセスします。
+- 🦋 UIの一貫性を促進します。
+- 🌈 応答性に優れたスタイルを簡単に記述できます。
+- 🦎 どのようなテーマでも使用できます。
+- 💅 最も一般的なCSS-in-JSソリューションを使用します。
- 📦 Less than [4 KB gzipped](https://bundlephobia.com/result?p=@material-ui/system).
-- 🚀 [Fast enough](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uisystem) not to be a bottleneck at runtime.
+- 🚀[実行時にボトルネックにならないほど高速](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-benchmark/README.md#material-uisystem)。
It's important to understand that this package exposes pure (side-effect free) style functions with this signature: `({ theme, ...style }) => style`, **that's it**.
@@ -107,7 +107,7 @@ To make the Box component more useful, we have been building a collection of sty
- [spacing](/system/spacing/#api)
- [typography](/system/typography/#api)
-If you are already using `@material-ui/core`, you can use our [prepackaged Box](/components/box/) component (using JSS internally):
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
```jsx
import Box from '@material-ui/core/Box';
@@ -190,7 +190,7 @@ const theme = {
### Collocation
-If you want to group the breakpoint values, you can use our `breakpoints()` helper.
+If you want to group the breakpoint values, you can use the `breakpoints()` helper.
```jsx
import { compose, spacing, palette, breakpoints } from '@material-ui/system';
@@ -232,7 +232,7 @@ const Box = styled.div`
Use this helper to create your own style function.
-We don't support all the CSS properties. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
+Not all CSS properties are supported. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
#### 引数
@@ -248,7 +248,7 @@ We don't support all the CSS properties. It's possible that you want to support
#### 例
-We can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` we can reuse logic enabling the behavior we see in other spacing properties like `padding`.
+You can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`.
```jsx
import styled from 'styled-components';
@@ -264,7 +264,7 @@ const Grid = styled(Box)`${gridGap}`;
const example = <Grid display="grid" gridGap={[2, 3]}>...</Grid>;
```
-We can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
+You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
```jsx
import styled from 'styled-components';
@@ -316,7 +316,7 @@ The `style()` helper can also be used to maps properties to style objects in a t
## CSS property
-If you want to support custom CSS values, you can use our `css()` helper. It will process the `css` property.
+If you want to support custom CSS values, you can use the `css()` helper. It will process the `css` property.
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
@@ -336,7 +336,7 @@ In practice, a Box component can save you a lot of time. In this example, we dem
- [Tachyons](https://tachyons.io/) was one of the first (2014) CSS libraries to promote the [Atomic CSS pattern](https://css-tricks.com/lets-define-exactly-atomic-css/) (or Functional CSS).
- Tachyons was later on (2017) followed by [Tailwind CSS](https://tailwindcss.com/). They have made Atomic CSS more popular.
-- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. We have used the way they group their "Helper classes" as inspiration.
+- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. The way they group their "Helper classes" was used as inspiration.
- In the React world, [Styled System](https://github.com/jxnblk/styled-system) was one of the first (2017) to promote the style functions. It can be used as a generic Box component replacing the atomic CSS helpers as well as helpers to write new components.
- Large companies such as Pinterest, GitHub, and Segment.io are using the same approach in different flavours:
- [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/)
diff --git a/docs/src/pages/system/basics/basics-pt.md b/docs/src/pages/system/basics/basics-pt.md
index 3263d4795cbc89..f5b9e41f73c201 100644
--- a/docs/src/pages/system/basics/basics-pt.md
+++ b/docs/src/pages/system/basics/basics-pt.md
@@ -107,7 +107,7 @@ Para tornar o componente Box mais útil, estamos construindo uma coleção de fu
- [spacing](/system/sizing/#api)
- [typography](/system/typography/#api)
-Se você já estiver usando `@material-ui/core`, você pode usar nosso componente [pré-empacotado Box](/components/box/) (usando JSS internamente):
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
```jsx
import Box from '@material-ui/core/Box';
@@ -190,7 +190,7 @@ const theme = {
### Colocação
-Se você quiser agrupar valores de ponto de quebra, você pode usar nosso utilitário `breakpoints()`.
+If you want to group the breakpoint values, you can use the `breakpoints()` helper.
```jsx
import { compose, spacing, palette, breakpoints } from '@material-ui/system';
@@ -232,7 +232,7 @@ const Box = styled.div`
Use esta função utilitária para criar sua própria função de estilo.
-Nós não suportamos todas as propriedades CSS. É possível que você queira suportar novas. Também é possível que você queira alterar o prefixo do caminho do tema.
+Not all CSS properties are supported. É possível que você queira suportar novas. Também é possível que você queira alterar o prefixo do caminho do tema.
#### Argumentos
@@ -248,7 +248,7 @@ Nós não suportamos todas as propriedades CSS. É possível que você queira su
#### Exemplos
-Podemos criar um componente que suporte algumas propriedades CSS na grade, como um `grid-gap`. Fornecendo `spacing` como `themeKey`, podemos reutilizar a lógica, permitindo o comportamento que vemos em outras propriedades de espaçamento, como `padding`.
+You can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`.
```jsx
import styled from 'styled-components';
@@ -264,7 +264,7 @@ const Grid = styled(Box)`${gridGap}`;
const example = <Grid display="grid" gridGap={[2, 3]}>...</Grid>;
```
-Nós também podemos customizar o nome da propriedade adicionando ambos, `prop` e `cssProperty` e transformando o valor, adicionando uma função `transform`.
+You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
```jsx
import styled from 'styled-components';
@@ -316,7 +316,7 @@ A função auxiliar `style()` também pode ser usada para mapear propriedades pa
## Propriedade CSS
-Se você quiser suportar valores customizados de CSS, você pode usar nosso utilitário `css()`. Ele irá processar a propriedade `css`.
+If you want to support custom CSS values, you can use the `css()` helper. Ele irá processar a propriedade `css`.
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
@@ -336,7 +336,7 @@ Na prática, um componente do Box pode poupar muito tempo. Neste exemplo, demons
- [Tachyons](https://tachyons.io/) foi uma das primeiras bibliotecas CSS (2014) a promover o [padrão de CSS atômico](https://css-tricks.com/lets-define-exactly-atomic-css/) (ou CSS funcional).
- Tachyons foi mais tarde (2017) seguido por [Tailwind CSS](https://tailwindcss.com/). Eles tornaram o CSS atômico mais popular.
-- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) introduziu lentamente nomes de classes atômicas em v2, v3 e v4. Usamos a maneira como eles agrupam suas "classes de ajuda" como inspiração.
+- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) introduziu lentamente nomes de classes atômicas em v2, v3 e v4. The way they group their "Helper classes" was used as inspiration.
- No mundo React, [Styled System](https://github.com/jxnblk/styled-system) foi um dos primeiros (2017) a promover as funções de estilo. Ele pode ser usado como um componente genérico do Box, substituindo os auxiliares CSS atômicos, bem como os auxiliares para escrever novos componentes.
- Grandes empresas como Pinterest, GitHub e Segment.io estão usando a mesma abordagem em diferentes gostos:
- [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/)
diff --git a/docs/src/pages/system/basics/basics-ru.md b/docs/src/pages/system/basics/basics-ru.md
index db9d9f28c14fe9..6ab480e3155b7d 100644
--- a/docs/src/pages/system/basics/basics-ru.md
+++ b/docs/src/pages/system/basics/basics-ru.md
@@ -107,7 +107,7 @@ To make the Box component more useful, we have been building a collection of sty
- [spacing](/system/spacing/#api)
- [typography](/system/typography/#api)
-If you are already using `@material-ui/core`, you can use our [prepackaged Box](/components/box/) component (using JSS internally):
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
```jsx
import Box from '@material-ui/core/Box';
@@ -190,7 +190,7 @@ const theme = {
### Collocation
-If you want to group the breakpoint values, you can use our `breakpoints()` helper.
+If you want to group the breakpoint values, you can use the `breakpoints()` helper.
```jsx
import { compose, spacing, palette, breakpoints } from '@material-ui/system';
@@ -232,7 +232,7 @@ const Box = styled.div`
Use this helper to create your own style function.
-We don't support all the CSS properties. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
+Not all CSS properties are supported. It's possible that you want to support new ones. It's also possible that you want to change the theme path prefix.
#### Аргументы
@@ -248,7 +248,7 @@ We don't support all the CSS properties. It's possible that you want to support
#### Примеры
-We can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` we can reuse logic enabling the behavior we see in other spacing properties like `padding`.
+You can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`.
```jsx
import styled from 'styled-components';
@@ -264,7 +264,7 @@ const Grid = styled(Box)`${gridGap}`;
const example = <Grid display="grid" gridGap={[2, 3]}>...</Grid>;
```
-We can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
+You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
```jsx
import styled from 'styled-components';
@@ -316,7 +316,7 @@ The `style()` helper can also be used to maps properties to style objects in a t
## Свойство CSS
-If you want to support custom CSS values, you can use our `css()` helper. It will process the `css` property.
+If you want to support custom CSS values, you can use the `css()` helper. It will process the `css` property.
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
@@ -336,7 +336,7 @@ In practice, a Box component can save you a lot of time. In this example, we dem
- [Tachyons](https://tachyons.io/) was one of the first (2014) CSS libraries to promote the [Atomic CSS pattern](https://css-tricks.com/lets-define-exactly-atomic-css/) (or Functional CSS).
- Tachyons was later on (2017) followed by [Tailwind CSS](https://tailwindcss.com/). They have made Atomic CSS more popular.
-- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. We have used the way they group their "Helper classes" as inspiration.
+- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) has slowly introduced atomic class names in v2, v3, and v4. The way they group their "Helper classes" was used as inspiration.
- In the React world, [Styled System](https://github.com/jxnblk/styled-system) was one of the first (2017) to promote the style functions. It can be used as a generic Box component replacing the atomic CSS helpers as well as helpers to write new components.
- Large companies such as Pinterest, GitHub, and Segment.io are using the same approach in different flavours:
- [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/)
diff --git a/docs/src/pages/system/basics/basics-zh.md b/docs/src/pages/system/basics/basics-zh.md
index 415d8bc6c11331..92c9b1026a77c5 100644
--- a/docs/src/pages/system/basics/basics-zh.md
+++ b/docs/src/pages/system/basics/basics-zh.md
@@ -107,7 +107,7 @@ export default App
- [spacing](/system/spacing/#api)
- [typography](/system/typography/#api)
-如果你已经在使用 `@material-ui/core`，你可以用我们 [预写好的 Box ](/components/box/)组件 (内部使用了 JSS)：
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
```jsx
import Box from '@material-ui/core/Box';
@@ -190,7 +190,7 @@ const theme = {
### Collocation
-如果你想要聚合一组断点值，可以使用我们的工具函数 `breakpoints()` 。
+If you want to group the breakpoint values, you can use the `breakpoints()` helper.
```jsx
import { compose, spacing, palette, breakpoints } from '@material-ui/system';
@@ -232,7 +232,7 @@ const Box = styled.div`
你可以使用这个函数来创建你自己的样式工具。
-我们没有支持所有CSS属性。 不过如果你想，你可以支持一个新的属性。 改变的主题路径的前缀也是可以的。
+Not all CSS properties are supported. 不过如果你想，你可以支持一个新的属性。 改变的主题路径的前缀也是可以的。
#### 参数
@@ -248,7 +248,7 @@ const Box = styled.div`
#### 例子
-我们可以创建一个支持一些CSS网格属性的组件，比如` grid-gap ` 。 通过提供`spacing`作为` themeKey `我们可以重用逻辑来启用我们在其他间距属性（如`padding`）中看到的行为。
+You can create a component that supports some CSS grid properties like `grid-gap`. By supplying `spacing` as the `themeKey` you can reuse logic enabling the behavior we see in other spacing properties like `padding`.
```jsx
import styled from 'styled-components';
@@ -264,7 +264,7 @@ const Grid = styled(Box)`${gridGap}`;
const example = <Grid display="grid" gridGap={[2, 3]}>...</Grid>;
```
-我们还可以通过添加` prop `和` cssProperty `来定制属性名，还可以添加`transform`方法来转换它的值。
+You can also customize the prop name by adding both a `prop` and `cssProperty` and transform the value by adding a `transform` function.
```jsx
import styled from 'styled-components';
@@ -316,7 +316,7 @@ const palette = compose(textColor, bgcolor);
## CSS 属性
-如果你想要自定义CSS值，可以使用`css()`， 它可以处理的 `css` 属性。
+If you want to support custom CSS values, you can use the `css()` helper. 它可以处理的 `css` 属性。
{{"demo": "pages/system/basics/CssProp.js", "defaultCodeOpen": true}}
@@ -336,7 +336,7 @@ styled-system在[解释它如何工作](https://github.com/jxnblk/styled-system/
- [Tachyons](https://tachyons.io/) (2014年) 是第一个促进了 [原子 CSS 模式(Atomic CSS pattern)](https://css-tricks.com/lets-define-exactly-atomic-css/) 发展的CSS库。
- TachyTachyons (2017年) 跟随了 [Tailwind CSS](https://tailwindcss.com/) 的脚步 他们让原子CSS更受欢迎。
-- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) 在v2，v3, 和v4中一步步介绍了原子类名 他们使用 `Helper classes` 聚合它们的方式给了我们启发。
+- [Twitter Bootstrap](https://getbootstrap.com/docs/4.1/utilities/borders/) 在v2，v3, 和v4中一步步介绍了原子类名 The way they group their "Helper classes" was used as inspiration.
- 在 React 世界中， [Styled System](https://github.com/jxnblk/styled-system) (2017年) 是第一个推动样式函数的。 它可以做出一个通用的 Box 组件来已经衍生其他组件，这种方式可以替换原子CSS之中的辅助原子类的做法。
- Large companies such as Pinterest, GitHub, and Segment.io are using the same approach in different flavours:
- [Evergreen Box](https://evergreen.segment.com/components/layout-primitives/)
diff --git a/docs/src/pages/system/borders/borders-ja.md b/docs/src/pages/system/borders/borders-ja.md
index 1626164ecf64dc..d1d839e46e0b80 100644
--- a/docs/src/pages/system/borders/borders-ja.md
+++ b/docs/src/pages/system/borders/borders-ja.md
@@ -1,6 +1,6 @@
-# Borders
+# ボーダー
-<p class="description">Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
+<p class="description">Use border utilities to quickly style the border and border-radius of an element. 画像、ボタン、その他の要素に最適です。</p>
## Border
diff --git a/docs/src/pages/system/display/display-aa.md b/docs/src/pages/system/display/display-aa.md
index d5702443bbe8b7..dc0734ae7aec83 100644
--- a/docs/src/pages/system/display/display-aa.md
+++ b/docs/src/pages/system/display/display-aa.md
@@ -1,6 +1,6 @@
# crwdns98798:0crwdne98798:0
-<p class="description">crwdns98800:0crwdne98800:0 crwdns98802:0crwdne98802:0</p>
+<p class="description">crwdns101452:0crwdne101452:0 crwdns98802:0crwdne98802:0</p>
## crwdns98804:0crwdne98804:0
diff --git a/docs/src/pages/system/display/display-de.md b/docs/src/pages/system/display/display-de.md
index 20404997bdf746..7b6b1d86e5bf97 100644
--- a/docs/src/pages/system/display/display-de.md
+++ b/docs/src/pages/system/display/display-de.md
@@ -1,6 +1,6 @@
# Anzeige
-<p class="description">Wechseln Sie mit unseren Anzeigekomponenten schnell und ansprechend den Anzeigewert von Komponenten und mehr. Unterstützt einige der gebräuchlichsten Werte sowie einige Extras zur Steuerung der Anzeige beim Drucken.</p>
+<p class="description">Quickly and responsively toggle the display value of components and more with the display utilities. Unterstützt einige der gebräuchlichsten Werte sowie einige Extras zur Steuerung der Anzeige beim Drucken.</p>
## Beispiele
diff --git a/docs/src/pages/system/display/display-es.md b/docs/src/pages/system/display/display-es.md
index 375374b8adbd38..18521a9e9eeb9f 100644
--- a/docs/src/pages/system/display/display-es.md
+++ b/docs/src/pages/system/display/display-es.md
@@ -1,6 +1,6 @@
# Mostrar
-<p class="description">Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
+<p class="description">Quickly and responsively toggle the display value of components and more with the display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
## Ejemplos
diff --git a/docs/src/pages/system/display/display-fr.md b/docs/src/pages/system/display/display-fr.md
index 6b066b81296b0f..e9874a5aa74b6e 100644
--- a/docs/src/pages/system/display/display-fr.md
+++ b/docs/src/pages/system/display/display-fr.md
@@ -1,6 +1,6 @@
# Display (Affichage)
-<p class="description">Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
+<p class="description">Quickly and responsively toggle the display value of components and more with the display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
## Exemples
diff --git a/docs/src/pages/system/display/display-ja.md b/docs/src/pages/system/display/display-ja.md
index e5100e923868a8..2f88a56fb26cfe 100644
--- a/docs/src/pages/system/display/display-ja.md
+++ b/docs/src/pages/system/display/display-ja.md
@@ -1,6 +1,6 @@
# ディスプレイ
-<p class="description">Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
+<p class="description">Quickly and responsively toggle the display value of components and more with the display utilities. 一般的な値の一部のサポートと、印刷時の表示を制御するための追加機能が含まれています。</p>
## 例
@@ -18,7 +18,7 @@
{{"demo": "pages/system/display/Block.js"}}
-## Hiding elements
+## 要素を隠す
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
diff --git a/docs/src/pages/system/display/display-pt.md b/docs/src/pages/system/display/display-pt.md
index 8c2ccd54a96cc5..dfd3c6fd3fc002 100644
--- a/docs/src/pages/system/display/display-pt.md
+++ b/docs/src/pages/system/display/display-pt.md
@@ -1,6 +1,6 @@
# Exibição
-<p class="description">Rapidamente e responsivamente alterne o valor de exibição de componentes e muito mais com nossos utilitários de exibição. Inclui suporte para alguns dos valores mais comuns, bem como alguns extras para controlar a exibição durante a impressão.</p>
+<p class="description">Quickly and responsively toggle the display value of components and more with the display utilities. Inclui suporte para alguns dos valores mais comuns, bem como alguns extras para controlar a exibição durante a impressão.</p>
## Exemplos
diff --git a/docs/src/pages/system/display/display-ru.md b/docs/src/pages/system/display/display-ru.md
index a1a0141f636cfd..0ed3aa24c22cd2 100644
--- a/docs/src/pages/system/display/display-ru.md
+++ b/docs/src/pages/system/display/display-ru.md
@@ -1,6 +1,6 @@
# Display
-<p class="description">Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
+<p class="description">Quickly and responsively toggle the display value of components and more with the display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.</p>
## Примеры
diff --git a/docs/src/pages/system/display/display-zh.md b/docs/src/pages/system/display/display-zh.md
index 0fa699ac73bd41..83d4cfe207da27 100644
--- a/docs/src/pages/system/display/display-zh.md
+++ b/docs/src/pages/system/display/display-zh.md
@@ -1,6 +1,6 @@
# 显示
-<p class="description">使用我们的显示实用程序快速响应地切换组件的显示值等。 包括对一些更常见值的支持，以及一些用于在打印时控制显示的附加功能。</p>
+<p class="description">Quickly and responsively toggle the display value of components and more with the display utilities. 包括对一些更常见值的支持，以及一些用于在打印时控制显示的附加功能。</p>
## 例子
diff --git a/docs/src/pages/system/flexbox/flexbox-ja.md b/docs/src/pages/system/flexbox/flexbox-ja.md
index 97f53cbeeba355..80591868812c74 100644
--- a/docs/src/pages/system/flexbox/flexbox-ja.md
+++ b/docs/src/pages/system/flexbox/flexbox-ja.md
@@ -4,7 +4,7 @@
**flexboxに不慣れ**な場合、 [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) を読むことをおすすめします。
-## Properties for the Parent
+## 親のプロパティ
### display
@@ -61,7 +61,7 @@
{{"demo": "pages/system/flexbox/AlignContent.js"}}
-## Properties for the Children
+## 子供のプロパティ
### order
diff --git a/docs/src/pages/system/sizing/sizing-aa.md b/docs/src/pages/system/sizing/sizing-aa.md
index 92f049d74f04e4..92dde86d4a848f 100644
--- a/docs/src/pages/system/sizing/sizing-aa.md
+++ b/docs/src/pages/system/sizing/sizing-aa.md
@@ -1,6 +1,6 @@
# crwdns99276:0crwdne99276:0
-<p class="description">crwdns99278:0crwdne99278:0</p>
+<p class="description">crwdns101454:0crwdne101454:0</p>
## crwdns99280:0crwdne99280:0
diff --git a/docs/src/pages/system/sizing/sizing-de.md b/docs/src/pages/system/sizing/sizing-de.md
index 04348adc154536..08693fedf426ad 100644
--- a/docs/src/pages/system/sizing/sizing-de.md
+++ b/docs/src/pages/system/sizing/sizing-de.md
@@ -1,6 +1,6 @@
# Dimensionierung
-<p class="description">Mit unseren Hilfsmitteln für Breite und Höhe können Sie ein Element problemlos so breit oder so groß (relativ zu seinem übergeordneten Element) machen, wie sie wollen.</p>
+<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
## Unterstützte Werte
diff --git a/docs/src/pages/system/sizing/sizing-es.md b/docs/src/pages/system/sizing/sizing-es.md
index c403eeb0a67e79..833369eef73191 100644
--- a/docs/src/pages/system/sizing/sizing-es.md
+++ b/docs/src/pages/system/sizing/sizing-es.md
@@ -1,6 +1,6 @@
# Sizing
-<p class="description">Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.</p>
+<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
## Supported values
diff --git a/docs/src/pages/system/sizing/sizing-fr.md b/docs/src/pages/system/sizing/sizing-fr.md
index a773f46b3f3900..ab4e90117db010 100644
--- a/docs/src/pages/system/sizing/sizing-fr.md
+++ b/docs/src/pages/system/sizing/sizing-fr.md
@@ -1,6 +1,6 @@
# Sizing
-<p class="description">Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.</p>
+<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
## Supported values
diff --git a/docs/src/pages/system/sizing/sizing-ja.md b/docs/src/pages/system/sizing/sizing-ja.md
index a773f46b3f3900..18001ce47f3fad 100644
--- a/docs/src/pages/system/sizing/sizing-ja.md
+++ b/docs/src/pages/system/sizing/sizing-ja.md
@@ -1,10 +1,10 @@
# Sizing
-<p class="description">Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.</p>
+<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
## Supported values
-The sizing style functions support different property input type:
+サイズ変更スタイル関数は異なるプロパティ入力タイプをしています。
```jsx
<Box width={1/4}> // Números em [0,1] são multiplicados por 100 e convertido em % valores.
@@ -44,11 +44,11 @@ The sizing style functions support different property input type:
import { sizing } from '@material-ui/system';
```
-| Import name | Prop | CSS property | Theme key |
-|:----------- |:----------- |:------------ |:--------- |
-| `width` | `width` | `width` | none |
-| `maxWidth` | `maxWidth` | `max-width` | none |
-| `minWidth` | `minWidth` | `min-width` | none |
-| `height` | `height` | `height` | none |
-| `maxHeight` | `maxHeight` | `max-height` | none |
-| `minHeight` | `minHeight` | `min-height` | none |
\ No newline at end of file
+| インポート名 | プロパティ | CSSプロパティ | テーマキー |
+|:----------- |:----------- |:------------ |:----- |
+| `width` | `width` | `width` | none |
+| `maxWidth` | `maxWidth` | `max-width` | none |
+| `minWidth` | `minWidth` | `min-width` | none |
+| `height` | `height` | `height` | none |
+| `maxHeight` | `maxHeight` | `max-height` | none |
+| `minHeight` | `minHeight` | `min-height` | none |
\ No newline at end of file
diff --git a/docs/src/pages/system/sizing/sizing-pt.md b/docs/src/pages/system/sizing/sizing-pt.md
index 986f1a58888fe4..b09af042a9a5cc 100644
--- a/docs/src/pages/system/sizing/sizing-pt.md
+++ b/docs/src/pages/system/sizing/sizing-pt.md
@@ -1,6 +1,6 @@
# Dimensionando
-<p class="description">Facilmente faça um elemento tão largo ou tão alto (relativo a seu pai) com nossos utilitários de largura e altura.</p>
+<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
## Valores suportados
diff --git a/docs/src/pages/system/sizing/sizing-ru.md b/docs/src/pages/system/sizing/sizing-ru.md
index 514663cc72c5c9..df0228574e3a11 100644
--- a/docs/src/pages/system/sizing/sizing-ru.md
+++ b/docs/src/pages/system/sizing/sizing-ru.md
@@ -1,6 +1,6 @@
# Sizing
-<p class="description">Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.</p>
+<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
## Supported values
diff --git a/docs/src/pages/system/sizing/sizing-zh.md b/docs/src/pages/system/sizing/sizing-zh.md
index e79a9c8fc2971d..08003ee52a77ba 100644
--- a/docs/src/pages/system/sizing/sizing-zh.md
+++ b/docs/src/pages/system/sizing/sizing-zh.md
@@ -1,6 +1,6 @@
# Sizing
-<p class="description">使用width和height工具集轻松地将元素设置宽或高（相对于其父元素）。</p>
+<p class="description">Easily make an element as wide or as tall (relative to its parent) with the width and height utilities.</p>
## 支持的值
diff --git a/docs/src/pages/system/spacing/spacing-aa.md b/docs/src/pages/system/spacing/spacing-aa.md
index 481ff089ed2596..b3e788139e15c7 100644
--- a/docs/src/pages/system/spacing/spacing-aa.md
+++ b/docs/src/pages/system/spacing/spacing-aa.md
@@ -73,14 +73,14 @@ crwdns99432:0{ spacing }crwdne99432:0
| crwdns99434:0crwdne99434:0 | crwdns99436:0crwdne99436:0 | crwdns99438:0crwdne99438:0 | crwdns99440:0crwdne99440:0 |
|:---------------------------- |:------------------------------------------------------------------------------ |:---------------------------- |:---------------------------------------------------------- |
-| `crwdns99442:0crwdne99442:0` | `dns99444:0crwdne99444:0ask_5d6165c4afcf04.18064654crwdns99444:0crwdne99444:0` | `crwdns99446:0crwdne99446:0` | [`crwdns99450:0crwdne99450:0`](crwdns99448:0crwdne99448:0) |
+| `crwdns99442:0crwdne99442:0` | `dns99444:0crwdne99444:0ask_5d7380c188f458.43165352crwdns99444:0crwdne99444:0` | `crwdns99446:0crwdne99446:0` | [`crwdns99450:0crwdne99450:0`](crwdns99448:0crwdne99448:0) |
| `crwdns99452:0crwdne99452:0` | `crwdns99454:0crwdne99454:0` | `crwdns99456:0crwdne99456:0` | [`crwdns99460:0crwdne99460:0`](crwdns99458:0crwdne99458:0) |
| `crwdns99462:0crwdne99462:0` | `crwdns99464:0crwdne99464:0` | `crwdns99466:0crwdne99466:0` | [`crwdns99470:0crwdne99470:0`](crwdns99468:0crwdne99468:0) |
| `crwdns99472:0crwdne99472:0` | `crwdns99474:0crwdne99474:0` | `crwdns99476:0crwdne99476:0` | [`crwdns99480:0crwdne99480:0`](crwdns99478:0crwdne99478:0) |
| `crwdns99482:0crwdne99482:0` | `crwdns99484:0crwdne99484:0` | `crwdns99486:0crwdne99486:0` | [`crwdns99490:0crwdne99490:0`](crwdns99488:0crwdne99488:0) |
| `crwdns99492:0crwdne99492:0` | `crwdns99494:0crwdne99494:0` | crwdns99496:0crwdne99496:0 | [`crwdns99500:0crwdne99500:0`](crwdns99498:0crwdne99498:0) |
| `crwdns99502:0crwdne99502:0` | `crwdns99504:0crwdne99504:0` | crwdns99506:0crwdne99506:0 | [`crwdns99510:0crwdne99510:0`](crwdns99508:0crwdne99508:0) |
-| `crwdns99512:0crwdne99512:0` | `k_5d6165c4ba90e8.67055464crwdns99514:0crwdne99514:0` | `crwdns99516:0crwdne99516:0` | [`crwdns99520:0crwdne99520:0`](crwdns99518:0crwdne99518:0) |
+| `crwdns99512:0crwdne99512:0` | `k_5d7380c18fd0a5.74004536crwdns99514:0crwdne99514:0` | `crwdns99516:0crwdne99516:0` | [`crwdns99520:0crwdne99520:0`](crwdns99518:0crwdne99518:0) |
| `crwdns99522:0crwdne99522:0` | `crwdns99524:0crwdne99524:0` | `crwdns99526:0crwdne99526:0` | [`crwdns99530:0crwdne99530:0`](crwdns99528:0crwdne99528:0) |
| `crwdns99532:0crwdne99532:0` | `crwdns99534:0crwdne99534:0` | `crwdns99536:0crwdne99536:0` | [`crwdns99540:0crwdne99540:0`](crwdns99538:0crwdne99538:0) |
| `crwdns99542:0crwdne99542:0` | `crwdns99544:0crwdne99544:0` | `crwdns99546:0crwdne99546:0` | [`crwdns99550:0crwdne99550:0`](crwdns99548:0crwdne99548:0) |
diff --git a/docs/src/pages/system/spacing/spacing-ja.md b/docs/src/pages/system/spacing/spacing-ja.md
index 29488eb4895380..ea7e5276764f60 100644
--- a/docs/src/pages/system/spacing/spacing-ja.md
+++ b/docs/src/pages/system/spacing/spacing-ja.md
@@ -1,10 +1,10 @@
-# Spacing
+# 間隔
-<p class="description">A wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.</p>
+<p class="description">要素の外観を変更するための、応答の短いマージンとパディングユーティリティークラス。</p>
-## Notation
+## 表記
-The space utility converts shorthand margin and padding props to margin and padding CSS declarations. The props are named using the format `{property}{sides}`.
+スペースユーティリティは、簡易マージンとパディングプロップをマージンとパディングのCSS宣言に変換します。 プロップには、`{property}{sides}`という形式で名前が付けられます。
Where *property* is one of:
diff --git a/docs/src/pages/system/typography/typography-ja.md b/docs/src/pages/system/typography/typography-ja.md
index df1ad6cf079e77..b31ba1c363aa35 100644
--- a/docs/src/pages/system/typography/typography-ja.md
+++ b/docs/src/pages/system/typography/typography-ja.md
@@ -1,8 +1,8 @@
# タイポグラフィ
-<p class="description">Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.</p>
+<p class="description">位置合わせ、ラッピング、重みなどをコントロールする一般的なテキストユーティリティのドキュメントと例。</p>
-## Text alignment
+## テキストの位置
```jsx
<Box textAlign="left">…
@@ -34,7 +34,7 @@
{{"demo": "pages/system/typography/FontSize.js"}}
-## Font Style
+## フォントスタイル
```jsx
<Box fontStyle="normal">…
@@ -53,7 +53,7 @@
{{"demo": "pages/system/typography/FontFamily.js"}}
-## Letter Spacing
+## 文字間隔
```jsx
<Box letterSpacing={6}>…
@@ -62,7 +62,7 @@
{{"demo": "pages/system/typography/LetterSpacing.js"}}
-## Line Height
+## 行の高さ
```jsx
<Box lineHeight="normal">…
@@ -80,7 +80,7 @@ import { typography } from '@material-ui/system';
| Import name | Prop | CSS property | Theme key |
|:--------------- |:--------------- |:---------------- |:---------------------------------------------------------------------- |
| `fontFamily` | `fontFamily` | `font-family` | [`typography`](/customization/default-theme/?expend-path=$.typography) |
-| `fontSize` | `fontSize` | `フォント サイズ` | [`typography`](/customization/default-theme/?expend-path=$.typography) |
+| `fontSize` | `fontSize` | `font-size` | [`typography`](/customization/default-theme/?expend-path=$.typography) |
| `fontStyle` | `fontStyle` | `font-style` | [`typography`](/customization/default-theme/?expend-path=$.typography) |
| `fontWeight` | `fontWeight` | `font-weight` | [`typography`](/customization/default-theme/?expend-path=$.typography) |
| `letterSpacing` | `letterSpacing` | `letter-spacing` | none |
diff --git a/docs/src/pages/versions/versions-aa.md b/docs/src/pages/versions/versions-aa.md
index ef55308fa4578d..808f5f5fa3c036 100644
--- a/docs/src/pages/versions/versions-aa.md
+++ b/docs/src/pages/versions/versions-aa.md
@@ -16,9 +16,9 @@ crwdns99726:0crwdne99726:0
## crwdns99728:0crwdne99728:0
-crwdns99730:0crwdne99730:0 crwdns99732:0crwdne99732:0 crwdns99734:0crwdne99734:0
+crwdns101456:0crwdne101456:0 crwdns101458:0crwdne101458:0
-crwdns99736:0crwdne99736:0 crwdns99738:0crwdne99738:0 crwdns99740:0crwdne99740:0
+crwdns101460:0crwdne101460:0
crwdns99742:0crwdne99742:0 crwdns99744:0crwdne99744:0 crwdns99746:0crwdne99746:0
@@ -28,7 +28,7 @@ crwdns99742:0crwdne99742:0 crwdns99744:0crwdne99744:0 crwdns99746:0crwdne99746:0
## crwdns99760:0crwdne99760:0
-crwdns99762:0crwdne99762:0
+crwdns101462:0crwdne101462:0
crwdns99764:0crwdne99764:0
@@ -47,24 +47,24 @@ crwdns99764:0crwdne99764:0
| crwdns99788:0crwdne99788:0 crwdns99790:0crwdne99790:0 | crwdns99792:0crwdne99792:0 |
-crwdns99794:0crwdne99794:0
+crwdns101464:0crwdne101464:0
## crwdns99796:0crwdne99796:0
-crwdns99798:0crwdne99798:0 crwdns99800:0crwdne99800:0
+crwdns101466:0crwdne101466:0 crwdns99800:0crwdne99800:0
## crwdns99802:0crwdne99802:0
crwdns99804:0crwdne99804:0
-crwdns99806:0crwdne99806:0
+crwdns101468:0crwdne101468:0
-- crwdns99808:0crwdne99808:0
-- crwdns99810:0crwdne99810:0
+- crwdns101470:0crwdne101470:0
+- crwdns101472:0crwdne101472:0
-crwdns99812:0crwdne99812:0
+### crwdns101474:0crwdne101474:0
-- crwdns99814:0crwdne99814:0
-- crwdns99816:0crwdne99816:0
-- crwdns99818:0crwdne99818:0
-- crwdns99820:0crwdne99820:0
\ No newline at end of file
+- crwdns101476:0crwdne101476:0
+- crwdns101478:0crwdne101478:0
+- crwdns101480:0crwdne101480:0
+- crwdns101482:0crwdne101482:0
\ No newline at end of file
diff --git a/docs/src/pages/versions/versions-de.md b/docs/src/pages/versions/versions-de.md
index 95ec6069aa88a8..5a2b0bf9cc58f7 100644
--- a/docs/src/pages/versions/versions-de.md
+++ b/docs/src/pages/versions/versions-de.md
@@ -16,9 +16,9 @@ Hier finden Sie die neuesten unveröffentlichten Dokumentationen und Codes. Sie
## Versionierungsstrategie
-Wir erkennen an, dass Sie **Stabilität** aus der Material-UI-Bibliothek benötigen. Stabilität stellt sicher, dass wiederverwendbare Komponenten und Bibliotheken, Lernprogramme, Tools und erlernte Methoden nicht unerwartet veraltet werden. Stabilität ist wichtig für das Gedeihen des Ökosystems um Material-UI.
+Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
-Dieses Dokument enthält ** die Praktiken, die wir befolgen ** um Ihnen eine hochmoderne UI-Bibliothek mit ausgewogener Stabilität zu bieten. Wir bemühen uns sicherzustellen, dass zukünftige Änderungen immer auf vorhersehbare Weise eingeführt werden. Wir möchten, dass alle, die auf die Material-UI angewiesen sind, wissen, wann und wie neue Funktionen hinzugefügt werden, und dass sie gut vorbereitet sind, wenn veraltete Funktionen entfernt werden.
+This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.
Die Material-UI folgt strikt der [ Semantic Versioning 2.0.0](https://semver.org/). Die Versionsnummern der Material-UI bestehen aus drei Teilen: `Hauptversion.Nebenversion.Patch`. Die Versionsnummer wird basierend auf dem in der Version enthaltenen Änderungsstand erhöht.
@@ -28,7 +28,7 @@ Die Material-UI folgt strikt der [ Semantic Versioning 2.0.0](https://semver.org
## Release-Frequenz
-Wir arbeiten an einem regelmäßigen Zeitplan für Releases, damit Sie Ihre Updates mit der fortlaufenden Entwicklung der Material-UI planen und koordinieren können.
+A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI.
Im Allgemeinen können Sie den folgenden Release-Zyklus erwarten:
@@ -47,24 +47,24 @@ Im Allgemeinen können Sie den folgenden Release-Zyklus erwarten:
| ? ⏳ | `@material-ui/core` v5.0.0 |
-Sie können [unsere Meilensteine](https://github.com/mui-org/material-ui/milestones) für eine detailliertere Übersicht verfolgen.
+You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
## Support-Richtlinie
-Wir unterstützen nur die neueste Version von Material-UI. Wir haben noch keine Ressourcen für [ LTS](https://en.wikipedia.org/wiki/Long-term_support) Veröffentlichungen.
+Only the latest version of Material-UI is supported. Wir haben noch keine Ressourcen für [ LTS](https://en.wikipedia.org/wiki/Long-term_support) Veröffentlichungen.
## Verfallspraktiken
Manchmal sind **"breaking changes"** wie das Entfernen der Unterstützung für ausgewählte APIs und Features erforderlich.
-Um diese Übergänge so einfach wie möglich zu gestalten, versprechen wir Ihnen zwei Dinge:
+To make these transitions as easy as possible:
-- Wir arbeiten hart daran, die Anzahl der grundlegenden Änderungen zu minimieren und wenn möglich Migrationswerkzeuge bereitzustellen.
-- Wir befolgen die hier beschriebene Verfallspraktiken, sodass Sie Zeit haben, Ihre Apps auf die neuesten APIs und Best Practices zu aktualisieren.
+- The number of breaking changes is minimized, and migration tools provided when possible.
+- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
-Um sicherzustellen, dass Sie genügend Zeit und einen klaren Pfad für die Aktualisierung haben, ist dies unsere Verfallspraktik:
+### Deprecation policy
-- Wir geben veraltete Funktionen im Changelog und wenn möglich mit Warnungen zur Laufzeit an.
-- Wenn wir eine veraltete Version ankündigen, geben wir auch einen empfohlenen Aktualisierungspfad bekannt.
-- Wir unterstützen die bestehende Verwendung einer stabilen API während des Verfallszeitraums, sodass Ihr Code während dieses Zeitraums weiter funktioniert.
-- Wir führen nur Peer-Abhängigkeitsaktualisierungen (React) durch, die Änderungen an Ihren Apps in einer Hauptversion erfordern.
\ No newline at end of file
+- Deprecated features iare announced n the changelog, and when possible, with warnings at runtime.
+- When a deprecation is announced, recommended update path is provided.
+- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
+- Peer dependency updates (React) that require changes to your apps are only made in a major release.
\ No newline at end of file
diff --git a/docs/src/pages/versions/versions-es.md b/docs/src/pages/versions/versions-es.md
index 9d4f894ad8ec68..032e143052d308 100644
--- a/docs/src/pages/versions/versions-es.md
+++ b/docs/src/pages/versions/versions-es.md
@@ -16,9 +16,9 @@ Aquí puedes encontrar la version inédita mas reciente de la documentación y c
## Estrategia para versionado
-Reconocemos que necesitas ** estabilidad ** por parte de la biblioteca de Material-UI. La estabilidad asegura que componentes y librerias reutilizables, tutoriales, herramientas, y prácticas aprendidas no se vuelven obsoletos de forma inesperada. La estabilidad es esencial para que el ecosistema alrededor de Material-UI prospere.
+Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
-Este documento contiene ** las prácticas que seguimos ** para proporcionarte una librería de IU de vanguardia, equilibrada con estabilidad. Nos esforzamos para asegurar que futuros cambios siempre sean introducidos de una manera predecible. Queremos que todos los que dependen de Material-UI sepan cuándo y cómo se agregan nuevas prestaciones, y que estén bien preparados cuando se remuevan obsoletas.
+This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.
Material-UI sigue estrictamente [ Versionado semántico 2.0.0](https://semver.org/). Los números en la versión de Material-UI tienen tres partes: ` mayor.menor.parche`. El número de versión se incrementa en base a el nivel de cambio incluido en tal lanzamiento.
@@ -28,7 +28,7 @@ Material-UI sigue estrictamente [ Versionado semántico 2.0.0](https://semver.or
## Frecuencia de lanzamiento
-Trabajamos hacia un calendario regular de lanzamientos, para que puedas planificar y coordinar tus actualizaciones con la continua evolución de Material-UI.
+A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI.
En general, espera el siguiente ciclo de lanzamiento:
@@ -47,24 +47,24 @@ En general, espera el siguiente ciclo de lanzamiento:
| ? ⏳ | `@material-ui/core` v5.0.0 |
-Puedes seguir [ nuestros hitos ](https://github.com/mui-org/material-ui/milestones) para una visión general más detallada.
+You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
## Política de soporte
-Solo ofrecemos soporte a la versión mas reciente de Material-UI. Aún no tenemos los recursos para ofrecer lanzamientos [ LTS ](https://en.wikipedia.org/wiki/Long-term_support).
+Only the latest version of Material-UI is supported. Aún no tenemos los recursos para ofrecer lanzamientos [ LTS ](https://en.wikipedia.org/wiki/Long-term_support).
## Practicas de deprecación
A veces ** "cambios rompientes"**, como la remoción de soporte para algunas API y prestaciones, son necesarios.
-Para que estas transiciones sean lo más fáciles posible, hacemos dos compromisos:
+To make these transitions as easy as possible:
-- Trabajamos arduamente en minimizar el número de cambios rompientes de última hora y proporcionar herramientas de migración cuando sea posible.
-- Seguimos la política de eliminación descrita aquí, para que tengas tiempo de actualizar tus aplicaciones a las últimas API y mejores prácticas.
+- The number of breaking changes is minimized, and migration tools provided when possible.
+- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
-Para ayudar a asegurarte de que tengas tiempo suficiente y un camino claro para actualizar, esta es nuestra política de deprecación:
+### Deprecation policy
-- Anunciamos prestaciones deprecadas en el registro de cambios y, cuando sea posible, con advertencias en tiempo de ejecución.
-- Cuando anunciamos una deprecación, también anunciamos una ruta de actualización recomendada.
-- Soportamos el uso vigente de una API estable durante su período de deprecación, por lo que tu código seguirá funcionando durante ese período.
-- Solo realizamos actualizaciones de dependencias tipo "Peer" (React) que requieren cambios en tus aplicaciones en una versión mayor.
\ No newline at end of file
+- Deprecated features iare announced n the changelog, and when possible, with warnings at runtime.
+- When a deprecation is announced, recommended update path is provided.
+- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
+- Peer dependency updates (React) that require changes to your apps are only made in a major release.
\ No newline at end of file
diff --git a/docs/src/pages/versions/versions-fr.md b/docs/src/pages/versions/versions-fr.md
index ed326a15349c98..00158df333716e 100644
--- a/docs/src/pages/versions/versions-fr.md
+++ b/docs/src/pages/versions/versions-fr.md
@@ -16,9 +16,9 @@ Ici vous pouvez trouver la dernière documentation non publiée et le code. Vous
## Stratégie de gestion des versions
-Nous sommes conscients que vous avez besoin de **stabilité** pour la librairie Material-UI. La stabilité garantit des composants réutilisables et les librairies, tutoriels, outils ainsi que les pratiques acquises ne deviennes pas soudainement obsolètes. La stabilité est essentielle au développement de l’écosystème Material-UI.
+Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
-Ce document contient ** les pratiques que nous suivons ** pour vous fournir une bibliothèque d'interface utilisateur de pointe, équilibrée avec stabilité. Nous nous efforçons de faire en sorte que les futurs changements soient toujours introduits de manière prévisible. Nous voulons que tous ceux qui dépendent de Material-UI sachent quand et comment les nouvelles fonctionnalités sont ajoutées, et bien préparés lorsque celles qui sont obsolètes sont supprimées.
+This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.
Matériel-UI suit strictement [la gestion sémantique des versions 2.0.0](https://semver.org/). Les numéros de version Material-UI ont trois parties : `majeur.mineur.correctifs`. Le numéro de version est incrémenté en fonction du niveau de changement inclus dans la version.
@@ -28,7 +28,7 @@ Matériel-UI suit strictement [la gestion sémantique des versions 2.0.0](https:
## Fréquence de version
-We work toward a regular schedule of releases, so that you can plan and coordinate your updates with the continuing evolution of Material-UI.
+A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI.
In general, you can expect the following release cycle:
@@ -47,24 +47,24 @@ In general, you can expect the following release cycle:
| ? ⏳ | `@material-ui/core` v5.0.0 |
-Vous pouvez suivre [ nos milestones ](https://github.com/mui-org/material-ui/milestones) pour un aperçu plus détaillé.
+You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
## Politique de support
-We only support the latest version of Material-UI. We don't yet have the resources to offer [LTS](https://en.wikipedia.org/wiki/Long-term_support) releases.
+Only the latest version of Material-UI is supported. We don't yet have the resources to offer [LTS](https://en.wikipedia.org/wiki/Long-term_support) releases.
## Pratiques de l'obsolescence
Sometimes **"breaking changes"**, such as the removal of support for select APIs and features, are necessary.
-To make these transitions as easy as possible, we make two commitments to you:
+To make these transitions as easy as possible:
-- We work hard to minimize the number of breaking changes and to provide migration tools when possible.
-- We follow the deprecation policy described here, so you have time to update your apps to the latest APIs and best practices.
+- The number of breaking changes is minimized, and migration tools provided when possible.
+- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
-To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy:
+### Deprecation policy
-- We announce deprecated features in the changelog, and when possible, with warnings at runtime.
-- When we announce a deprecation, we also announce a recommended update path.
-- We support existing use of a stable API during the deprecation period, so your code will keep working during that period.
-- We only make peer dependency updates (React) that require changes to your apps in a major release.
\ No newline at end of file
+- Deprecated features iare announced n the changelog, and when possible, with warnings at runtime.
+- When a deprecation is announced, recommended update path is provided.
+- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
+- Peer dependency updates (React) that require changes to your apps are only made in a major release.
\ No newline at end of file
diff --git a/docs/src/pages/versions/versions-ja.md b/docs/src/pages/versions/versions-ja.md
index 17102bc82f0236..c79c73c948ad19 100644
--- a/docs/src/pages/versions/versions-ja.md
+++ b/docs/src/pages/versions/versions-ja.md
@@ -16,9 +16,9 @@
## バージョン管理戦略
-Materials-UIライブラリから**stability**が必要であることは認識しています。 安定性により、再利用可能なコンポーネントとライブラリ、チュートリアル、ツール、および学習プラクティスが予期せず陳腐化することがなくなります。 Material-UIを取り巻くエコシステムが繁栄するには、安定性が不可欠です。
+Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
-訳文 このドキュメントには、安定性とバランスのとれた最先端のUIライブラリを提供するために**従うプラクティス**が含まれています。 将来の変更が常に予測可能な方法で導入されるように努めています。 Material-UIに依存しているすべての人に、いつ、どのように新しい機能が追加されたかを知ってもらい、古い機能が削除されたときに十分な準備をしてもらいます。
+This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.
訳文 Material-UIは厳密に[Semantic Versioning 2.0. 0](https://semver.org/)に従います。 Material-UIのバージョン番号には3つの部分があります：` major.minor.patch ` 。 バージョン番号は、リリースに含まれる変更のレベルに基づいて増分されます。
@@ -28,7 +28,7 @@ Materials-UIライブラリから**stability**が必要であることは認識
## リリース頻度
-Material-UIの継続的な進化に合わせて更新を計画および調整できるように、定期的なリリーススケジュールに取り組んでいます。
+A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI.
一般的に、次のリリースサイクルが期待できます。
@@ -47,24 +47,24 @@ Material-UIの継続的な進化に合わせて更新を計画および調整で
| ? ⏳ | `@material-ui/core` v5.0.0 |
-詳細な概要については、[マイルストーン](https://github.com/mui-org/material-ui/milestones)を参照してください。
+You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
## サポートポリシー
-Material-UIの最新バージョンのみをサポートしています。 [ LTSを提供するリソースがまだありません](https://en.wikipedia.org/wiki/Long-term_support)リリース。
+Only the latest version of Material-UI is supported. [ LTSを提供するリソースがまだありません](https://en.wikipedia.org/wiki/Long-term_support)リリース。
## 廃止予定
時々**「重大な変更」 ** 、一部のAPIおよび機能のサポートの削除などが必要です。
-これらの移行をできるだけ簡単にするために、次の2つのコミットメントを行っています。
+To make these transitions as easy as possible:
-- 重大な変更の数を最小限に抑え、可能な場合は移行ツールを提供するために努力しています。
-- ここに記載されているサポート終了ポリシーに準拠しているため、アプリを最新のAPIとベストプラクティスに更新する時間があります。
+- The number of breaking changes is minimized, and migration tools provided when possible.
+- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
-更新するための十分な時間と明確なパスを確保するために、以下のポリシーを非推奨とします。
+### Deprecation policy
-- 非推奨の機能は、変更ログで、可能であれば実行時に警告付きでアナウンスします。
-- 非推奨を発表するとき、推奨される更新パスも発表します。
-- 非推奨期間中の安定したAPIの既存の使用をサポートしているため、その期間中もコードは機能し続けます。
-- 私たちはメジャーリリースであなたのアプリに変更を必要とするピア依存性アップデート(React) のみを行います。
\ No newline at end of file
+- Deprecated features iare announced n the changelog, and when possible, with warnings at runtime.
+- When a deprecation is announced, recommended update path is provided.
+- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
+- Peer dependency updates (React) that require changes to your apps are only made in a major release.
\ No newline at end of file
diff --git a/docs/src/pages/versions/versions-pt.md b/docs/src/pages/versions/versions-pt.md
index d4f45acb91eac3..c10c70e004e6ba 100644
--- a/docs/src/pages/versions/versions-pt.md
+++ b/docs/src/pages/versions/versions-pt.md
@@ -16,9 +16,9 @@ Aqui pode encontrar a versão em desenvolvimento e sua documentação. Poderá u
## Estratégia de controle de versão
-Reconhecemos que necessita de estabilidade da **bibloteca** Material-UI. A estabilidade garante que componentes e bibliotecas reutilizáveis, tutoriais, ferramentas e práticas aprendidas não se tornem obsoletos inesperadamente. A estabilidade é essencial para que o ecossistema em torno da Material-UI prospere.
+Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
-Este documento contém ** as práticas que seguimos ** para lhe fornecer uma biblioteca de interface moderna, balanceada com estabilidade. Nós nos esforçamos para garantir que mudanças futuras sejam sempre introduzidas de maneira previsível. Queremos que todos que dependem do Material-UI saibam quando e como os novos recursos são adicionados e que estejam bem preparados quando os obsoletos forem removidos.
+This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.
Material-UI segue estritamente [Semântico de controle de versão 2.0.0](https://semver.org/). Os números de versão do material-UI têm três partes: ` major.minor.patch `. O número da versão é incrementado com base no nível de alteração incluído na nova versão.
@@ -28,7 +28,7 @@ Material-UI segue estritamente [Semântico de controle de versão 2.0.0](https:/
## Frequência de atualização
-Trabalhamos em direção a um cronograma regular de lançamentos, para que você possa planejar e coordenar suas atualizações com a evolução contínua do Material-UI.
+A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI.
Em geral, você pode esperar o seguinte ciclo de lançamento:
@@ -47,24 +47,24 @@ Em geral, você pode esperar o seguinte ciclo de lançamento:
| ? ⏳ | `@material-ui/core` v5.0.0 |
-Você pode seguir os [ milestones ](https://github.com/mui-org/material-ui/milestones) para uma visão geral mais detalhada.
+You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
## Política de suporte
-Oferecemos suporte apenas à versão mais recente do Material-UI. Ainda não temos recursos para oferecer versões [ LTS ](https://en.wikipedia.org/wiki/Long-term_support).
+Only the latest version of Material-UI is supported. Ainda não temos recursos para oferecer versões [ LTS ](https://en.wikipedia.org/wiki/Long-term_support).
## Práticas de substituição
Às vezes, **"alterações significativas"**, tais como a remoção do suporte para selecionar APIs e recursos, são necessários.
-Para fazer essas transições mais fácil possível, fazemos dois compromissos para você:
+To make these transitions as easy as possible:
-- Trabalhamos arduamente para minimizar o número de alterações significativas e fornecer ferramentas de migração sempre que possível.
-- Seguimos a política de descontinuação descrita aqui, para que você tenha tempo de atualizar seus aplicativos para as APIs e práticas recomendadas mais recentes.
+- The number of breaking changes is minimized, and migration tools provided when possible.
+- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
-Para ajudar a garantir que você tenha tempo suficiente e um caminho claro para atualizar, esta é nossa política de suspensão de uso:
+### Deprecation policy
-- Anunciamos recursos obsoletos no changelog e, quando possível, com avisos em tempo de execução.
-- Quando anunciamos uma reprovação, anunciamos também um caminho de atualização recomendado.
-- Oferecemos suporte existente do uso de uma API estável durante a descontinuação do período, portanto, seu código irá continuar a trabalhar durante esse período.
-- Fazemos apenas atualizações de dependências de pares (React) que exigem alterações em seus aplicativos em uma versão principal.
\ No newline at end of file
+- Deprecated features iare announced n the changelog, and when possible, with warnings at runtime.
+- When a deprecation is announced, recommended update path is provided.
+- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
+- Peer dependency updates (React) that require changes to your apps are only made in a major release.
\ No newline at end of file
diff --git a/docs/src/pages/versions/versions-ru.md b/docs/src/pages/versions/versions-ru.md
index 76fc72707f2155..ab7dff645813d1 100644
--- a/docs/src/pages/versions/versions-ru.md
+++ b/docs/src/pages/versions/versions-ru.md
@@ -1,8 +1,8 @@
-# Material-UI Versions
+# Версии Material-UI
-<p class="description">You can come back to this page and switch the version of the docs you're reading at any time.</p>
+<p class="description">Вы можете в любой момент вернуться на эту страницу и переключить версию документов, которые вы читаете.</p>
-## Stable versions
+## Стабильные версии
The most recent version is recommended in production.
@@ -10,15 +10,15 @@ The most recent version is recommended in production.
## Последние версии
-Here you can find the latest unreleased documentation and code. You can use it to see what changes are coming and provide better feedback to Material-UI contributors.
+Здесь вы можете найти последнюю неопубликованную документацию и код. You can use it to see what changes are coming and provide better feedback to Material-UI contributors.
{{"demo": "pages/versions/LatestVersion.js", "hideHeader": true}}
## Versioning strategy
-We recognize that you need **stability** from the Material-UI library. Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
+Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
-This document contains **the practices that we follow** to provide you with a leading-edge UI library, balanced with stability. We strive to ensure that future changes are always introduced in a predictable way. We want everyone who depends on Material-UI to know when and how new features are added, and to be well-prepared when obsolete ones are removed.
+This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.
Material-UI strictly follows [Semantic Versioning 2.0.0](https://semver.org/). Material-UI version numbers have three parts: `major.minor.patch`. The version number is incremented based on the level of change included in the release.
@@ -28,7 +28,7 @@ Material-UI strictly follows [Semantic Versioning 2.0.0](https://semver.org/). M
## Release frequency
-We work toward a regular schedule of releases, so that you can plan and coordinate your updates with the continuing evolution of Material-UI.
+A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI.
In general, you can expect the following release cycle:
@@ -36,7 +36,7 @@ In general, you can expect the following release cycle:
- 1-3 **minor** releases for each major release.
- A **patch** release every week (anytime for urgent bugfix).
-## Release schedule
+## График выпуска
> Disclaimer: The dates are offered as general guidance and may be adjusted by us when necessary to ensure delivery of a high-quality code.
@@ -47,24 +47,24 @@ In general, you can expect the following release cycle:
| ? ⏳ | `@material-ui/core` v5.0.0 |
-You can follow [our milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
+You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
-## Support policy
+## Политика поддержки
-We only support the latest version of Material-UI. We don't yet have the resources to offer [LTS](https://en.wikipedia.org/wiki/Long-term_support) releases.
+Only the latest version of Material-UI is supported. We don't yet have the resources to offer [LTS](https://en.wikipedia.org/wiki/Long-term_support) releases.
## Deprecation practices
Sometimes **"breaking changes"**, such as the removal of support for select APIs and features, are necessary.
-To make these transitions as easy as possible, we make two commitments to you:
+To make these transitions as easy as possible:
-- We work hard to minimize the number of breaking changes and to provide migration tools when possible.
-- We follow the deprecation policy described here, so you have time to update your apps to the latest APIs and best practices.
+- The number of breaking changes is minimized, and migration tools provided when possible.
+- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
-To help ensure that you have sufficient time and a clear path to update, this is our deprecation policy:
+### Deprecation policy
-- We announce deprecated features in the changelog, and when possible, with warnings at runtime.
-- When we announce a deprecation, we also announce a recommended update path.
-- We support existing use of a stable API during the deprecation period, so your code will keep working during that period.
-- We only make peer dependency updates (React) that require changes to your apps in a major release.
\ No newline at end of file
+- Deprecated features iare announced n the changelog, and when possible, with warnings at runtime.
+- When a deprecation is announced, recommended update path is provided.
+- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
+- Peer dependency updates (React) that require changes to your apps are only made in a major release.
\ No newline at end of file
diff --git a/docs/src/pages/versions/versions-zh.md b/docs/src/pages/versions/versions-zh.md
index 6b096ceb93630f..3b3928e6e6474c 100644
--- a/docs/src/pages/versions/versions-zh.md
+++ b/docs/src/pages/versions/versions-zh.md
@@ -16,9 +16,9 @@
## 版本控制方案
-我们认识到您需要来自Material-UI库的**稳定性**. 稳定性确保可重用组件和库、教程、工具和学习教程不会意外过时. 稳定性对于Material-UI蓬勃发展的生态系统至关重要.
+Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Material-UI to thrive.
-本文档包含 **我们遵循的做法** ，为您提供前沿的UI库，与稳定性保持平衡。 我们努力确保始终以可预测的方式引入未来的变化。 我们希望每个依赖于Material-UI的人都知道添加新功能的时间和方式，并在删除过时功能时做好充分准备。
+This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.
Material-UI 严格遵循 [Semantic Versioning 2.0.0](https://semver.org/) 语义化版本规范。 Material-UI 的版本号由三部分组成：`主版本号.次版本号.修订版本号`。 版本号的选择是根据更新内容的数量决定
@@ -28,7 +28,7 @@ Material-UI 严格遵循 [Semantic Versioning 2.0.0](https://semver.org/) 语义
## 发布周期
-我们致力于定期发布，以便您可以通过Material-UI的不断发展来规划和协调您的更新。
+A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Material-UI.
通常情况下, 你可以根据以下的发布周期来预测:
@@ -47,24 +47,24 @@ Material-UI 严格遵循 [Semantic Versioning 2.0.0](https://semver.org/) 语义
| ? ⏳ | `@material-ui/core` v5.0.0 |
-你可以在 [ 我们的里程碑 ](https://github.com/mui-org/material-ui/milestones) 中查看更详细的概述。
+You can follow the [milestones](https://github.com/mui-org/material-ui/milestones) for a more detailed overview.
## 支持政策
-我们只支持Material-UI的最新版本。 我们目前还没有提供[LTS](https://en.wikipedia.org/wiki/Long-term_support)的版本
+Only the latest version of Material-UI is supported. 我们目前还没有提供[LTS](https://en.wikipedia.org/wiki/Long-term_support)的版本
## 弃用做法
有时， **“破坏更改”**，例如删除对选定API和功能的支持，是必要的。
-为了使这些过渡尽可能简单，我们向您做出两项承诺：
+To make these transitions as easy as possible:
-- 我们努力减少重大变更的数量，并尽可能提供迁移工具。
-- 我们遵循此处所述的弃用政策，因此您有时间将应用更新为最新的API和最佳做法。
+- The number of breaking changes is minimized, and migration tools provided when possible.
+- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.
-为了确保您有足够的时间和明确的方法更新, 以下是我们的弃用策略:
+### Deprecation policy
-- 我们会在更新日志中公布过时的功能, 并在可能的情况下, 在运行时发出警告。
-- 当我们公布一个过时的功能时, 同时会提供一个最佳的更新方法。
-- 我们支持在弃用期间使用稳定的API，因此您的代码将在此期间继续运行。
-- 我们仅在主要版本中进行需要更改应用程序的对等依赖项更新（React）。
\ No newline at end of file
+- Deprecated features iare announced n the changelog, and when possible, with warnings at runtime.
+- When a deprecation is announced, recommended update path is provided.
+- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
+- Peer dependency updates (React) that require changes to your apps are only made in a major release.
\ No newline at end of file
diff --git a/docs/translations/translations-aa.json b/docs/translations/translations-aa.json
index fa1fdeb27f0c95..08e3b0ec6964c2 100644
--- a/docs/translations/translations-aa.json
+++ b/docs/translations/translations-aa.json
@@ -1,5 +1,6 @@
{
"homeQuickWord": "crwdns99822:0crwdne99822:0",
+ "helpToTranslate": "crwdns100754:0crwdne100754:0",
"editWebsiteColors": "crwdns99824:0crwdne99824:0",
"toggleTheme": "crwdns99826:0crwdne99826:0",
"toggleRTL": "crwdns99828:0crwdne99828:0",
@@ -132,7 +133,7 @@
"/components/no-ssr": "crwdns100080:0crwdne100080:0",
"/components/other": "crwdns100082:0crwdne100082:0",
"/components/paper": "crwdns100084:0crwdne100084:0",
- "/components/pickers": "crwdns100086:0crwdne100086:0",
+ "/components/pickers": "crwdns100756:0crwdne100756:0",
"/components/popover": "crwdns100088:0crwdne100088:0",
"/components/popper": "crwdns100090:0crwdne100090:0",
"/components/portal": "crwdns100092:0crwdne100092:0",
@@ -172,7 +173,7 @@
"/system/spacing": "crwdns100160:0crwdne100160:0",
"/system/typography": "crwdns100162:0crwdne100162:0",
"/customization": "crwdns100164:0crwdne100164:0",
- "/customization/theming": "crwdns100166:0crwdne100166:0",
+ "/customization/theming": "crwdns100758:0crwdne100758:0",
"/customization/breakpoints": "crwdns100168:0crwdne100168:0",
"/customization/color": "crwdns100170:0crwdne100170:0",
"/customization/themes": "crwdns100172:0crwdne100172:0",
@@ -212,6 +213,12 @@
"/styles": "crwdns100240:0crwdne100240:0",
"/styles/basics": "crwdns100242:0crwdne100242:0",
"/styles/advanced": "crwdns100244:0crwdne100244:0",
- "https://themes.material-ui.com/": "crwdns100246:0crwdne100246:0"
+ "https://themes.material-ui.com/": "crwdns100246:0crwdne100246:0",
+ "/components/material-icons": "crwdns100760:0crwdne100760:0",
+ "/components/textarea-autosize": "crwdns100762:0crwdne100762:0",
+ "/components/rating": "crwdns100764:0crwdne100764:0",
+ "/components/skeleton": "crwdns100766:0crwdne100766:0",
+ "/components/tree-view": "crwdns100768:0crwdne100768:0",
+ "/customization/density": "crwdns100770:0crwdne100770:0"
}
}
diff --git a/docs/translations/translations-de.json b/docs/translations/translations-de.json
index 98f2adad83f592..8f44ade48d6190 100644
--- a/docs/translations/translations-de.json
+++ b/docs/translations/translations-de.json
@@ -1,5 +1,6 @@
{
"homeQuickWord": "Ein schnelles Wort von unseren Sponsoren:",
+ "helpToTranslate": "Help to translate",
"editWebsiteColors": "Farbschema der Seite bearbeiten",
"toggleTheme": "helles/dunkles Thema umschalten",
"toggleRTL": "rechtsläufig/linksläufig umschalten",
@@ -132,7 +133,7 @@
"/components/no-ssr": "NoSSR",
"/components/other": "Sonstiges",
"/components/paper": "Paper",
- "/components/pickers": "Datum/Uhrzeit",
+ "/components/pickers": "Date / Time",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
@@ -172,7 +173,7 @@
"/system/spacing": "Abstände",
"/system/typography": "Typografie",
"/customization": "Individuelle Anpassung",
- "/customization/theming": "Theming",
+ "/customization/theming": "Übersicht",
"/customization/breakpoints": "Haltepunkte",
"/customization/color": "Farbe (Color)",
"/customization/themes": "Übersicht",
@@ -212,6 +213,12 @@
"/styles": "Stile",
"/styles/basics": "Grundlegendes",
"/styles/advanced": "Erweitert",
- "https://themes.material-ui.com/": "Premium-Themes"
+ "https://themes.material-ui.com/": "Premium-Themes",
+ "/components/material-icons": "Material Icons",
+ "/components/textarea-autosize": "Textarea Autosize",
+ "/components/rating": "Rating",
+ "/components/skeleton": "Skeleton",
+ "/components/tree-view": "Tree View",
+ "/customization/density": "Density"
}
}
diff --git a/docs/translations/translations-es.json b/docs/translations/translations-es.json
index 68c8c4670a0711..e94bbc2fc2bfd4 100644
--- a/docs/translations/translations-es.json
+++ b/docs/translations/translations-es.json
@@ -1,5 +1,6 @@
{
"homeQuickWord": "Unas palabras de nuestros patrocinadores:",
+ "helpToTranslate": "Help to translate",
"editWebsiteColors": "Editar los colores del sitio web",
"toggleTheme": "Alternar tema claro/oscuro",
"toggleRTL": "Alternar derecha-izquierda/izquierda-derecha",
@@ -132,7 +133,7 @@
"/components/no-ssr": "No SSR",
"/components/other": "Otros",
"/components/paper": "Paper",
- "/components/pickers": "Date/Time",
+ "/components/pickers": "Date / Time",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
@@ -172,7 +173,7 @@
"/system/spacing": "Espaciado",
"/system/typography": "Tipografía",
"/customization": "Personalización",
- "/customization/theming": "Temática",
+ "/customization/theming": "Estilos",
"/customization/breakpoints": "Puntos de interrupción",
"/customization/color": "Color",
"/customization/themes": "Estilos",
@@ -212,6 +213,12 @@
"/styles": "Estilos",
"/styles/basics": "Fundamentos",
"/styles/advanced": "Avanzado",
- "https://themes.material-ui.com/": "Temas Premium"
+ "https://themes.material-ui.com/": "Temas Premium",
+ "/components/material-icons": "Material Icons",
+ "/components/textarea-autosize": "Textarea Autosize",
+ "/components/rating": "Rating",
+ "/components/skeleton": "Skeleton",
+ "/components/tree-view": "Tree View",
+ "/customization/density": "Density"
}
}
diff --git a/docs/translations/translations-fr.json b/docs/translations/translations-fr.json
index bb696df83b14a5..c37ad422453bcf 100644
--- a/docs/translations/translations-fr.json
+++ b/docs/translations/translations-fr.json
@@ -1,5 +1,6 @@
{
"homeQuickWord": "Un mot rapide de nos sponsors :",
+ "helpToTranslate": "Help to translate",
"editWebsiteColors": "Modifier les couleurs du site",
"toggleTheme": "Basculer le thème de couleurs \"clair/sombre\"",
"toggleRTL": "Basculer de droite à gauche / de gauche à droite",
@@ -132,7 +133,7 @@
"/components/no-ssr": "Pas de SSR",
"/components/other": "Autres",
"/components/paper": "Paper",
- "/components/pickers": "Date/Time",
+ "/components/pickers": "Date / Time",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
@@ -172,7 +173,7 @@
"/system/spacing": "Spacing (Ecartement)",
"/system/typography": "Typography (Typographie)",
"/customization": "Personnalisation",
- "/customization/theming": "Theming",
+ "/customization/theming": "Thèmes",
"/customization/breakpoints": "Breakpoints",
"/customization/color": "Couleur",
"/customization/themes": "Thèmes",
@@ -212,6 +213,12 @@
"/styles": "Styles",
"/styles/basics": "Bases",
"/styles/advanced": "Avancé",
- "https://themes.material-ui.com/": "Thèmes premium"
+ "https://themes.material-ui.com/": "Thèmes premium",
+ "/components/material-icons": "Material Icons",
+ "/components/textarea-autosize": "Textarea Autosize",
+ "/components/rating": "Rating",
+ "/components/skeleton": "Skeleton",
+ "/components/tree-view": "Tree View",
+ "/customization/density": "Density"
}
}
diff --git a/docs/translations/translations-ja.json b/docs/translations/translations-ja.json
index 5bec6d98284357..7a81cb7f67bcdc 100644
--- a/docs/translations/translations-ja.json
+++ b/docs/translations/translations-ja.json
@@ -1,16 +1,17 @@
{
"homeQuickWord": "私たちのスポンサーからの言葉:",
+ "helpToTranslate": "翻訳を手伝う",
"editWebsiteColors": "ウェブサイトの色を編集する",
"toggleTheme": "ライト/ダークテーマに変更する",
"toggleRTL": "左右反転する",
"github": "GitHubリポジトリ",
"strapline": "ウェブ開発をより高速かつ簡単なものにするReactコンポーネントです。あなたのデザインシステムを構築するかMaterial Designで始めましょう。",
- "getStarted": "はじめに",
+ "getStarted": "はじめましょう!",
"installation": "インストール",
"installDescr": "npmからMaterial-UIのソースファイルをインストールします。必要なCSSを導入することを忘れないでください。",
"cdn": "または、CDNを使用します。",
"loadFont": "デフォルトのRobotoフォントを読み込みます。",
- "installButton": "インストールに関して読む。",
+ "installButton": "インストールに関して",
"usage": "使い方",
"usageDescr": "Material-UIコンポーネントは追加の設定なしで機能し、グローバルスコープを汚染しません。",
"usageButton": "ドキュメントを探索する",
@@ -94,23 +95,23 @@
"/getting-started/supported-platforms": "サポートされているプラットフォーム",
"/components": "コンポーネント",
"/components/about-the-lab": "ラボについて",
- "/components/click-away-listener": "クリックリスナー",
+ "/components/click-away-listener": "Click Away Listener",
"/component/about": "ラボについて",
"/components/app-bar": "App Bar",
- "/components/autocomplete": "自動補完",
+ "/components/autocomplete": "Autocomplete",
"/components/avatars": "Avatars",
"/components/badges": "Badge",
"/components/basic-inputs": "基本的な入力",
"/components/bottom-navigation": "Bottom Navigation",
"/components/box": "Box",
"/components/breadcrumbs": "Breadcrumbs",
- "/components/buttons": "ボタン",
+ "/components/buttons": "Buttons",
"/components/cards": "Card",
- "/components/checkboxes": "チェックボックス",
+ "/components/checkboxes": "Checkboxes",
"/components/chips": "Chips",
"/components/container": "Container(コンテナ)",
"/components/content": "コンテンツ",
- "/components/css-baseline": "CSSベースライン",
+ "/components/css-baseline": "CSS Baseline",
"/components/data-display": "データの表示",
"/components/dialogs": "Dialogs",
"/components/dividers": "Dividers",
@@ -120,7 +121,7 @@
"/components/grid": "Grid",
"/components/hidden": "Hidden",
"/components/grid-list": "Grid List",
- "/components/icons": "アイコン",
+ "/components/icons": "Icons",
"/components/inputs": "入力",
"/components/lab": "ラボ",
"/components/layout": "レイアウト",
@@ -132,27 +133,27 @@
"/components/no-ssr": "No SSR",
"/components/other": "その他",
"/components/paper": "Paper",
- "/components/pickers": "日付/時間",
+ "/components/pickers": "Date/Time",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
"/components/progress": "Progress",
"/components/progress-validation": "フィードバック",
- "/components/radio-buttons": "ラジオボタン",
+ "/components/radio-buttons": "Radio Buttons",
"/components/selection-controls": "Selection Controls",
"/components/selects": "Selects",
"/components/slider": "Slider",
"/components/snackbars": "Snackbars",
- "/components/speed-dial": "短縮ダイヤル",
+ "/components/speed-dial": "Speed Dial",
"/components/steppers": "Steppers",
"/components/surfaces": "サーフェス",
- "/components/switches": "スイッチ",
+ "/components/switches": "Switches",
"/components/tables": "Tables",
"/components/tabs": "Tabs",
"/components/text-fields": "Text Fields",
- "/components/toggle-button": "トグルボタン",
+ "/components/toggle-button": "Toggle Button",
"/components/tooltips": "ツールチップ",
- "/components/transfer-list": "転送リスト",
+ "/components/transfer-list": "Transfer List",
"/components/transitions": "Transições",
"/components/typography": "タイポグラフィ",
"/components/use-media-query": "useMediaQuery",
@@ -172,7 +173,7 @@
"/system/spacing": "間隔",
"/system/typography": "タイポグラフィ",
"/customization": "カスタマイズ",
- "/customization/theming": "テーマ",
+ "/customization/theming": "Themes",
"/customization/breakpoints": "ブレイクポイント",
"/customization/color": "カラー",
"/customization/themes": "Themes",
@@ -212,6 +213,12 @@
"/styles": "スタイル",
"/styles/basics": "基本",
"/styles/advanced": "高度な機能",
- "https://themes.material-ui.com/": "プレミアムテーマ"
+ "https://themes.material-ui.com/": "プレミアムテーマ",
+ "/components/material-icons": "マテリアルアイコン（Material Icons）",
+ "/components/textarea-autosize": "テキストエリアの自動サイズ調整",
+ "/components/rating": "レート",
+ "/components/skeleton": "Skeleton",
+ "/components/tree-view": "ツリービュー (Tree View)",
+ "/customization/density": "密度(Density)"
}
}
diff --git a/docs/translations/translations-pt.json b/docs/translations/translations-pt.json
index ae7da4a36c4f53..a8aeab0f1f49e3 100644
--- a/docs/translations/translations-pt.json
+++ b/docs/translations/translations-pt.json
@@ -1,5 +1,6 @@
{
"homeQuickWord": "Uma palavra rápida de nossos patrocinadores:",
+ "helpToTranslate": "Ajude a traduzir",
"editWebsiteColors": "Editar cores do site",
"toggleTheme": "Alternar tema claro/escuro",
"toggleRTL": "Alternar da direita para a esquerda/esquerda para a direita",
@@ -132,7 +133,7 @@
"/components/no-ssr": "NoSSR",
"/components/other": "Outros",
"/components/paper": "Paper",
- "/components/pickers": "Data/Hora",
+ "/components/pickers": "Data / Hora",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
@@ -172,7 +173,7 @@
"/system/spacing": "Espaçamento",
"/system/typography": "Tipografia",
"/customization": "Customização",
- "/customization/theming": "Theming",
+ "/customization/theming": "Temas",
"/customization/breakpoints": "Pontos de quebra",
"/customization/color": "Cor",
"/customization/themes": "Temas",
@@ -212,6 +213,12 @@
"/styles": "Estilos",
"/styles/basics": "Noções Básicas",
"/styles/advanced": "Avançado",
- "https://themes.material-ui.com/": "Temas Premium"
+ "https://themes.material-ui.com/": "Temas Premium",
+ "/components/material-icons": "Ícones Material",
+ "/components/textarea-autosize": "Texto autoajustável",
+ "/components/rating": "Rating",
+ "/components/skeleton": "Skeleton",
+ "/components/tree-view": "Visualização em árvore",
+ "/customization/density": "Densidade"
}
}
diff --git a/docs/translations/translations-ru.json b/docs/translations/translations-ru.json
index 6e37bb8f917b19..b5ea8726307a4e 100644
--- a/docs/translations/translations-ru.json
+++ b/docs/translations/translations-ru.json
@@ -1,5 +1,6 @@
{
"homeQuickWord": "Несколько слов от наших спонсоров:",
+ "helpToTranslate": "Help to translate",
"editWebsiteColors": "Редактировать цветовую гамму сайта",
"toggleTheme": "Переключить светлую/темную тему",
"toggleRTL": "Переключить справа-налево/слева-направо",
@@ -132,7 +133,7 @@
"/components/no-ssr": "No SSR",
"/components/other": "Прочее",
"/components/paper": "Paper",
- "/components/pickers": "Date/Time",
+ "/components/pickers": "Date / Time",
"/components/popover": "Popover",
"/components/popper": "Popper",
"/components/portal": "Portal",
@@ -172,7 +173,7 @@
"/system/spacing": "Интервал",
"/system/typography": "Оформление текста",
"/customization": "Customization",
- "/customization/theming": "Theming",
+ "/customization/theming": "Themes",
"/customization/breakpoints": "Точки останова",
"/customization/color": "Цвет",
"/customization/themes": "Themes",
@@ -212,6 +213,12 @@
"/styles": "Styles",
"/styles/basics": "Основы",
"/styles/advanced": "Advanced",
- "https://themes.material-ui.com/": "Премиум темы"
+ "https://themes.material-ui.com/": "Премиум темы",
+ "/components/material-icons": "Material Icons",
+ "/components/textarea-autosize": "Textarea Autosize",
+ "/components/rating": "Rating",
+ "/components/skeleton": "Skeleton",
+ "/components/tree-view": "Tree View",
+ "/customization/density": "Density"
}
}
diff --git a/docs/translations/translations-zh.json b/docs/translations/translations-zh.json
index 5311fb84feb063..9a78b87b261b96 100644
--- a/docs/translations/translations-zh.json
+++ b/docs/translations/translations-zh.json
@@ -1,5 +1,6 @@
{
"homeQuickWord": "来自我们的赞助商的一个简短概括：",
+ "helpToTranslate": "Help to translate",
"editWebsiteColors": "编辑网站的颜色",
"toggleTheme": "在light（亮色）和dark（暗色）主题中切换",
"toggleRTL": "从右到左/从左到右切换",
@@ -28,7 +29,7 @@
"team": " 团队",
"homeFooterRelease": "当前 {{versionNumber}}. 根据 {{license}} 发布。",
"license": "MIT 许可证",
- "likeMui": "喜欢 Material-UI 吗？",
+ "likeMui": "帮助我们继续运行",
"adblock": "如果您不介意与技术相关的广告，并且支持开源代码，请在你的 ad blocker 中将 Material-UI 设置为白名单。",
"thanks": "感谢！",
"editPage": "帮助改进此页面的翻译",
@@ -87,7 +88,7 @@
"/getting-started/installation": "安装",
"/getting-started/usage": "使用",
"/getting-started/example-projects": "范例项目",
- "/getting-started/templates": "Templates",
+ "/getting-started/templates": "模板",
"/getting-started/learn": "学习",
"/getting-started/faq": "常见问题解答",
"/getting-started/supported-components": "支持的组件",
@@ -132,7 +133,7 @@
"/components/no-ssr": "没有 SSR",
"/components/other": "其他",
"/components/paper": "Paper（纸张）",
- "/components/pickers": "Date/Time（日期/时间）",
+ "/components/pickers": "Date / Time",
"/components/popover": "Popover（弹出框）",
"/components/popper": "Popper（弹出提示工具）",
"/components/portal": "Portal（传送门）",
@@ -172,7 +173,7 @@
"/system/spacing": "Spacing（间距）",
"/system/typography": "Typography（文字铸排）",
"/customization": "个性化",
- "/customization/theming": "Theming",
+ "/customization/theming": "概览",
"/customization/breakpoints": "Breakpoints（断点）",
"/customization/color": "Color（颜色）",
"/customization/themes": "概览",
@@ -212,6 +213,12 @@
"/styles": "Styles（样式表单）",
"/styles/basics": "基础",
"/styles/advanced": "高级",
- "https://themes.material-ui.com/": "高级版主题"
+ "https://themes.material-ui.com/": "高级版主题",
+ "/components/material-icons": "Material Icons",
+ "/components/textarea-autosize": "Textarea Autosize",
+ "/components/rating": "Rating",
+ "/components/skeleton": "Skeleton",
+ "/components/tree-view": "树视图",
+ "/customization/density": "间距(density)"
}
}