@@ -128,7 +162,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## 补充项目
-对于更高级的用例，您可以利用：
+对于更高级的用例，您可以使用：
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui)：一组用于更加方便地与 Redux Form 配搭来使用 Material UI 的封装组件。
- [formik-material-ui](https://github.com/stackworx/formik-material-ui)：用 formil 来绑定 Material-UI。
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-de.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-de.md
new file mode 100644
index 00000000000000..30face5ca5429a
--- /dev/null
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-de.md
@@ -0,0 +1,22 @@
+---
+title: Textarea Autosize React component
+components: TextareaAutosize
+---
+
+# Textarea Autosize
+
+
A textarea component for React which grows with content.
+
+- 📦 [2.3 kB gzipped](/size-snapshot)
+
+## Empty
+
+{{"demo": "pages/components/textarea-autosize/EmptyTextarea.js"}}
+
+## Minimum height
+
+{{"demo": "pages/components/textarea-autosize/MinHeightTextarea.js"}}
+
+## Maximum height
+
+{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-es.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-es.md
new file mode 100644
index 00000000000000..30face5ca5429a
--- /dev/null
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-es.md
@@ -0,0 +1,22 @@
+---
+title: Textarea Autosize React component
+components: TextareaAutosize
+---
+
+# Textarea Autosize
+
+
A textarea component for React which grows with content.
+
+- 📦 [2.3 kB gzipped](/size-snapshot)
+
+## Empty
+
+{{"demo": "pages/components/textarea-autosize/EmptyTextarea.js"}}
+
+## Minimum height
+
+{{"demo": "pages/components/textarea-autosize/MinHeightTextarea.js"}}
+
+## Maximum height
+
+{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md
new file mode 100644
index 00000000000000..30face5ca5429a
--- /dev/null
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md
@@ -0,0 +1,22 @@
+---
+title: Textarea Autosize React component
+components: TextareaAutosize
+---
+
+# Textarea Autosize
+
+
A textarea component for React which grows with content.
+
+- 📦 [2.3 kB gzipped](/size-snapshot)
+
+## Empty
+
+{{"demo": "pages/components/textarea-autosize/EmptyTextarea.js"}}
+
+## Minimum height
+
+{{"demo": "pages/components/textarea-autosize/MinHeightTextarea.js"}}
+
+## Maximum height
+
+{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md
new file mode 100644
index 00000000000000..30face5ca5429a
--- /dev/null
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md
@@ -0,0 +1,22 @@
+---
+title: Textarea Autosize React component
+components: TextareaAutosize
+---
+
+# Textarea Autosize
+
+
A textarea component for React which grows with content.
+
+- 📦 [2.3 kB gzipped](/size-snapshot)
+
+## Empty
+
+{{"demo": "pages/components/textarea-autosize/EmptyTextarea.js"}}
+
+## Minimum height
+
+{{"demo": "pages/components/textarea-autosize/MinHeightTextarea.js"}}
+
+## Maximum height
+
+{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-pt.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-pt.md
new file mode 100644
index 00000000000000..57b0804c25fde7
--- /dev/null
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-pt.md
@@ -0,0 +1,22 @@
+---
+title: Componente React de texto autoajustável
+components: TextareaAutosize
+---
+
+# Texto autoajustável
+
+
Um componente de texto para React que se ajusta conforme o conteúdo.
+
+- 📦 [2.3 kB gzipped](/size-snapshot)
+
+## Vazio
+
+{{"demo": "pages/components/textarea-autosize/EmptyTextarea.js"}}
+
+## Altura mínima
+
+{{"demo": "pages/components/textarea-autosize/MinHeightTextarea.js"}}
+
+## Altura máxima
+
+{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md
new file mode 100644
index 00000000000000..30face5ca5429a
--- /dev/null
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md
@@ -0,0 +1,22 @@
+---
+title: Textarea Autosize React component
+components: TextareaAutosize
+---
+
+# Textarea Autosize
+
+
A textarea component for React which grows with content.
+
+- 📦 [2.3 kB gzipped](/size-snapshot)
+
+## Empty
+
+{{"demo": "pages/components/textarea-autosize/EmptyTextarea.js"}}
+
+## Minimum height
+
+{{"demo": "pages/components/textarea-autosize/MinHeightTextarea.js"}}
+
+## Maximum height
+
+{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md
new file mode 100644
index 00000000000000..30face5ca5429a
--- /dev/null
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md
@@ -0,0 +1,22 @@
+---
+title: Textarea Autosize React component
+components: TextareaAutosize
+---
+
+# Textarea Autosize
+
+
A textarea component for React which grows with content.
+
+- 📦 [2.3 kB gzipped](/size-snapshot)
+
+## Empty
+
+{{"demo": "pages/components/textarea-autosize/EmptyTextarea.js"}}
+
+## Minimum height
+
+{{"demo": "pages/components/textarea-autosize/MinHeightTextarea.js"}}
+
+## Maximum height
+
+{{"demo": "pages/components/textarea-autosize/MaxHeightTextarea.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/typography/typography-de.md b/docs/src/pages/components/typography/typography-de.md
index 097e25f1e097f6..a1356b32ef1805 100644
--- a/docs/src/pages/components/typography/typography-de.md
+++ b/docs/src/pages/components/typography/typography-de.md
@@ -50,7 +50,7 @@ In einigen Situationen können Sie möglicherweise die Komponente `Typography` n
Die Komponente Typografie verwendet die Eigenschaft `variantMapping` um eine UI-Variante einem semantischen Element zuzuordnen. Es ist wichtig zu wissen, dass der Stil einer Typografie unabhängig von dem zugrunde liegenden semantischen Element ist.
-- Sie können das zugrunde liegende Element einmalig mit der Eigenschaft `component` ändern:
+- You can change the underlying element for a one time occasion with the `component` property:
```jsx
{/ * Wir haben bereits eine h1 auf der Seite, wir wollen diese nicht kopieren. * /}
diff --git a/docs/src/pages/components/typography/typography-es.md b/docs/src/pages/components/typography/typography-es.md
index 77dd0474bf1700..e8d002bcf5efee 100644
--- a/docs/src/pages/components/typography/typography-es.md
+++ b/docs/src/pages/components/typography/typography-es.md
@@ -50,7 +50,7 @@ In some situations you might not be able to use the `Typography` component. Hope
The Typography component uses the `variantMapping` property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element.
-- You can change the underlying element for a one time occassion with the `component` property:
+- 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. */}
diff --git a/docs/src/pages/components/typography/typography-fr.md b/docs/src/pages/components/typography/typography-fr.md
index 5fd65e705dc8eb..1ac3957068ad45 100644
--- a/docs/src/pages/components/typography/typography-fr.md
+++ b/docs/src/pages/components/typography/typography-fr.md
@@ -50,7 +50,7 @@ In some situations you might not be able to use the `Typography` component. Hope
The Typography component uses the `variantMapping` property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element.
-- You can change the underlying element for a one time occassion with the `component` property:
+- 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. */}
diff --git a/docs/src/pages/components/typography/typography-ja.md b/docs/src/pages/components/typography/typography-ja.md
index 24a006646a2ac1..dc696804f0cabe 100644
--- a/docs/src/pages/components/typography/typography-ja.md
+++ b/docs/src/pages/components/typography/typography-ja.md
@@ -50,7 +50,7 @@ In some situations you might not be able to use the `Typography` component. Hope
The Typography component uses the `variantMapping` property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element.
-- You can change the underlying element for a one time occassion with the `component` property:
+- 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. */}
diff --git a/docs/src/pages/components/typography/typography-pt.md b/docs/src/pages/components/typography/typography-pt.md
index 983674a007bd1f..4953775f20aec6 100644
--- a/docs/src/pages/components/typography/typography-pt.md
+++ b/docs/src/pages/components/typography/typography-pt.md
@@ -34,7 +34,7 @@ import 'typeface-roboto';
Para mais informações confira o projeto [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto).
-⚠️ Tome cuidado ao usar essa abordagem. Certifique-se de que seu bundler não carregue ansiosamente todas as variações da fonte (100/300/400/500/700/900, itálico/regular, SVG/woff). Colocar todos os arquivos de fonte em linha pode aumentar o tamanho do seu pacote significativamente. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights.
+⚠️ Tome cuidado ao usar essa abordagem. Certifique-se de que seu bundler não carregue ansiosamente todas as variações da fonte (100/300/400/500/700/900, itálico/regular, SVG/woff). Colocar todos os arquivos de fonte em linha pode aumentar o tamanho do seu pacote significativamente. A configuração de tipografia padrão do Material-UI depende apenas dos pesos de fonte de 300, 400, 500 e 700.
## Componente
@@ -50,7 +50,7 @@ Em algumas situações, talvez você não consiga usar o componente `Tipografia`
O componente de Tipografia (Typography) usa a propriedade `variantMapping` para associar a variação da UI com um elemento semântico. É importante ressaltar que o estilo de uma tipografia é independente do elemento semântico por baixo dela.
-- Você pode alterar o elemento subjacente para uma ocasião única com a propriedade `component`:
+- You can change the underlying element for a one time occasion with the `component` property:
```jsx
{/* Já temos um h1 na página, não vamos duplicá-lo. */}
diff --git a/docs/src/pages/components/typography/typography-ru.md b/docs/src/pages/components/typography/typography-ru.md
index f117a05e2b39d1..c543d26f5373e3 100644
--- a/docs/src/pages/components/typography/typography-ru.md
+++ b/docs/src/pages/components/typography/typography-ru.md
@@ -50,7 +50,7 @@ For more info check out the [typeface](https://github.com/KyleAMathews/typefaces
The Typography component uses the `variantMapping` property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element.
-- You can change the underlying element for a one time occassion with the `component` property:
+- 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. */}
diff --git a/docs/src/pages/components/typography/typography-zh.md b/docs/src/pages/components/typography/typography-zh.md
index c2905a8a09329a..4ab8ff33bf889c 100644
--- a/docs/src/pages/components/typography/typography-zh.md
+++ b/docs/src/pages/components/typography/typography-zh.md
@@ -48,18 +48,18 @@ import 'typeface-roboto';
## 改变语义元素
-The Typography component uses the `variantMapping` property to associate a UI variant with a semantic element. It’s important to realize that the style of a typography is independent from the semantic underlying element.
+Typography组件使用 `variantMapping` 属性将某一种UI变体与某一种语义元素标签相关联。 有一点需要意识到： 一个Typography的style是独立于其底层语义化标签的
-- You can change the underlying element for a one time occassion with the `component` property:
+- 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. */}
+{/* 在这个页面里，我们已经有了一个h1标签；所以避免重复*/}
h1. Heading
```
-- You can change the mapping [globally using the theme](/customization/globals/#default-props):
+- 你也可以通过theme[全局改变](/customization/globals/#default-props)对应关联:
```js
const theme = createMuiTheme({
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 4b0fab59bb915e..9644c8b623a21b 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
@@ -11,8 +11,7 @@ Einige der wichtigsten Funktionen:
- ⚛️ Es verfügt über eine idiomatische React-API.
- 🚀 Es ist performant. Es observiert das Dokument, welches erkennt, wenn sich die Medienabfragen ändern, anstatt die Werte regelmäßig abzufragen.
- 📦 [ kB](/size-snapshot) gzipped.
-- 💄 Es ist eine Alternative zu react-responsive und react-media, die auf Einfachheit abzielen.
-- 🤖 Es unterstützt serverseitiges Rendering.
+- 🤖 It supports server-side rendering.
## Einfache Medienabfrage
@@ -38,41 +37,68 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+ return
{`theme.breakpoints.up('sm') matches: ${matches}`} ;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
## JavaScript-Syntax verwenden
-[json2mq](https://github.com/akiran/json2mq) wird verwendet, um eine Medienabfragezeichenfolge aus einem JavaScript-Objekt zu generieren.
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## Server-Rendering
-Auf dem Server ist eine Implementierung von [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) erforderlich. Wir empfehlen die Verwendung von [css-mediaquery](https://github.com/ericf/css-mediaquery). Wir empfehlen außerdem die Verwendung der `useMediaQueryTheme` Version des Hooks, die Eigenschaften aus dem Design abruft. Auf diese Weise können Sie einmal eine `ssrMatchMedia` Option für Ihren gesamten React-Baum angeben.
+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.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-## Migration von `withWidth()`
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
-Die Komponente höherer Ordnung `withWidth()` fügt die Bildschirmbreite der Seite ein. Sie können dasselbe Verhalten mit einem `useWidth` Hook reproduzieren:
+Try relying on client-side CSS media queries first. For instance, you could use:
-```jsx
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
- const theme = useTheme();
- const keys = [...theme.breakpoints.keys].reverse();
- return (
- keys.reduce((output, key) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const matches = useMediaQuery(theme.breakpoints.only(key));
- return !output && matches ? key : output;
- }, null) || 'xs'
- );
+- [`
`](/system/display/#hiding-elements)
+- [``](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## Testen
+
+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.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+ return query => ({
+ matches: mediaQuery.match(query, { width }),
+ addListener: () => {},
+ removeListener: () => {},
+ });
}
+
+describe('MyTests', () => {
+ beforeAll(() => {
+ window.matchMedia = createMatchMedia(window.innerWidth);
+ });
+});
```
+## Migration von `withWidth()`
+
+Die Komponente höherer Ordnung `withWidth()` fügt die Bildschirmbreite der Seite ein. Sie können dasselbe Verhalten mit einem `useWidth` Hook reproduzieren:
+
{{"demo": "pages/components/use-media-query/UseWidth.js"}}
## API
@@ -81,11 +107,11 @@ function useWidth() {
#### Argumente
-1. `query` (*String*): Eine string Representation der Medienabfrage.
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `Optionen` (*Object* [optional]):
- ` options.defaultMatches ` (*Boolean* [optional]): Da `window.matchMedia()` auf dem Server nicht verfügbar ist, wird ein Standard Match zurückgegeben. Der Standardwert ist `false`.
- `options.noSsr ` (*Boolean* [optional]): Standardeinstellung ist `false`. Um den serverseitigen Renderingabgleich durchzuführen, muss er zweimal gerendert werden. Ein erstes Mal mit nichts und ein zweites Mal mit den Kind-Elementen. Dieser Zyklus mit zwei Durchgängen ist mit einem Nachteil verbunden. Es ist langsamer. Sie können diese Flag auf `true` setzten, wenn Sie **nicht serverseitig** rendern.
- - `options.ssrMatchMedia` (*Function* [optional]) Vielleicht möchten Sie eine Heuristik verwenden, um annähernd den Bildschirm des Client - Browser zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder den Client-Hinweis https://caniuse.com/#search=client%20hint verwenden. Sie können eine globale Ponyfill mit [`benutzerdefinierten Eigenschaften`](/customization/globals/#default-props) für das Theme bereitstellen. Lesen Sie hier mehr dazu: [serverseitige Rendering Beispiel](#server-side-rendering).
+ - `options.ssrMatchMedia` (*Function* [optional]) Vielleicht möchten Sie eine Heuristik verwenden, um annähernd den Bildschirm des Client - Browser zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder den Client-Hinweis https://caniuse.com/#search=client%20hint verwenden. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Lesen Sie hier mehr dazu: [serverseitige Rendering Beispiel](#server-side-rendering).
#### Rückgabewerte
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 8f80f4fbafaffa..9bc72c3a19c767 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
@@ -11,8 +11,7 @@ Some of the key features:
- ⚛️ It has an idiomatic React API.
- 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically.
- 📦 [1 kB gzipped](/size-snapshot).
-- 💄 It's an alternative to react-responsive and react-media that aims for simplicity.
-- 🤖 It supports Server-side rendering.
+- 🤖 It supports server-side rendering.
## Simple media query
@@ -38,41 +37,68 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+ return {`theme.breakpoints.up('sm') matches: ${matches}`} ;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
## Using JavaScript syntax
-[json2mq](https://github.com/akiran/json2mq) is used to generate media query string from a JavaScript object.
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## 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). We also encourage the usage of the `useMediaQueryTheme` version of the hook that fetches properties from the theme. This way, you can provide a `ssrMatchMedia` option once for all your React tree.
+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.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-## Migrating from `withWidth()`
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
-The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+Try relying on client-side CSS media queries first. For instance, you could use:
-```jsx
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
- const theme = useTheme();
- const keys = [...theme.breakpoints.keys].reverse();
- return (
- keys.reduce((output, key) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const matches = useMediaQuery(theme.breakpoints.only(key));
- return !output && matches ? key : output;
- }, null) || 'xs'
- );
+- [``](/system/display/#hiding-elements)
+- [``](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## Pruebas
+
+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.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+ return query => ({
+ matches: mediaQuery.match(query, { width }),
+ addListener: () => {},
+ removeListener: () => {},
+ });
}
+
+describe('MyTests', () => {
+ beforeAll(() => {
+ window.matchMedia = createMatchMedia(window.innerWidth);
+ });
+});
```
+## Migrating from `withWidth()`
+
+The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+
{{"demo": "pages/components/use-media-query/UseWidth.js"}}
## API
@@ -81,11 +107,11 @@ function useWidth() {
#### Argumentos
-1. `query` (*String*): A string representing the media query to handle.
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [optional]):
- `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- `options.noSsr` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom properties`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### Devuelve
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 86ebfacbb9ec7e..8b4911621c37ef 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
@@ -11,8 +11,7 @@ Some of the key features:
- ⚛️ It has an idiomatic React API.
- 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically.
- 📦 [1 kB gzipped](/size-snapshot).
-- 💄 It's an alternative to react-responsive and react-media that aims for simplicity.
-- 🤖 It supports Server-side rendering.
+- 🤖 It supports server-side rendering.
## Simple media query
@@ -38,41 +37,68 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+ return {`theme.breakpoints.up('sm') matches: ${matches}`} ;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
## Using JavaScript syntax
-[json2mq](https://github.com/akiran/json2mq) is used to generate media query string from a JavaScript object.
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## 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). We also encourage the usage of the `useMediaQueryTheme` version of the hook that fetches properties from the theme. This way, you can provide a `ssrMatchMedia` option once for all your React tree.
+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.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-## Migrating from `withWidth()`
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
-The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+Try relying on client-side CSS media queries first. For instance, you could use:
-```jsx
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
- const theme = useTheme();
- const keys = [...theme.breakpoints.keys].reverse();
- return (
- keys.reduce((output, key) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const matches = useMediaQuery(theme.breakpoints.only(key));
- return !output && matches ? key : output;
- }, null) || 'xs'
- );
+- [``](/system/display/#hiding-elements)
+- [``](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## Test
+
+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.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+ return query => ({
+ matches: mediaQuery.match(query, { width }),
+ addListener: () => {},
+ removeListener: () => {},
+ });
}
+
+describe('MyTests', () => {
+ beforeAll(() => {
+ window.matchMedia = createMatchMedia(window.innerWidth);
+ });
+});
```
+## Migrating from `withWidth()`
+
+The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+
{{"demo": "pages/components/use-media-query/UseWidth.js"}}
## API
@@ -81,11 +107,11 @@ function useWidth() {
#### Paramètres
-1. `query` (*String*): A string representing the media query to handle.
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [optional]):
- `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- `options.noSsr` (*Boolean* [optional]): Valeur par défaut `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom properties`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### Valeur de retour
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 5db61ed6f04e01..948317bff8614f 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
@@ -11,8 +11,7 @@ Some of the key features:
- ⚛️ It has an idiomatic React API.
- 🚀 It's performant, it observes the document to detect when its media queries change, instead of polling the values periodically.
- 📦 [1 kB gzipped](/size-snapshot).
-- 💄 It's an alternative to react-responsive and react-media that aims for simplicity.
-- 🤖 It supports Server-side rendering.
+- 🤖 It supports server-side rendering.
## Simple media query
@@ -38,41 +37,68 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+ return {`theme.breakpoints.up('sm') matches: ${matches}`} ;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
## Using JavaScript syntax
-[json2mq](https://github.com/akiran/json2mq) is used to generate media query string from a JavaScript object.
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## 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). We also encourage the usage of the `useMediaQueryTheme` version of the hook that fetches properties from the theme. This way, you can provide a `ssrMatchMedia` option once for all your React tree.
+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.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-## Migrating from `withWidth()`
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
-The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+Try relying on client-side CSS media queries first. For instance, you could use:
-```jsx
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
- const theme = useTheme();
- const keys = [...theme.breakpoints.keys].reverse();
- return (
- keys.reduce((output, key) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const matches = useMediaQuery(theme.breakpoints.only(key));
- return !output && matches ? key : output;
- }, null) || 'xs'
- );
+- [``](/system/display/#hiding-elements)
+- [``](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## テスト中
+
+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.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+ return query => ({
+ matches: mediaQuery.match(query, { width }),
+ addListener: () => {},
+ removeListener: () => {},
+ });
}
+
+describe('MyTests', () => {
+ beforeAll(() => {
+ window.matchMedia = createMatchMedia(window.innerWidth);
+ });
+});
```
+## Migrating from `withWidth()`
+
+The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+
{{"demo": "pages/components/use-media-query/UseWidth.js"}}
## API
@@ -81,11 +107,11 @@ function useWidth() {
#### 引数
-1. `query` (*String*): A string representing the media query to handle.
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [optional]):
- `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- `options.noSsr` (*ブール値* [任意]): デフォルト値 `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom properties`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### 戻り値
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 e94642afbecf02..95123048453392 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
@@ -11,8 +11,7 @@ Algumas das principais características:
- ⚛️ Tem uma API React idiomática.
- 🚀 Com desempenho, ele observa o documento para detectar quando suas consultas de mídia mudam, em vez de pesquisar os valores periodicamente.
- 📦 [1 kB gzipped](/size-snapshot).
-- 💄 É uma alternativa para react-responsive e react-media que visa simplicidade.
-- 🤖 Ele suporta a renderização do lado do servidor.
+- 🤖 It supports server-side rendering.
## Consulta de mídia simples
@@ -38,41 +37,68 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+ return {`theme.breakpoints.up('sm') matches: ${matches}`} ;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
## Usando a sintaxe JavaScript
-[json2mq](https://github.com/akiran/json2mq) é usado para gerar uma string de consulta de mídia a partir de um objeto JavaScript.
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## Renderização no servidor (Server-Side Rendering)
-Uma implementação do [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). Também incentivamos o uso da versão hook de `useMediaQueryTheme` que busca propriedades do tema. Dessa forma, você pode fornecer uma opção `ssrMatchMedia` uma vez para toda a sua árvore React.
+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.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-## Migrando de `withWidth()`
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
-O componente de ordem superior `withWidth()` injeta a largura da tela da página. Você pode reproduzir o mesmo comportamento com o hook `useWidth`:
+Try relying on client-side CSS media queries first. For instance, you could use:
-```jsx
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
- const theme = useTheme();
- const keys = [...theme.breakpoints.keys].reverse();
- return (
- keys.reduce((output, key) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const matches = useMediaQuery(theme.breakpoints.only(key));
- return !output && matches ? key : output;
- }, null) || 'xs'
- );
+- [``](/system/display/#hiding-elements)
+- [``](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## Testando
+
+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.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+ return query => ({
+ matches: mediaQuery.match(query, { width }),
+ addListener: () => {},
+ removeListener: () => {},
+ });
}
+
+describe('MyTests', () => {
+ beforeAll(() => {
+ window.matchMedia = createMatchMedia(window.innerWidth);
+ });
+});
```
+## Migrando de `withWidth()`
+
+O componente de ordem superior `withWidth()` injeta a largura da tela da página. Você pode reproduzir o mesmo comportamento com o hook `useWidth`:
+
{{"demo": "pages/components/use-media-query/UseWidth.js"}}
## API
@@ -81,11 +107,11 @@ function useWidth() {
#### Argumentos
-1. `query` (*String*): uma string representando a consulta de mídia a ser manipulada.
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [opcional]):
- `options.defaultMatches` (*Boolean* [opcional]): Como `window.matchMedia()` não esta disponível no servidor, retornamos uma correspondência padrão durante a primeira montagem. O valor padrão é `false`.
- `options.noSsr` (*Boolean* [opcional]): Padrão é `false`. Para realizar a reconciliação de renderização do lado do servidor, ele precisa renderizar duas vezes. Uma primeira vez sem nada e uma segunda vez com os filhos. Este ciclo de renderização de dupla passagem tem uma desvantagem. É mais lento. Você pode definir esse sinalizador para `true` se você **não estiver fazendo a renderização do lado do servidor**.
- - `options.ssrMatchMedia` (*Function* [opcional]) Você pode querer usar uma heurística para aproximar a tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint https://caniuse.com/#search=client%20hint. Você pode fornecer um global ponyfill usando [`propriedades customizadas`](/customization/globals/#default-props) no tema. Verifique o exemplo de renderização do lado do servidor [](#server-side-rendering).
+ - `options.ssrMatchMedia` (*Function* [opcional]) Você pode querer usar uma heurística para aproximar a tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Verifique o exemplo de renderização do lado do servidor [](#server-side-rendering).
#### Retornos
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 5da14cfe53ae29..939304ed64f4cb 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
@@ -11,8 +11,7 @@ Some of the key features:
- ⚛️ Имеет идиоматический React API.
- 🚀 Он производителен. Он наблюдает за документом, чтобы определить, когда его медиа-запросы изменяются, вместо периодического опроса значения.
- 1 [1 кБ в сжатом виде](/size-snapshot).
-- 💄 Это альтернатива упрощения react-responsive и react-media.
-- 🤖 Поддерживает рендеринг на стороне сервера.
+- 🤖 It supports server-side rendering.
## Простой медиа-запрос
@@ -38,41 +37,68 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+ return {`theme.breakpoints.up('sm') matches: ${matches}`} ;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
## Using JavaScript syntax
-[json2mq](https://github.com/akiran/json2mq) is used to generate media query string from a JavaScript object.
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## 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). We also encourage the usage of the `useMediaQueryTheme` version of the hook that fetches properties from the theme. This way, you can provide a `ssrMatchMedia` option once for all your React tree.
+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.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-## Migrating from `withWidth()`
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
-The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+Try relying on client-side CSS media queries first. For instance, you could use:
-```jsx
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
- const theme = useTheme();
- const keys = [...theme.breakpoints.keys].reverse();
- return (
- keys.reduce((output, key) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const matches = useMediaQuery(theme.breakpoints.only(key));
- return !output && matches ? key : output;
- }, null) || 'xs'
- );
+- [``](/system/display/#hiding-elements)
+- [``](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## Тестирование
+
+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.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+ return query => ({
+ matches: mediaQuery.match(query, { width }),
+ addListener: () => {},
+ removeListener: () => {},
+ });
}
+
+describe('MyTests', () => {
+ beforeAll(() => {
+ window.matchMedia = createMatchMedia(window.innerWidth);
+ });
+});
```
+## Migrating from `withWidth()`
+
+The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook:
+
{{"demo": "pages/components/use-media-query/UseWidth.js"}}
## API
@@ -81,11 +107,11 @@ function useWidth() {
#### Аргументы
-1. `query` (*String*): A string representing the media query to handle.
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [optional]):
- `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- `options.noSsr` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom properties`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### Возвращает
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 ae0c6c7865c1a5..a9c2597e00a98f 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
@@ -11,8 +11,7 @@ title: React中的媒体查询用于响应式设计
- ⚛️它有一个惯用的React API。
- 🚀它具有高性能，它会观察文档以检测其媒体查询何时发生更改，而不是定期轮询值。
- 📦 [1 kB gzipped](/size-snapshot).
-- 💄它是反应敏感和反应媒体的替代方案，旨在简化。
-- 🤖它支持服务器端渲染。
+- 🤖 It supports server-side rendering.
## 简单的媒体查询
@@ -38,41 +37,68 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
+Alternatively, you can use a callback function, accepting the theme as a first argument:
+
+```jsx
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+
+function MyComponent() {
+ const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));
+
+ return {`theme.breakpoints.up('sm') matches: ${matches}`} ;
+}
+```
+
+⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+
## 使用JavaScript语法
-[json2mq](https://github.com/akiran/json2mq) 用于将JavaScript对象转换生成媒体查询字符串。
+You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## 服务器端呈现
-服务器上需要实现 [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) ，我们建议使用 [css-mediaquery](https://github.com/ericf/css-mediaquery)。 我们还鼓励使用从主题中获取属性的 `useMediaQueryTheme` 版本的钩子。 这样，您可以提供一次 `ssrMatchMedia` 选项，所有的React树都适用。
+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.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-## 迁徙自 `withWidth()`
+⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
-`withWidth()` 高阶组件注入页面的屏幕宽度。 您可以对 `useWidth` 钩子重用相同的操作：
+Try relying on client-side CSS media queries first. For instance, you could use:
-```jsx
-/**
- * Be careful using this hook. It only works because the number of
- * breakpoints in theme is static. It will break once you change the number of
- * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
- */
-function useWidth() {
- const theme = useTheme();
- const keys = [...theme.breakpoints.keys].reverse();
- return (
- keys.reduce((output, key) => {
- // eslint-disable-next-line react-hooks/rules-of-hooks
- const matches = useMediaQuery(theme.breakpoints.only(key));
- return !output && matches ? key : output;
- }, null) || 'xs'
- );
+- [``](/system/display/#hiding-elements)
+- [``](/components/hidden/#css)
+- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+
+## 测试
+
+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.
+
+```js
+import mediaQuery from 'css-mediaquery';
+
+function createMatchMedia(width) {
+ return query => ({
+ matches: mediaQuery.match(query, { width }),
+ addListener: () => {},
+ removeListener: () => {},
+ });
}
+
+describe('MyTests', () => {
+ beforeAll(() => {
+ window.matchMedia = createMatchMedia(window.innerWidth);
+ });
+});
```
+## 迁徙自 `withWidth()`
+
+`withWidth()` 高阶组件注入页面的屏幕宽度。 您可以对 `useWidth` 钩子重用相同的操作：
+
{{"demo": "pages/components/use-media-query/UseWidth.js"}}
## API
@@ -81,11 +107,11 @@ function useWidth() {
#### 参数
-1. `query` （*String*）：表示要处理的媒体查询的字符串。
+1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `选项` (*Object* [optional]):
- `options.defaultMatches` （*布尔值* [optional]）： 作为 `window.matchMedia()` 在服务器上不可用， 我们在第一次安装时返回默认匹配。 默认值为 `false`。
- `options.noSsr` (*Boolean* [可选的]): 默认值为`false`。 为了执行服务器端呈现协调，它需要呈现两次。 第一次没有任何东西，第二次与孩子们在一起。 这种双遍渲染周期有一个缺点。 它慢了。 您可以将此标志设置为 `真` ，如果你是 **没有做服务器端渲染**。
- - `options.ssrMatchMedia` （*功能* [optional]）您可能希望使用启发式来近似 客户端浏览器的屏幕。 例如，您可以使用用户代理或客户端提示https://caniuse.com/#search=client%20hint。 You can provide a global ponyfill using [`custom properties`](/customization/globals/#default-props) on the theme. 检查 [服务器端呈现示例](#server-side-rendering)。
+ - `options.ssrMatchMedia` （*功能* [optional]）您可能希望使用启发式来近似 客户端浏览器的屏幕。 例如，您可以使用用户代理或客户端提示https://caniuse.com/#search=client%20hint。 You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. 检查 [服务器端呈现示例](#server-side-rendering)。
#### 返回结果
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-de.md b/docs/src/pages/customization/breakpoints/breakpoints-de.md
index 35fa32e628413f..fa44cd191086fa 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-de.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-de.md
@@ -65,7 +65,7 @@ Weitere Informationen finden Sie auf der [ useMediaQuery](/components/use-media-
### withWidth()
-> ⚠️ Diese Komponente höherer Ordnung wird ist veraltet und wird durch den [useMediaQuery](/components/use-media-query/) hook ersetzt, wenn die React hooks als stabil freigegeben werden.
+> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook.
```jsx
import withWidth from '@material-ui/core/withWidth';
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-es.md b/docs/src/pages/customization/breakpoints/breakpoints-es.md
index 3be1f200881000..c05560c1574bbc 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-es.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-es.md
@@ -65,7 +65,7 @@ You can learn more on the [useMediaQuery](/components/use-media-query/) page.
### withWidth()
-> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook when the React's hooks are released as stable.
+> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook.
```jsx
import withWidth from '@material-ui/core/withWidth';
@@ -85,11 +85,11 @@ In the following demo, we change the rendered DOM element (*em*, u , ~~del
### `theme.breakpoints.up(key) => media query`
-#### Arguments
+#### Argumentos
1. `key` (*String* | *Number*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
-#### Returns
+#### Devuelve
`media query`: A media query string ready to be used with JSS.
@@ -110,11 +110,11 @@ const styles = theme => ({
### `theme.breakpoints.down(key) => media query`
-#### Arguments
+#### Argumentos
1. `key` (*String* | *Number*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
-#### Returns
+#### Devuelve
`media query`: A media query string ready to be used with JSS, which matches screen widths less than and including the screen size given by the breakpoint key.
@@ -136,11 +136,11 @@ const styles = theme => ({
### `theme.breakpoints.only(key) => media query`
-#### Arguments
+#### Argumentos
1. `key` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-#### Returns
+#### Devuelve
`media query`: A media query string ready to be used with JSS, which matches screen widths greater than and including the screen size given by the breakpoint key.
@@ -162,12 +162,12 @@ const styles = theme => ({
### `theme.breakpoints.between(start, end) => media query`
-#### Arguments
+#### Argumentos
1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.).
2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-#### Returns
+#### Devuelve
`media query`: A media query string ready to be used with JSS, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the the screen size given by the breakpoint key in the second argument.
@@ -199,7 +199,7 @@ Some implementation details that might be interesting to being aware of:
- It forwards *non React static* properties so this HOC is more "transparent". For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-#### Arguments
+#### Argumentos
1. `options` (*Object* [optional]):
- `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
@@ -220,7 +220,7 @@ const theme = createMuiTheme({
- `options.resizeInterval` (*Number* [optional]): Defaults to 166, corresponds to 10 frames at 60 Hz. Number of milliseconds to wait before responding to a screen resize event.
-#### Returns
+#### Devuelve
`higher-order component`: Should be used to wrap a component.
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-fr.md b/docs/src/pages/customization/breakpoints/breakpoints-fr.md
index e7319dcc5b70df..d60962db2192ed 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-fr.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-fr.md
@@ -65,7 +65,7 @@ You can learn more on the [useMediaQuery](/components/use-media-query/) page.
### withWidth()
-> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook when the React's hooks are released as stable.
+> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook.
```jsx
import withWidth from '@material-ui/core/withWidth';
@@ -203,7 +203,7 @@ Some implementation details that might be interesting to being aware of:
1. `options` (*Object* [optional]):
- `options.withTheme` (*Boolean* [optional]): Valeur par défaut `false`. Provide the `theme` object to the component as a property.
- - `options.noSSR` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
+ - `options.noSSR` (*Boolean* [optional]): Valeur par défaut `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
- `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
```js
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ja.md b/docs/src/pages/customization/breakpoints/breakpoints-ja.md
index 9848808c2ffa8f..557fc535f9675d 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-ja.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-ja.md
@@ -65,7 +65,7 @@ You can learn more on the [useMediaQuery](/components/use-media-query/) page.
### withWidth()
-> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook when the React's hooks are released as stable.
+> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook.
```jsx
import withWidth from '@material-ui/core/withWidth';
@@ -85,11 +85,11 @@ In the following demo, we change the rendered DOM element (*em*, u , ~~del
### `theme.breakpoints.up(key) => media query`
-#### Arguments
+#### 引数
1. `key` (*String* | *Number*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
-#### Returns
+#### 戻り値
`media query`: A media query string ready to be used with JSS.
@@ -110,11 +110,11 @@ const styles = theme => ({
### `theme.breakpoints.down(key) => media query`
-#### Arguments
+#### 引数
1. `key` (*String* | *Number*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
-#### Returns
+#### 戻り値
`media query`: A media query string ready to be used with JSS, which matches screen widths less than and including the screen size given by the breakpoint key.
@@ -136,11 +136,11 @@ const styles = theme => ({
### `theme.breakpoints.only(key) => media query`
-#### Arguments
+#### 引数
1. `key` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-#### Returns
+#### 戻り値
`media query`: A media query string ready to be used with JSS, which matches screen widths greater than and including the screen size given by the breakpoint key.
@@ -162,12 +162,12 @@ const styles = theme => ({
### `theme.breakpoints.between(start, end) => media query`
-#### Arguments
+#### 引数
1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.).
2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-#### Returns
+#### 戻り値
`media query`: A media query string ready to be used with JSS, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the the screen size given by the breakpoint key in the second argument.
@@ -199,11 +199,11 @@ Some implementation details that might be interesting to being aware of:
- It forwards *non React static* properties so this HOC is more "transparent". For instance, it can be used to defined a `getInitialProps()` static method (next.js).
-#### Arguments
+#### 引数
1. `options` (*Object* [optional]):
- - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
- - `options.noSSR` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
+ - `options.withTheme` (*ブール値* [任意]): デフォルト値 `false`. Provide the `theme` object to the component as a property.
+ - `options.noSSR` (*ブール値* [任意]): デフォルト値 `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
- `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
```js
@@ -220,7 +220,7 @@ const theme = createMuiTheme({
- `options.resizeInterval` (*Number* [optional]): Defaults to 166, corresponds to 10 frames at 60 Hz. Number of milliseconds to wait before responding to a screen resize event.
-#### Returns
+#### 戻り値
`higher-order component`: Should be used to wrap a component.
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-pt.md b/docs/src/pages/customization/breakpoints/breakpoints-pt.md
index 341ab3ee215a3a..431f6f6fb720d8 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-pt.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-pt.md
@@ -65,7 +65,7 @@ Você pode aprender mais na página [useMediaQuery](/components/use-media-query/
### withWidth()
-> ⚠️ Esse componente de ordem superior será descontinuado para o hook [ useMediaQuery](/components/use-media-query/) quando os hooks do React forem liberados como estáveis.
+> ⚠️ Esse componente de ordem superior será descontinuado para o hook [useMediaQuery](/components/use-media-query/).
```jsx
import withWidth from '@material-ui/core/withWidth';
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ru.md b/docs/src/pages/customization/breakpoints/breakpoints-ru.md
index 19b54e23496db5..12b80290f2b8db 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-ru.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-ru.md
@@ -65,7 +65,7 @@ You can learn more on the [useMediaQuery](/components/use-media-query/) page.
### withWidth()
-> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook when the React's hooks are released as stable.
+> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook.
```jsx
import withWidth from '@material-ui/core/withWidth';
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-zh.md b/docs/src/pages/customization/breakpoints/breakpoints-zh.md
index eac4f1b6f96067..54f4961d27be5c 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-zh.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-zh.md
@@ -65,7 +65,7 @@ const styles = theme => ({
### withWidth()
-> ⚠️当React Hooks成为稳定版本时，此高阶组件将被弃用并使用[ useMediaQuery](/components/use-media-query/) hook代替。
+> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook.
```jsx
import withWidth from '@material-ui/core/withWidth';
diff --git a/docs/src/pages/customization/components/components-de.md b/docs/src/pages/customization/components/components-de.md
index 6bee42138c86c3..652bd776de72fb 100644
--- a/docs/src/pages/customization/components/components-de.md
+++ b/docs/src/pages/customization/components/components-de.md
@@ -1,8 +1,8 @@
-# Customizing components
+# Anpassen von Komponenten
-You can easily customize the appearance of a Material-UI component.
+Sie können das Erscheinungsbild einer Material-UI-Komponente einfach anpassen.
-As components can be used in different contexts, the are several approaches to this. Going from the narrowest use-case to the broadest, these are:
+Da Komponenten in unterschiedlichen Kontexten eingesetzt werden können, gibt es verschiedene Ansätze. Vom engsten Anwendungsfall bis zum umfassendsten sind dies:
1. [Spezifische Abweichung für eine einmalige Situation](#1-specific-variation-for-a-one-time-situation)
2. [Dynamische Variation für eine einmalige Situation](#2-dynamic-variation-for-a-one-time-situation)
@@ -14,7 +14,7 @@ As components can be used in different contexts, the are several approaches to t
Möglicherweise müssen Sie den Stil einer Komponente für eine bestimmte Implementierung ändern, für die Sie die folgenden Lösungen zur Verfügung haben:
-### Overriding styles with class names
+### Überschreiben des styles mit Klassennamen
Die erste Möglichkeit, den Stil einer Komponente zu überschreiben, besteht in der Verwendung von **Klassennamen**. Jede Komponente stellt eine `Klassennamen` Eigenschaft bereit, die immer auf das unterste Element angewendet wird.
@@ -22,7 +22,7 @@ In diesem Beispiel wird die [`withStyles()`](/styles/basics/#higher-order-compon
{{"demo": "pages/customization/components/ClassNames.js"}}
-### Overriding styles with classes
+### Überschreiben des styles mit Klassennamen
Wenn die ` Klassennamen`-Eigenschaft nicht genug ist, und Sie auf tiefere Elemente zugreifen müssen, können Sie die ` classes`-Eigenschaft nutzen, um alle von Material-UI für eine bestimmte Komponente eingefügtes CSS anzupassen. Die Liste der Klassen für jede Komponente ist in der **Komponenten-API** Sektion dokumentiert. Zum Beispiel können Sie sich die [ Button CSS-API](/api/button/#css) anschauen. Alternativ können Sie die [Browser-Entwicklungswerkzeuge](#using-the-dev-tools) verwenden.
@@ -69,11 +69,11 @@ const StyledButton = withStyles({
{{"demo": "pages/customization/components/ClassesShorthand.js"}}
-### Pseudo-classes
+### Pseudoklassen
The components special states, like *hover*, *focus*, *disabled* and *selected*, are styled with a higher CSS specificity. [Spezifität ist ein Gewicht](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) das für eine gegebene CSS-Deklaration gilt.
-In order to override the components special states, **you need to increase specificity**. Hier ist ein Beispiel mit dem *disable* Zustand und einer Button Komponente mittels einer **pseudo-class** (`:disabled`):
+Um die internen Zustände der Komponenten zu überschreiben, **müssen Sie die Spezifität erhöhen **. Hier ist ein Beispiel mit dem *disable* Zustand und einer Button Komponente mittels einer **pseudo-class** (`:disabled`):
```css
.Button {
@@ -105,22 +105,22 @@ Manchmal können Sie keine **Pseudoklasse** verwenden, da der Zustand nicht in d
#### Warum muss ich die Spezifität erhöhen, um einen Komponentenzustand außer Kraft zu setzen?
-Die CSS-Spezifikation bewirkt, dass die Pseudoklassen die Spezifität erhöhen. 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.
+Die CSS-Spezifikation bewirkt, dass die Pseudoklassen die Spezifität erhöhen. Aus Gründen der Konsistanz erhöht die Material-UI die Spezifität ihrer benutzerdefinierten Zustände. This has one important advantage, it allows you to cherry-pick the state you want to customize.
#### Can I use a different API that requires fewer boilerplate?
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 key | Global class name |
-|:------------ |:----------------- |
-| checked | Mui-checked |
-| disabled | Mui-disabled |
-| error | Mui-error |
-| focused | Mui-focused |
-| focusVisible | Mui-focusVisible |
-| required | Mui-required |
-| expanded | Mui-expanded |
-| selected | Mui-selected |
+| classes key | Globaler Klassenname |
+|:------------ |:-------------------- |
+| checked | Mui-checked |
+| deaktiviert | Mui-disabled |
+| Fehler | Mui-error |
+| fokussiert | Mui-focused |
+| focusVisible | Mui-focusVisible |
+| erforderlich | Mui-required |
+| expanded | Mui-expanded |
+| ausgewählt | Mui-selected |
```css
.MenuItem {
@@ -166,7 +166,7 @@ kompiliert zu:
classes={{
root: classes.root, // class name, e.g. `root-x`
disabled: classes.disabled, // class name, e.g. `disabled-x`
- } }
+ }}
>
```
@@ -184,7 +184,7 @@ Sie müssen sich keine Gedanken über die CSS-Spezifität machen, da der Inline-
## 2. Dynamische Variation für eine einmalige Situation
-You have learned how to override the style of a Material-UI component in the previous section. Nun wollen wir mal sehen, wie wir diese Überschreibungen dynamisch machen können. Here are five alternatives; each has it's pros and cons.
+In den vorherigen Abschnitten haben Sie gelernt, wie Sie den Stil der Material-UI-Komponenten überschreiben. Nun wollen wir mal sehen, wie wir diese Überschreibungen dynamisch machen können. Here are five alternatives; each has it's pros and cons.
### Dynamisches CSS
diff --git a/docs/src/pages/customization/components/components-es.md b/docs/src/pages/customization/components/components-es.md
index f9285aff48156e..419b7732ded41e 100644
--- a/docs/src/pages/customization/components/components-es.md
+++ b/docs/src/pages/customization/components/components-es.md
@@ -2,7 +2,7 @@
You can easily customize the appearance of a Material-UI component.
-As components can be used in different contexts, the are several approaches to this. Going from the narrowest use-case to the broadest, these are:
+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. [Variación específica para una situación única](#1-specific-variation-for-a-one-time-situation)
2. [Variación dinámica para una situación única](#2-dynamic-variation-for-a-one-time-situation)
@@ -166,7 +166,7 @@ compiles to:
classes={{
root: classes.root, // class name, e.g. `root-x`
disabled: classes.disabled, // class name, e.g. `disabled-x`
- } }
+ }}
>
```
diff --git a/docs/src/pages/customization/components/components-fr.md b/docs/src/pages/customization/components/components-fr.md
index a2681a9313ca3b..957917554a5e87 100644
--- a/docs/src/pages/customization/components/components-fr.md
+++ b/docs/src/pages/customization/components/components-fr.md
@@ -2,7 +2,7 @@
Vous pouvez facilement personnaliser l'apparence d'un composant Material-UI.
-Comme les composants peuvent être utilisés dans différents contextes, plusieurs approches sont possibles. Du plus étroit cas d'utilisation au plus large, il s'agit des suivants :
+As components can be used in different contexts, there are several approaches to this. Du plus étroit cas d'utilisation au plus large, il s'agit des suivants :
1. [Variation spécifique pour une situation ponctuelle](#1-specific-variation-for-a-one-time-situation)
2. [Variation dynamique pour une situation ponctuelle](#2-dynamic-variation-for-a-one-time-situation)
@@ -166,7 +166,7 @@ compile vers :
classes={{
root: classes.root, // class name, e.g. `root-x`
disabled: classes.disabled, // class name, e.g. `disabled-x`
- } }
+ }}
>
```
diff --git a/docs/src/pages/customization/components/components-ja.md b/docs/src/pages/customization/components/components-ja.md
index 2281150a10ca3a..0e0a032999d811 100644
--- a/docs/src/pages/customization/components/components-ja.md
+++ b/docs/src/pages/customization/components/components-ja.md
@@ -2,7 +2,7 @@
You can easily customize the appearance of a Material-UI component.
-As components can be used in different contexts, the are several approaches to this. Going from the narrowest use-case to the broadest, these are:
+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)
@@ -88,7 +88,7 @@ In order to override the components special states, **you need to increase speci
```
-Sometimes, you can't use a **pseudo-class** as the state doesn't exist in the platform. Let's take the menu item component and the *selected* state as an example. Aside from accessing nested elements, the `classes` property can be used to customize the special states of Material-UI components:
+時にはこのプラットフォームではstateとして**pseudo-class**は使うことができない。 メニュー項目の構成要素と*選ばれた*例として述べる。 Aside from accessing nested elements, the `classes` property can be used to customize the special states of Material-UI components:
```css
.MenuItem {
@@ -166,7 +166,7 @@ const styles = {
classes={{
root: classes.root, // class name, e.g. `root-x`
disabled: classes.disabled, // class name, e.g. `disabled-x`
- } }
+ }}
>
```
diff --git a/docs/src/pages/customization/components/components-pt.md b/docs/src/pages/customization/components/components-pt.md
index 9770a2ab654c45..734541c54a83d3 100644
--- a/docs/src/pages/customization/components/components-pt.md
+++ b/docs/src/pages/customization/components/components-pt.md
@@ -166,7 +166,7 @@ compila para:
classes={{
root: classes.root, // class name, e.g. `root-x`
disabled: classes.disabled, // class name, e.g. `disabled-x`
- } }
+ }}
>
```
diff --git a/docs/src/pages/customization/components/components-ru.md b/docs/src/pages/customization/components/components-ru.md
index 94e66b1ff1a6a3..a00578ec7d1a82 100644
--- a/docs/src/pages/customization/components/components-ru.md
+++ b/docs/src/pages/customization/components/components-ru.md
@@ -2,7 +2,7 @@
You can easily customize the appearance of a Material-UI component.
-As components can be used in different contexts, the are several approaches to this. Going from the narrowest use-case to the broadest, these are:
+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. [Конкретное изменение для единичного случая](#1-specific-variation-for-a-one-time-situation)
2. [Динамическое изменение для единичного случая](#2-dynamic-variation-for-a-one-time-situation)
@@ -166,7 +166,7 @@ const styles = {
classes={{
root: classes.root, // class name, e.g. `root-x`
disabled: classes.disabled, // class name, e.g. `disabled-x`
- } }
+ }}
>
```
diff --git a/docs/src/pages/customization/components/components-zh.md b/docs/src/pages/customization/components/components-zh.md
index 939e2196fff0f8..f76a5980a3089b 100644
--- a/docs/src/pages/customization/components/components-zh.md
+++ b/docs/src/pages/customization/components/components-zh.md
@@ -2,7 +2,7 @@
您可以轻松地自定义一个 Material-UI 组件的外观。
-由于组件可以在不同的上下文环境中使用，因此有几种方法。 从最狭窄的用例到最广泛的用例，这些是：
+有多种方法可以实现在不同的上下文环境中使用组件。 从最狭窄的用例到最广泛的用例，这些是：
1. [一次性使用的特定变体](#1-specific-variation-for-a-one-time-situation)
2. [一次性使用的动态变体](#2-dynamic-variation-for-a-one-time-situation)
@@ -166,7 +166,7 @@ const styles = {
classes={{
root: classes.root, // class name, e.g. `root-x`
disabled: classes.disabled, // class name, e.g. `disabled-x`
- } }
+ }}
>
```
diff --git a/docs/src/pages/customization/density/density-de.md b/docs/src/pages/customization/density/density-de.md
new file mode 100644
index 00000000000000..8c677cf1136f45
--- /dev/null
+++ b/docs/src/pages/customization/density/density-de.md
@@ -0,0 +1,95 @@
+# Density
+
+How to apply density to Material-UI components.
+
+## 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.
+
+## Implementing density
+
+Higher density can be applied to some components via props. The component pages have at least one example using the respective component with higher density applied.
+
+Depending on the component, density is applied either via lower spacing, or simply by reducing the size.
+
+The following components have props applying higher density:
+
+- [Button](/api/button)
+- [Fab](/api/fab)
+- [FilledInput](/api/filled-input)
+- [FormControl](/api/form-control)
+- [FormHelperText](/api/form-helper-text)
+- [IconButton](/api/icon-button)
+- [InputBase](/api/input-base)
+- [InputLabel](/api/input-label)
+- [ListItem](/api/list-item)
+- [OutlinedInput](/api/outlined-input)
+- [Tabelle](/api/table)
+- [Textfeld](/api/text-field)
+- [Toolbar](/api/toolbar)
+
+## Explore theme density
+
+This tool allows you to apply density via spacing and component props. You can browse around and see how this applies to the overall feel of Material-UI components.
+
+If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You *should not* apply this theme to your whole application as this might negatively impact user experience. The [Material design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density.
+
+The theme is configured with the following options:
+
+```js
+const theme = createMuiTheme({
+ props: {
+ MuiButton: {
+ size: 'small',
+ },
+ MuiFilledInput: {
+ margin: 'dense',
+ },
+ MuiFormControl: {
+ margin: 'dense',
+ },
+ MuiFormHelperText: {
+ margin: 'dense',
+ },
+ MuiIconButton: {
+ size: 'small',
+ },
+ MuiInputBase: {
+ margin: 'dense',
+ },
+ MuiInputLabel: {
+ margin: 'dense',
+ },
+ MuiListItem: {
+ dense: true,
+ },
+ MuiOutlinedInput: {
+ margin: 'dense',
+ },
+ MuiFab: {
+ size: 'small',
+ },
+ MuiTable: {
+ size: 'small',
+ },
+ MuiTextField: {
+ margin: 'dense',
+ },
+ MuiToolbar: {
+ variant: 'dense',
+ },
+ },
+ overrides: {
+ MuiIconButton: {
+ sizeSmall: {
+ // Adjust spacing to reach minimal touch target hitbox
+ marginLeft: 4,
+ marginRight: 4,
+ padding: 12,
+ },
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/density/DensityTool.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/customization/density/density-es.md b/docs/src/pages/customization/density/density-es.md
new file mode 100644
index 00000000000000..26596ccf685944
--- /dev/null
+++ b/docs/src/pages/customization/density/density-es.md
@@ -0,0 +1,95 @@
+# Density
+
+How to apply density to Material-UI components.
+
+## 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.
+
+## Implementing density
+
+Higher density can be applied to some components via props. The component pages have at least one example using the respective component with higher density applied.
+
+Depending on the component, density is applied either via lower spacing, or simply by reducing the size.
+
+The following components have props applying higher density:
+
+- [Button](/api/button)
+- [Fab](/api/fab)
+- [FilledInput](/api/filled-input)
+- [FormControl](/api/form-control)
+- [FormHelperText](/api/form-helper-text)
+- [IconButton](/api/icon-button)
+- [InputBase](/api/input-base)
+- [InputLabel](/api/input-label)
+- [ListItem](/api/list-item)
+- [OutlinedInput](/api/outlined-input)
+- [Table](/api/table)
+- [TextField](/api/text-field)
+- [Toolbar](/api/toolbar)
+
+## Explore theme density
+
+This tool allows you to apply density via spacing and component props. You can browse around and see how this applies to the overall feel of Material-UI components.
+
+If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You *should not* apply this theme to your whole application as this might negatively impact user experience. The [Material design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density.
+
+The theme is configured with the following options:
+
+```js
+const theme = createMuiTheme({
+ props: {
+ MuiButton: {
+ size: 'small',
+ },
+ MuiFilledInput: {
+ margin: 'dense',
+ },
+ MuiFormControl: {
+ margin: 'dense',
+ },
+ MuiFormHelperText: {
+ margin: 'dense',
+ },
+ MuiIconButton: {
+ size: 'small',
+ },
+ MuiInputBase: {
+ margin: 'dense',
+ },
+ MuiInputLabel: {
+ margin: 'dense',
+ },
+ MuiListItem: {
+ dense: true,
+ },
+ MuiOutlinedInput: {
+ margin: 'dense',
+ },
+ MuiFab: {
+ size: 'small',
+ },
+ MuiTable: {
+ size: 'small',
+ },
+ MuiTextField: {
+ margin: 'dense',
+ },
+ MuiToolbar: {
+ variant: 'dense',
+ },
+ },
+ overrides: {
+ MuiIconButton: {
+ sizeSmall: {
+ // Adjust spacing to reach minimal touch target hitbox
+ marginLeft: 4,
+ marginRight: 4,
+ padding: 12,
+ },
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/density/DensityTool.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/customization/density/density-fr.md b/docs/src/pages/customization/density/density-fr.md
new file mode 100644
index 00000000000000..26596ccf685944
--- /dev/null
+++ b/docs/src/pages/customization/density/density-fr.md
@@ -0,0 +1,95 @@
+# Density
+
+How to apply density to Material-UI components.
+
+## 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.
+
+## Implementing density
+
+Higher density can be applied to some components via props. The component pages have at least one example using the respective component with higher density applied.
+
+Depending on the component, density is applied either via lower spacing, or simply by reducing the size.
+
+The following components have props applying higher density:
+
+- [Button](/api/button)
+- [Fab](/api/fab)
+- [FilledInput](/api/filled-input)
+- [FormControl](/api/form-control)
+- [FormHelperText](/api/form-helper-text)
+- [IconButton](/api/icon-button)
+- [InputBase](/api/input-base)
+- [InputLabel](/api/input-label)
+- [ListItem](/api/list-item)
+- [OutlinedInput](/api/outlined-input)
+- [Table](/api/table)
+- [TextField](/api/text-field)
+- [Toolbar](/api/toolbar)
+
+## Explore theme density
+
+This tool allows you to apply density via spacing and component props. You can browse around and see how this applies to the overall feel of Material-UI components.
+
+If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You *should not* apply this theme to your whole application as this might negatively impact user experience. The [Material design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density.
+
+The theme is configured with the following options:
+
+```js
+const theme = createMuiTheme({
+ props: {
+ MuiButton: {
+ size: 'small',
+ },
+ MuiFilledInput: {
+ margin: 'dense',
+ },
+ MuiFormControl: {
+ margin: 'dense',
+ },
+ MuiFormHelperText: {
+ margin: 'dense',
+ },
+ MuiIconButton: {
+ size: 'small',
+ },
+ MuiInputBase: {
+ margin: 'dense',
+ },
+ MuiInputLabel: {
+ margin: 'dense',
+ },
+ MuiListItem: {
+ dense: true,
+ },
+ MuiOutlinedInput: {
+ margin: 'dense',
+ },
+ MuiFab: {
+ size: 'small',
+ },
+ MuiTable: {
+ size: 'small',
+ },
+ MuiTextField: {
+ margin: 'dense',
+ },
+ MuiToolbar: {
+ variant: 'dense',
+ },
+ },
+ overrides: {
+ MuiIconButton: {
+ sizeSmall: {
+ // Adjust spacing to reach minimal touch target hitbox
+ marginLeft: 4,
+ marginRight: 4,
+ padding: 12,
+ },
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/density/DensityTool.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/customization/density/density-ja.md b/docs/src/pages/customization/density/density-ja.md
new file mode 100644
index 00000000000000..26596ccf685944
--- /dev/null
+++ b/docs/src/pages/customization/density/density-ja.md
@@ -0,0 +1,95 @@
+# Density
+
+How to apply density to Material-UI components.
+
+## 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.
+
+## Implementing density
+
+Higher density can be applied to some components via props. The component pages have at least one example using the respective component with higher density applied.
+
+Depending on the component, density is applied either via lower spacing, or simply by reducing the size.
+
+The following components have props applying higher density:
+
+- [Button](/api/button)
+- [Fab](/api/fab)
+- [FilledInput](/api/filled-input)
+- [FormControl](/api/form-control)
+- [FormHelperText](/api/form-helper-text)
+- [IconButton](/api/icon-button)
+- [InputBase](/api/input-base)
+- [InputLabel](/api/input-label)
+- [ListItem](/api/list-item)
+- [OutlinedInput](/api/outlined-input)
+- [Table](/api/table)
+- [TextField](/api/text-field)
+- [Toolbar](/api/toolbar)
+
+## Explore theme density
+
+This tool allows you to apply density via spacing and component props. You can browse around and see how this applies to the overall feel of Material-UI components.
+
+If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You *should not* apply this theme to your whole application as this might negatively impact user experience. The [Material design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density.
+
+The theme is configured with the following options:
+
+```js
+const theme = createMuiTheme({
+ props: {
+ MuiButton: {
+ size: 'small',
+ },
+ MuiFilledInput: {
+ margin: 'dense',
+ },
+ MuiFormControl: {
+ margin: 'dense',
+ },
+ MuiFormHelperText: {
+ margin: 'dense',
+ },
+ MuiIconButton: {
+ size: 'small',
+ },
+ MuiInputBase: {
+ margin: 'dense',
+ },
+ MuiInputLabel: {
+ margin: 'dense',
+ },
+ MuiListItem: {
+ dense: true,
+ },
+ MuiOutlinedInput: {
+ margin: 'dense',
+ },
+ MuiFab: {
+ size: 'small',
+ },
+ MuiTable: {
+ size: 'small',
+ },
+ MuiTextField: {
+ margin: 'dense',
+ },
+ MuiToolbar: {
+ variant: 'dense',
+ },
+ },
+ overrides: {
+ MuiIconButton: {
+ sizeSmall: {
+ // Adjust spacing to reach minimal touch target hitbox
+ marginLeft: 4,
+ marginRight: 4,
+ padding: 12,
+ },
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/density/DensityTool.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/customization/density/density-pt.md b/docs/src/pages/customization/density/density-pt.md
new file mode 100644
index 00000000000000..31b4b4dc6fb76b
--- /dev/null
+++ b/docs/src/pages/customization/density/density-pt.md
@@ -0,0 +1,95 @@
+# Densidade
+
+Como aplicar densidade aos componentes de Material-UI.
+
+## 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.
+
+## Implementando densidade
+
+Uma densidade mais alta pode ser aplicada a alguns componentes via propriedades. As páginas de componentes têm pelo menos um exemplo usando o respectivo componente com densidade mais alta aplicada.
+
+Dependendo do componente, a densidade é aplicada por meio de espaçamento menor ou simplesmente reduzindo o tamanho.
+
+Os seguintes componentes possuem propriedades que aplicam maior densidade:
+
+- [Button](/api/button)
+- [Fab](/api/fab)
+- [FilledInput](/api/filled-input)
+- [FormControl](/api/form-control)
+- [FormHelperText](/api/form-helper-text)
+- [IconButton](/api/icon-button)
+- [InputBase](/api/input-base)
+- [InputLabel](/api/input-label)
+- [ListItem](/api/list-item)
+- [OutlinedInput](/api/outlined-input)
+- [Table](/api/table)
+- [TextField](/api/text-field)
+- [Toolbar](/api/toolbar)
+
+## Explore a densidade do tema
+
+Esta ferramenta permite aplicar densidade via espaçamento e propriedades de componentes. Você pode navegar e ver como isso se aplica à sensação geral dos componentes do Material-UI.
+
+Se você ativar alta densidade, um tema personalizado será aplicado a documentação. Este tema é apenas para fins de demonstração. Você *não deve* aplicar este tema para todo o seu aplicativo, isso pode impactar negativamente a experiência do usuário. As [diretrizes de Material design](https://material.io/design/layout/applying-density.html#typographic-density) tem exemplos para quando não aplicar densidade.
+
+O tema é configurado com as seguintes opções:
+
+```js
+const theme = createMuiTheme({
+ props: {
+ MuiButton: {
+ size: 'small',
+ },
+ MuiFilledInput: {
+ margin: 'dense',
+ },
+ MuiFormControl: {
+ margin: 'dense',
+ },
+ MuiFormHelperText: {
+ margin: 'dense',
+ },
+ MuiIconButton: {
+ size: 'small',
+ },
+ MuiInputBase: {
+ margin: 'dense',
+ },
+ MuiInputLabel: {
+ margin: 'dense',
+ },
+ MuiListItem: {
+ dense: true,
+ },
+ MuiOutlinedInput: {
+ margin: 'dense',
+ },
+ MuiFab: {
+ size: 'small',
+ },
+ MuiTable: {
+ size: 'small',
+ },
+ MuiTextField: {
+ margin: 'dense',
+ },
+ MuiToolbar: {
+ variant: 'dense',
+ },
+ },
+ overrides: {
+ MuiIconButton: {
+ sizeSmall: {
+ // Ajusta o espaçamento para atingir o mínimo de toque
+ marginLeft: 4,
+ marginRight: 4,
+ padding: 12,
+ },
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/density/DensityTool.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/customization/density/density-ru.md b/docs/src/pages/customization/density/density-ru.md
new file mode 100644
index 00000000000000..966478bf74ef97
--- /dev/null
+++ b/docs/src/pages/customization/density/density-ru.md
@@ -0,0 +1,95 @@
+# Density
+
+How to apply density to Material-UI components.
+
+## 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.
+
+## Implementing density
+
+Higher density can be applied to some components via props. The component pages have at least one example using the respective component with higher density applied.
+
+Depending on the component, density is applied either via lower spacing, or simply by reducing the size.
+
+The following components have props applying higher density:
+
+- [Button](/api/button)
+- [Fab](/api/fab)
+- [FilledInput](/api/filled-input)
+- [FormControl](/api/form-control)
+- [FormHelperText](/api/form-helper-text)
+- [IconButton](/api/icon-button)
+- [InputBase](/api/input-base)
+- [InputLabel](/api/input-label)
+- [ListItem](/api/list-item)
+- [OutlinedInput](/api/outlined-input)
+- [Table](/api/table)
+- [Текстовое поля](/api/text-field)
+- [Toolbar](/api/toolbar)
+
+## Explore theme density
+
+This tool allows you to apply density via spacing and component props. You can browse around and see how this applies to the overall feel of Material-UI components.
+
+If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You *should not* apply this theme to your whole application as this might negatively impact user experience. The [Material design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density.
+
+The theme is configured with the following options:
+
+```js
+const theme = createMuiTheme({
+ props: {
+ MuiButton: {
+ size: 'small',
+ },
+ MuiFilledInput: {
+ margin: 'dense',
+ },
+ MuiFormControl: {
+ margin: 'dense',
+ },
+ MuiFormHelperText: {
+ margin: 'dense',
+ },
+ MuiIconButton: {
+ size: 'small',
+ },
+ MuiInputBase: {
+ margin: 'dense',
+ },
+ MuiInputLabel: {
+ margin: 'dense',
+ },
+ MuiListItem: {
+ dense: true,
+ },
+ MuiOutlinedInput: {
+ margin: 'dense',
+ },
+ MuiFab: {
+ size: 'small',
+ },
+ MuiTable: {
+ size: 'small',
+ },
+ MuiTextField: {
+ margin: 'dense',
+ },
+ MuiToolbar: {
+ variant: 'dense',
+ },
+ },
+ overrides: {
+ MuiIconButton: {
+ sizeSmall: {
+ // Adjust spacing to reach minimal touch target hitbox
+ marginLeft: 4,
+ marginRight: 4,
+ padding: 12,
+ },
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/density/DensityTool.js", "hideHeader": true}}
\ No newline at end of file
diff --git a/docs/src/pages/customization/density/density-zh.md b/docs/src/pages/customization/density/density-zh.md
new file mode 100644
index 00000000000000..08ddb8da8076ee
--- /dev/null
+++ b/docs/src/pages/customization/density/density-zh.md
@@ -0,0 +1,95 @@
+# 间距(density)
+
+如何自定义间距(density)
+
+## 使用 `Density`
+
+我们不会覆盖您的应用程序中的样式，考虑一下在你的应用中使用density吧。 使用案例
+
+## Implementing density
+
+Higher density can be applied to some components via props. The component pages have at least one example using the respective component with higher density applied.
+
+Depending on the component, density is applied either via lower spacing, or simply by reducing the size.
+
+The following components have props applying higher density:
+
+- [Buttons（按钮）](/api/button)
+- [Fab](/api/fab)
+- [FilledInput](/api/filled-input)
+- [FormControl](/api/form-control)
+- [FormHelperText](/api/form-helper-text)
+- [IconButton](/api/icon-button)
+- [InputBase](/api/input-base)
+- [InputLabel](/api/input-label)
+- [ListItem](/api/list-item)
+- [OutlinedInput](/api/outlined-input)
+- [Table](/api/table)
+- [TextField](/api/text-field)
+- [Toolbar](/api/toolbar)
+
+## Explore theme density
+
+This tool allows you to apply density via spacing and component props. You can browse around and see how this applies to the overall feel of Material-UI components.
+
+If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You *should not* apply this theme to your whole application as this might negatively impact user experience. The [Material design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density.
+
+The theme is configured with the following options:
+
+```js
+const theme = createMuiTheme({
+ props: {
+ MuiButton: {
+ size: 'small',
+ },
+ MuiFilledInput: {
+ margin: 'dense',
+ },
+ MuiFormControl: {
+ margin: 'dense',
+ },
+ MuiFormHelperText: {
+ margin: 'dense',
+ },
+ MuiIconButton: {
+ size: 'small',
+ },
+ MuiInputBase: {
+ margin: 'dense',
+ },
+ MuiInputLabel: {
+ margin: 'dense',
+ },
+ MuiListItem: {
+ dense: true,
+ },
+ MuiOutlinedInput: {
+ margin: 'dense',
+ },
+ MuiFab: {
+ size: 'small',
+ },
+ MuiTable: {
+ size: 'small',
+ },
+ MuiTextField: {
+ margin: 'dense',
+ },
+ MuiToolbar: {
+ variant: 'dense',
+ },
+ },
+ overrides: {
+ MuiIconButton: {
+ sizeSmall: {
+ // Adjust spacing to reach minimal touch target hitbox
+ marginLeft: 4,
+ marginRight: 4,
+ padding: 12,
+ },
+ },
+ },
+});
+```
+
+{{"demo": "pages/customization/density/DensityTool.js", "hideHeader": true}}
\ 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 a840f7ef828cab..3f69f3b6ef7f74 100644
--- a/docs/src/pages/customization/palette/palette-de.md
+++ b/docs/src/pages/customization/palette/palette-de.md
@@ -162,4 +162,4 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js", "hideEditButton": true}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ 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 c20be1bca90608..705a7477e9904c 100644
--- a/docs/src/pages/customization/palette/palette-es.md
+++ b/docs/src/pages/customization/palette/palette-es.md
@@ -162,4 +162,4 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js", "hideEditButton": true}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ 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 b1951c270846d4..d1f6e96def826c 100644
--- a/docs/src/pages/customization/palette/palette-fr.md
+++ b/docs/src/pages/customization/palette/palette-fr.md
@@ -162,4 +162,4 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js", "hideEditButton": true}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ 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 8eb6c01cde0ba7..1dceb386a10855 100644
--- a/docs/src/pages/customization/palette/palette-ja.md
+++ b/docs/src/pages/customization/palette/palette-ja.md
@@ -162,4 +162,4 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js", "hideEditButton": true}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ 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 c9993c48b7267b..5bbe8e82df853d 100644
--- a/docs/src/pages/customization/palette/palette-pt.md
+++ b/docs/src/pages/customization/palette/palette-pt.md
@@ -162,4 +162,4 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js", "hideEditButton": true}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ 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 135f1b8b32d37c..9e563afc57b5df 100644
--- a/docs/src/pages/customization/palette/palette-ru.md
+++ b/docs/src/pages/customization/palette/palette-ru.md
@@ -162,4 +162,4 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js", "hideEditButton": true}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ 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 ee973b6c560403..bf619042ad1316 100644
--- a/docs/src/pages/customization/palette/palette-zh.md
+++ b/docs/src/pages/customization/palette/palette-zh.md
@@ -8,7 +8,7 @@ A color intention is a mapping of a palette to a given intention within your app
The theme exposes the following color intentions:
-- primary - used to represent primary interface elements for a user.
+- primary - 用来表示用户界面的主要元素
- secondary - used to represent secondary interface elements for a user.
- error - used to represent interface elements that the user should be made aware of.
@@ -16,13 +16,13 @@ The default palette uses the shades prefixed with `A` (`A200`, etc.) for the sec
If you want to learn more about color, you can check out [the color section](/customization/color/).
-## Custom palette
+## 自定义调色板
您可以通过在主题中包含 `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.
+如果存在任何一个 "intention" 对象 [`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) 都会替换默认值
-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:
+意图值可以是一个[color](/customization/color/) 对象，也可以是通过下面的TypeScript接口指定的包含一个或多个键的对象
```ts
interface PaletteIntention {
@@ -33,7 +33,7 @@ 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:
@@ -162,4 +162,4 @@ const theme = createMuiTheme({
});
```
-{{"demo": "pages/customization/palette/DarkTheme.js", "hideEditButton": true}}
\ No newline at end of file
+{{"demo": "pages/customization/palette/DarkTheme.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/customization/themes/themes-zh.md b/docs/src/pages/customization/themes/themes-zh.md
index 25090ef342e1e4..e2c5802c183982 100644
--- a/docs/src/pages/customization/themes/themes-zh.md
+++ b/docs/src/pages/customization/themes/themes-zh.md
@@ -29,7 +29,7 @@
### 自定义变量
-When using Material-UI's theme with our [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). 可以方便地向样式添加其他变量，以便您可以在任何地方使用它们。 例如：
+当您使用 Material-UI 的主题通过我们的[造型解决方案](/styles/basics/)或[任何其他](/guides/interoperability/#themeprovider)的时候。 可以方便地向样式添加其他变量，以便您可以在任何地方使用它们。 例如：
{{"demo": "pages/customization/themes/CustomStyles.js"}}
@@ -37,9 +37,9 @@ When using Material-UI's theme with our [styling solution](/styles/basics/) or [
You [can access](/styles/advanced/#accessing-the-theme-in-a-component) the theme variables inside your React components.
-## Nesting the theme
+## 嵌套主题
-[You can nest](/styles/advanced/#theme-nesting) multiple theme providers.
+[您可以嵌套](/styles/advanced/#theme-nesting)多个主题提供者。
{{"demo": "pages/customization/themes/ThemeNesting.js"}}
diff --git a/docs/src/pages/customization/typography/typography-de.md b/docs/src/pages/customization/typography/typography-de.md
index 36775f3fdb2dee..76564f031a6893 100644
--- a/docs/src/pages/customization/typography/typography-de.md
+++ b/docs/src/pages/customization/typography/typography-de.md
@@ -2,7 +2,7 @@
Das Theme bietet eine Anzahl von Schriftgrößen, die gut zusammen mit dem Layoutraster funktionieren.
-Das folgende Beispiel zeigt, wie die Standardwerte für die Typografie geändert werden können - in diesem Fall die Schriftfamilie. Wenn Sie mehr über Typografie erfahren möchten, können Sie sich über die [Typografie Komponente](/components/typography/) informieren.
+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"}}
diff --git a/docs/src/pages/customization/typography/typography-es.md b/docs/src/pages/customization/typography/typography-es.md
index 9f29c9492589a6..87d5ab22017130 100644
--- a/docs/src/pages/customization/typography/typography-es.md
+++ b/docs/src/pages/customization/typography/typography-es.md
@@ -2,7 +2,7 @@
The theme provides a set of type sizes that work well together, and also with the layout grid.
-The following example demonstrates how to change the typography default values – in this case, the font family. If you want to learn more about typography, you can check out [the typography component](/components/typography/).
+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"}}
diff --git a/docs/src/pages/customization/typography/typography-fr.md b/docs/src/pages/customization/typography/typography-fr.md
index ffb9f4472a07c3..4551de7ac8b9b1 100644
--- a/docs/src/pages/customization/typography/typography-fr.md
+++ b/docs/src/pages/customization/typography/typography-fr.md
@@ -2,7 +2,7 @@
The theme provides a set of type sizes that work well together, and also with the layout grid.
-The following example demonstrates how to change the typography default values – in this case, the font family. If you want to learn more about typography, you can check out [the typography component](/components/typography/).
+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"}}
diff --git a/docs/src/pages/customization/typography/typography-ja.md b/docs/src/pages/customization/typography/typography-ja.md
index 05d9ac570ba1de..e0b3fa029d5b19 100644
--- a/docs/src/pages/customization/typography/typography-ja.md
+++ b/docs/src/pages/customization/typography/typography-ja.md
@@ -2,7 +2,7 @@
The theme provides a set of type sizes that work well together, and also with the layout grid.
-The following example demonstrates how to change the typography default values – in this case, the font family. If you want to learn more about typography, you can check out [the typography component](/components/typography/).
+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"}}
diff --git a/docs/src/pages/customization/typography/typography-pt.md b/docs/src/pages/customization/typography/typography-pt.md
index 13d21bd50a9e10..83cd70a3c4881b 100644
--- a/docs/src/pages/customization/typography/typography-pt.md
+++ b/docs/src/pages/customization/typography/typography-pt.md
@@ -2,7 +2,7 @@
O tema fornece um conjunto de tamanhos de tipos que funcionam bem juntos e também com a grade de leiaute.
-O exemplo a seguir demonstra como alterar os valores padrão da tipografia - nesse caso, a família da fonte. Se você quiser aprender mais sobre tipografia, você pode conferir a seção do [componente tipografia](/components/typography/).
+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"}}
diff --git a/docs/src/pages/customization/typography/typography-ru.md b/docs/src/pages/customization/typography/typography-ru.md
index e710bd16e5dd7d..95d065c4e2fff2 100644
--- a/docs/src/pages/customization/typography/typography-ru.md
+++ b/docs/src/pages/customization/typography/typography-ru.md
@@ -2,7 +2,7 @@
The theme provides a set of type sizes that work well together, and also with the layout grid.
-The following example demonstrates how to change the typography default values – in this case, the font family. If you want to learn more about typography, you can check out [the typography component](/components/typography/).
+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"}}
diff --git a/docs/src/pages/customization/typography/typography-zh.md b/docs/src/pages/customization/typography/typography-zh.md
index 513aa8953d2fb5..da378b76837f28 100644
--- a/docs/src/pages/customization/typography/typography-zh.md
+++ b/docs/src/pages/customization/typography/typography-zh.md
@@ -2,7 +2,7 @@
The theme provides a set of type sizes that work well together, and also with the layout grid.
-The following example demonstrates how to change the typography default values – in this case, the font family. If you want to learn more about typography, you can check out [the typography component](/components/typography/).
+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"}}
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 9ffbf9e604c253..3513fb025c377f 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
@@ -34,5 +34,4 @@ If you want to start with a more complete and real world example, you could take
- Diagramme mit recharts
- React Router mit einem Navigationsbeispiel
- Ein Docker-Container mit einem Nginx-Server für den Produktionsaufbau
- - Erstellt mit [Create React App](https://facebook.github.io/create-react-app/)
- - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4
\ No newline at end of file
+ - Erstellt mit [Create React App](https://facebook.github.io/create-react-app/)
\ No newline at end of file
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 a9c7c7c622dd31..de19fed2ccaac7 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
@@ -34,5 +34,4 @@ If you want to start with a more complete and real world example, you could take
- Graph using recharts
- React Router incluido con un ejemplo de navegación
- Un contenedor de docker con servidor Nginx para compilado de producción
- - Creado con [Create React App](https://facebook.github.io/create-react-app/)
- - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4
\ No newline at end of file
+ - Creado con [Create React App](https://facebook.github.io/create-react-app/)
\ No newline at end of file
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 90ab43cfcffd26..17898ecdb65a2f 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
@@ -34,5 +34,4 @@ If you want to start with a more complete and real world example, you could take
- Graph using recharts
- React Router included with a navigation example
- A docker container with an Nginx server for production build
- - Created with [Create React App](https://facebook.github.io/create-react-app/)
- - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4
\ No newline at end of file
+ - Created with [Create React App](https://facebook.github.io/create-react-app/)
\ No newline at end of file
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 91881e7ab36258..87206e922efaa2 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
@@ -20,12 +20,12 @@ 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 themes](https://themes.material-ui.com/) or:
+もしあなたがより完璧な、実際に使う例から始めたいなら、[free themes](https://themes.material-ui.com/)や、以下を参考にしてください。
- [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 working from the start
+ - 最初から認証機能の付いたFirebase上に構築されます
- Robust routing with React Router including error handling (404)
- Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
@@ -34,5 +34,4 @@ If you want to start with a more complete and real world example, you could take
- rechartsを用いたグラフ
- ナビゲーションのサンプルに含まれるReact Router
- プロダクションビルド用のNginxサーバ含むdockerコンテナ
- - [Create React App](https://facebook.github.io/create-react-app/)による生成
- - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4
\ No newline at end of file
+ - [Create React App](https://facebook.github.io/create-react-app/)による生成
\ No newline at end of file
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 b596caef0b8f6e..79c3b5d7e6905c 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
@@ -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 themes](https://themes.material-ui.com/) or:
+Se você quer começar com um exemplo mais completo e do mundo real, você pode dar uma olhada nos nossos [temas gratuitos](https://themes.material-ui.com/) ou:
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
@@ -34,5 +34,4 @@ If you want to start with a more complete and real world example, you could take
- Gráfico usando recharts
- React Router incluído com um exemplo de navegação
- Um contêiner docker com um servidor Nginx para compilação de produção
- - Criado com o [Create React App](https://facebook.github.io/create-react-app/)
- - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4
\ No newline at end of file
+ - Criado com o [Create React App](https://facebook.github.io/create-react-app/)
\ No newline at end of file
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 6c931245504be8..68e69acd84fd2b 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
@@ -34,5 +34,4 @@ If you want to start with a more complete and real world example, you could take
- Graph using recharts
- React Router включен с примером навигации
- A docker container with an Nginx server for production build
- - Created with [Create React App](https://facebook.github.io/create-react-app/)
- - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4
\ No newline at end of file
+ - Created with [Create React App](https://facebook.github.io/create-react-app/)
\ No newline at end of file
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 963229ed4c2f56..75f27536704752 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
@@ -20,12 +20,12 @@ 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 themes](https://themes.material-ui.com/) or:
+如果你想体验一下更加完整的真实案例，可以尝试一下我们的[免费主题](https://themes.material-ui.com/)，或者以下几个例子：
-- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
+- [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 working from the start
+ - 使用Create React App创建，开箱即用
+ - 以Firebase为基准构建，内置身份验证模块
- Robust routing with React Router including error handling (404)
- Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
@@ -34,5 +34,4 @@ If you want to start with a more complete and real world example, you could take
- 使用 recharts 的图表
- 在导航示例中涵盖了 React Router
- 一个具有用于生产环境创造的 Nginx 服务器的 Docker container(Docker 容器)。
- - 使用 [Create React App](https://facebook.github.io/create-react-app/) 创建
- - *NOTE*: This project is using *v3* of the Material lib, not yet updated for v4
\ No newline at end of file
+ - 使用 [Create React App](https://facebook.github.io/create-react-app/) 创建
\ 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 0af4b0eb9bec3a..56d426fd556c19 100644
--- a/docs/src/pages/getting-started/faq/faq-de.md
+++ b/docs/src/pages/getting-started/faq/faq-de.md
@@ -128,7 +128,7 @@ const ref = React.createRef ();
const Element = ref.current;
```
-Wenn Sie nicht sicher sind, ob die Material-UI-Komponente in Frage sein ref weiterleitet, können Sie die Dokumentation API überprüfen unter „Props“ zB die the [/api/button/#props](Button API) enthält
+If you're not sure if the Material-UI component in question forwards its ref you can check the API documentation under "Props" e.g. the [Button API](/api/button/#props) includes
> Der ref wird an das Wurzelelement weitergeleitet.
@@ -138,7 +138,7 @@ was anzeigt, dass Sie mit einem ref auf das DOM-Element zugreifen können.
Wenn in der Konsole eine Warnmeldung wie die folgende angezeigt wird, haben Sie wahrscheinlich mehrere Instanzen von `@material-ui/styles` auf der Seite initialisiert.
-> It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names and makes your application bigger without a good reason.
+> It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
### Mögliche Gründe
diff --git a/docs/src/pages/getting-started/faq/faq-es.md b/docs/src/pages/getting-started/faq/faq-es.md
index 980c9e5690b8a4..ab6d16dbb2a6b8 100644
--- a/docs/src/pages/getting-started/faq/faq-es.md
+++ b/docs/src/pages/getting-started/faq/faq-es.md
@@ -128,7 +128,7 @@ const ref = React.createRef();
const element = ref.current;
```
-If you're not sure if the Material-UI component in question forwards its ref you can check the API documentation under "Props" e.g. the [/api/button/#props](Button API) includes
+If you're not sure if the Material-UI component in question forwards its ref you can check the API documentation under "Props" e.g. the [Button API](/api/button/#props) includes
> The ref is forwarded to the root element.
@@ -138,7 +138,7 @@ indicating that you can access the DOM element with a ref.
If you are seeing a warning message in the console like the one below, you probably have several instances of `@material-ui/styles` initialized on the page.
-> It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names and makes your application bigger without a good reason.
+> It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
### Possible reasons
diff --git a/docs/src/pages/getting-started/faq/faq-fr.md b/docs/src/pages/getting-started/faq/faq-fr.md
index ea7fb9e29a7a40..5c6b9dd91f82ac 100644
--- a/docs/src/pages/getting-started/faq/faq-fr.md
+++ b/docs/src/pages/getting-started/faq/faq-fr.md
@@ -128,7 +128,7 @@ const ref = React.createRef();
const element = ref.current;
```
-If you're not sure if the Material-UI component in question forwards its ref you can check the API documentation under "Props" e.g. the [/api/button/#props](Button API) includes
+If you're not sure if the Material-UI component in question forwards its ref you can check the API documentation under "Props" e.g. the [Button API](/api/button/#props) includes
> The ref is forwarded to the root element.
@@ -138,7 +138,7 @@ indicating that you can access the DOM element with a ref.
If you are seeing a warning message in the console like the one below, you probably have several instances of `@material-ui/styles` initialized on the page.
-> It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names and makes your application bigger without a good reason.
+> It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
### Possible reasons
diff --git a/docs/src/pages/getting-started/faq/faq-ja.md b/docs/src/pages/getting-started/faq/faq-ja.md
index 9446ffcfba4763..13df99dd10f5b4 100644
--- a/docs/src/pages/getting-started/faq/faq-ja.md
+++ b/docs/src/pages/getting-started/faq/faq-ja.md
@@ -2,7 +2,7 @@
特定の問題で立ち往生していますか？ よくある質問でこれらのよくある問題のいくつかを最初に確認してください。
-If you still can't find what you're looking for, you can ask the community in [Spectrum](https://spectrum.chat/material-ui). 使い方の質問やその他重要ではない問題は、Github issuesではなく[StackOverflow](https://stackoverflow.com/questions/tagged/material-ui)を使ってください。 `material-ui`というStackOverflowタグがあります。 質問にはそのタグをつけてください。
+もし探しているものがまだ見つからない場合、 [Spectrum](https://spectrum.chat/material-ui)にある我々のコミュニティに質問ができます 使い方の質問やその他重要ではない問題は、Github issuesではなく[StackOverflow](https://stackoverflow.com/questions/tagged/material-ui)を使ってください。 `material-ui`というStackOverflowタグがあります。 質問にはそのタグをつけてください。
## productionビルドでコンポーネントが正しくレンダリングされないのはなぜですか？
@@ -14,7 +14,7 @@ If you still can't find what you're looking for, you can ask the community in [S
- 誤ってMaterial-UIの2つのバージョンを**bundle**してしまっている場合、 依存関係がMaterial-UIを対の依存関係として正しく設定されていない可能性があります
- Reactツリーの**サブセット**に`StylesProvider`を使用している場合
-- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
+- バンドラーを使用していて、それが原因で複数のクラス名ジェネレータインスタンスが作成されるようにコードを分割している場合。
> 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).
@@ -113,7 +113,7 @@ It's recommended:
## react-routerの使い方は？
-私達は[サードパーティ製ルーティングライブラリ](/components/buttons/#third-party-routing-library)で`ButtonBase`コンポーネントの使い方をドキュメント化しました。 A lot of our interactive components use it internally: `Link`, `Button`, `MenuItem`, `Material-UI tries to make composition as easy as possible.
@@ -6,7 +6,7 @@
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.
-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.
+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.
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.
diff --git a/docs/src/pages/guides/composition/composition-ru.md b/docs/src/pages/guides/composition/composition-ru.md
index 4d8a8fcaab1a1b..9f09250ea5f886 100644
--- a/docs/src/pages/guides/composition/composition-ru.md
+++ b/docs/src/pages/guides/composition/composition-ru.md
@@ -6,7 +6,7 @@
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.
-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.
+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.
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.
diff --git a/docs/src/pages/guides/composition/composition-zh.md b/docs/src/pages/guides/composition/composition-zh.md
index 5e18b731e23dcd..beac1418700660 100644
--- a/docs/src/pages/guides/composition/composition-zh.md
+++ b/docs/src/pages/guides/composition/composition-zh.md
@@ -1,16 +1,16 @@
-# 组合
+# Composition（组合）
-Material-UI尝试使组合尽可能简单。
+Material-UI 试着让组合尽可能的简单。
## 封装组件
-为了提供最大的灵活性和性能， 我们需要一种方法来知道组件接收子元素的本质。 为了解决这个问题，我们在需要 时使用 `muiName` 静态属性标记我们的一些组件。
+我们需要一种了解组件接收的子元素的本质的方式，这样可以尽可能提供最大的灵活性和最好的性能。 在需要的时候我们会用 `muiName` 静态属性来标记一些我们的组件，这样能够解决这个问题。
-但是，您仍可能需要包装一个组件以增强它的功能，即使这可能与` muiName `解决方案冲突。 如果你封装一个组件，并验证是否该组件具有这种静态属性集。
+但是，您仍可能需要封装一个组件以增强它的功能，而这可能与 `muiName` 的解决方案相冲突。 If you wrap a component, verify if that component has this static property set.
-如果遇到此问题，则需要为封装组件与被封装组件使用相同的标记。 另外，由于父组件可能需要控制被封装子组件的属性，你应该将子组件的这些属性向父组件传递。
+如果您遇到此问题，那么请为封装组件附加上与被封装组件一样的标记。 另外，鉴于父组件可能需要对被封装的组件属性加以控制，您应该向父组件传递这些属性。
-我们来看一个例子：
+让我们来看一个例子：
```jsx
const WrappedIcon = props => `元素。 但只要把一个[React组件](https://reactjs.org/docs/components-and-props.html#function-and-class-components) 传递给 `component` 属性就可以更改这个默认行为。 在下面的例子里， `List` 组件的根元素就会被渲染为一个``元素：
+例如，在默认情况下，`List` 组件会渲染 `` 元素。 通过将一个 [React 组件](https://reactjs.org/docs/components-and-props.html#function-and-class-components)传递给 `component` 属性，就可以改变此默认行为。 下面的例子则将 `List` 组件和一个`` 元素渲染为根节点：
```jsx
@@ -44,9 +44,9 @@ return React.createElement(this.props.component, props)
```
-这种模式非常强大，具有很大的灵活性，并允许其与其他库进行交互，例如[` react-router `](#react-router-demo)或者你最喜欢的表单库。 但它也**带有一个小小的警告!**
+这种模式非常强大，它拥有很强的灵活性，也涵盖了与其他库互操作的方法，例如 [`react-router`](#react-router-demo) 或者你最喜欢的表格库。 但它也**带有一个小小的警告!**
-### 使用内联时要注意
+### 当与内联函数一起使用时要注意
使用内联函数作为 `component` 属性的参数可能会导致 **意外的卸载**，因为每次React呈现时都会将新组件传递给 `component` 属性。 例如，如果要创建自定义` ListItem `作为链接，您可以执行以下操作：
diff --git a/docs/src/pages/guides/flow/flow-ru.md b/docs/src/pages/guides/flow/flow-ru.md
index 72819d52a193f6..2b7408aaac90cb 100644
--- a/docs/src/pages/guides/flow/flow-ru.md
+++ b/docs/src/pages/guides/flow/flow-ru.md
@@ -1,7 +1,7 @@
# Flow
-You can add static typing to JavaScript to improve developer productivity and code quality thanks to Flow.
+Благодаря Flow Вы можете добавить статическую типизацию в JavaScript для улучшения продуктивности разработки и повышения качества кода.
## flow-typed
-[flow-typed](https://github.com/flowtype/flow-typed) is a repository of third-party library interface definitions for use with 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-de.md b/docs/src/pages/guides/interoperability/interoperability-de.md
index fd7c13331709fd..7f6f795274d509 100644
--- a/docs/src/pages/guides/interoperability/interoperability-de.md
+++ b/docs/src/pages/guides/interoperability/interoperability-de.md
@@ -135,7 +135,7 @@ import { StylesProvider } from '@material-ui/styles';
```
-Ein anderer Ansatz ist die Verwendung von `&&` Zeichen in Stilkomponenten, um, durch Wiederholen des Klassennamens, die [Spezifität zu erhöhen ](https://www.styled-components.com/docs/advanced#issues-with-specificity). Sie sollten die Verwendung von `!imporant` vermeiden.
+Ein anderer Ansatz ist die Verwendung von `&&` Zeichen in Stilkomponenten, um, durch Wiederholen des Klassennamens, die [Spezifität zu erhöhen ](https://www.styled-components.com/docs/advanced#issues-with-specificity). You should avoid the usage of `!important`.
### Tiefere Elemente
diff --git a/docs/src/pages/guides/interoperability/interoperability-es.md b/docs/src/pages/guides/interoperability/interoperability-es.md
index 8e88c87c20936b..cda41b76a7e821 100644
--- a/docs/src/pages/guides/interoperability/interoperability-es.md
+++ b/docs/src/pages/guides/interoperability/interoperability-es.md
@@ -135,7 +135,7 @@ import { StylesProvider } from '@material-ui/styles';
```
-Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!imporant`.
+Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!important`.
### Deeper elements
diff --git a/docs/src/pages/guides/interoperability/interoperability-fr.md b/docs/src/pages/guides/interoperability/interoperability-fr.md
index d5cf122cddee76..fea689d2ecadc8 100644
--- a/docs/src/pages/guides/interoperability/interoperability-fr.md
+++ b/docs/src/pages/guides/interoperability/interoperability-fr.md
@@ -135,7 +135,7 @@ import { StylesProvider } from '@material-ui/styles';
```
-Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!imporant`.
+Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!important`.
### Deeper elements
diff --git a/docs/src/pages/guides/interoperability/interoperability-ja.md b/docs/src/pages/guides/interoperability/interoperability-ja.md
index 5500d4a1740454..0f095477586dde 100644
--- a/docs/src/pages/guides/interoperability/interoperability-ja.md
+++ b/docs/src/pages/guides/interoperability/interoperability-ja.md
@@ -135,7 +135,7 @@ import { StylesProvider } from '@material-ui/styles';
```
-Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!imporant`.
+Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!important`.
### Deeper elements
diff --git a/docs/src/pages/guides/interoperability/interoperability-pt.md b/docs/src/pages/guides/interoperability/interoperability-pt.md
index 96cb62b4ea0156..707f2d1e4b24ba 100644
--- a/docs/src/pages/guides/interoperability/interoperability-pt.md
+++ b/docs/src/pages/guides/interoperability/interoperability-pt.md
@@ -135,7 +135,7 @@ import { StylesProvider } from '@material-ui/styles';
```
-Outra abordagem é usar os caracteres `&&` em styled-components para [aumentar a especificidade](https://www.styled-components.com/docs/advanced#issues-with-specificity) repetindo o nome da classe. Você deve evitar o uso de `!imporant`.
+Outra abordagem é usar os caracteres `&&` em styled-components para [aumentar a especificidade](https://www.styled-components.com/docs/advanced#issues-with-specificity) repetindo o nome da classe. Você deve evitar o uso de `!important`.
### Elementos mais profundos
diff --git a/docs/src/pages/guides/interoperability/interoperability-ru.md b/docs/src/pages/guides/interoperability/interoperability-ru.md
index 8b4791e28a2e1e..b86bc114179023 100644
--- a/docs/src/pages/guides/interoperability/interoperability-ru.md
+++ b/docs/src/pages/guides/interoperability/interoperability-ru.md
@@ -135,7 +135,7 @@ import { StylesProvider } from '@material-ui/styles';
```
-Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!imporant`.
+Another approach is to use the `&&` characters in styled-components to [bump up specificity](https://www.styled-components.com/docs/advanced#issues-with-specificity) by repeating the class name. You should avoid the usage of `!important`.
### Deeper elements
diff --git a/docs/src/pages/guides/interoperability/interoperability-zh.md b/docs/src/pages/guides/interoperability/interoperability-zh.md
index 87343ce15fe344..2b545a77325420 100644
--- a/docs/src/pages/guides/interoperability/interoperability-zh.md
+++ b/docs/src/pages/guides/interoperability/interoperability-zh.md
@@ -135,7 +135,7 @@ import { StylesProvider } from '@material-ui/styles';
```
-另外一个在 styled-components 中使用 `&&` 字符的方案则是通过重复类名来[增强特征](https://www.styled-components.com/docs/advanced#issues-with-specificity)。 同时您应该避免使用 `!imporant`。
+另外一个在 styled-components 中使用 `&&` 字符的方案则是通过重复类名来[增强特征](https://www.styled-components.com/docs/advanced#issues-with-specificity)。 You should avoid the usage of `!important`.
### 更深层的元素
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 658605d73c357f..7a9301a11ad8bd 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-de.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-de.md
@@ -31,11 +31,11 @@ You need to update your `package.json` to use the latest version of Material-UI.
Oder führe aus
```sh
-npm install @material-ui/core@next
+npm install @material-ui/core
-oder
+or
-yarn add @material-ui/core@next
+yarn add @material-ui/core
```
### Update React version
@@ -55,11 +55,11 @@ If you were previously using `@material-ui/styles` with v3 you need to update yo
Oder führe aus
```sh
-npm install @material-ui/styles@next
+npm install @material-ui/styles
or
-yarn add @material-ui/styles@next
+yarn add @material-ui/styles
```
## Handling breaking changes
@@ -154,7 +154,7 @@ yarn add @material-ui/styles@next
### TypeScript
-#### `value` type
+#### `value` type
Normalized `value` prop type for input components to use `unknown`. This affects
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
@@ -278,6 +278,15 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Slide] The child needs to be able to hold a ref. The [composition guide](/guides/composition/#caveat-with-refs) explains the migration strategy.
+### Slider
+
+- [Slider] Move from `@material-ui/lab` to `@material-ui/core`.
+
+ ```diff
+ -import Slider from '@material-ui/lab/Slider'
+ +import Slider from '@material-ui/core/Slider'
+ ```
+
### Switch
- [Switch] Refactor the implementation to make it easier to override the styles. Rename the class names to match the specification wording:
@@ -343,8 +352,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
Foo
@@ -387,7 +396,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [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] Entfernen der Standardfarbe aus den Typografievarianten. Die Farbe sollte die meiste Zeit erben. Dies ist das Standardverhalten des Webs.
-- [Typography] Umbennenung von `color="default"` auf `color="initial ` der Logik von #13028 folgend. Die Verwendung von *default* sollte vermieden werden, da es nicht semantisch ist.
+- [Typography] Umbennenung von `color="default"` auf `color="initial ` der Logik von #13028 folgend. The usage of *default* should be avoided, it lacks semantic.
### Node
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 fbc0ffef75c598..e793c66c9a3b32 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-es.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-es.md
@@ -31,11 +31,11 @@ You need to update your `package.json` to use the latest version of Material-UI.
Or run
```sh
-npm install @material-ui/core@next
+npm install @material-ui/core
or
-yarn add @material-ui/core@next
+yarn add @material-ui/core
```
### Update React version
@@ -55,11 +55,11 @@ If you were previously using `@material-ui/styles` with v3 you need to update yo
Or run
```sh
-npm install @material-ui/styles@next
+npm install @material-ui/styles
or
-yarn add @material-ui/styles@next
+yarn add @material-ui/styles
```
## Handling breaking changes
@@ -154,7 +154,7 @@ yarn add @material-ui/styles@next
### TypeScript
-#### `value` type
+#### `value` type
Normalized `value` prop type for input components to use `unknown`. This affects
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
@@ -278,6 +278,15 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Slide] The child needs to be able to hold a ref. The [composition guide](/guides/composition/#caveat-with-refs) explains the migration strategy.
+### Slider
+
+- [Slider] Move from `@material-ui/lab` to `@material-ui/core`.
+
+ ```diff
+ -import Slider from '@material-ui/lab/Slider'
+ +import Slider from '@material-ui/core/Slider'
+ ```
+
### Switch
- [Switch] Refactor the implementation to make it easier to override the styles. Rename the class names to match the specification wording:
@@ -343,8 +352,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
Foo
@@ -387,7 +396,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [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] 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 #13028. The usage of *default* should be avoided, it lakes semantic.
+- [Typography] Rename `color="default"` to `color="initial"` following the logic of #13028. The usage of *default* should be avoided, it lacks semantic.
### Node
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 85f601900cf90c..57de969f13e07d 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-fr.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-fr.md
@@ -31,11 +31,11 @@ You need to update your `package.json` to use the latest version of Material-UI.
Or run
```sh
-npm install @material-ui/core@next
+npm install @material-ui/core
or
-yarn add @material-ui/core@next
+yarn add @material-ui/core
```
### Update React version
@@ -55,11 +55,11 @@ If you were previously using `@material-ui/styles` with v3 you need to update yo
Or run
```sh
-npm install @material-ui/styles@next
+npm install @material-ui/styles
or
-yarn add @material-ui/styles@next
+yarn add @material-ui/styles
```
## Handling breaking changes
@@ -154,7 +154,7 @@ yarn add @material-ui/styles@next
### TypeScript
-#### `value` type
+#### `value` type
Normalized `value` prop type for input components to use `unknown`. This affects
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
@@ -278,6 +278,15 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Slide] The child needs to be able to hold a ref. The [composition guide](/guides/composition/#caveat-with-refs) explains the migration strategy.
+### Slider
+
+- [Slider] Move from `@material-ui/lab` to `@material-ui/core`.
+
+ ```diff
+ -import Slider from '@material-ui/lab/Slider'
+ +import Slider from '@material-ui/core/Slider'
+ ```
+
### Interrupteur (switch)
- [Switch] Refactor the implementation to make it easier to override the styles. Rename the class names to match the specification wording:
@@ -343,8 +352,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
Foo
@@ -387,7 +396,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [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] 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 #13028. The usage of *default* should be avoided, it lakes semantic.
+- [Typography] Rename `color="default"` to `color="initial"` following the logic of #13028. The usage of *default* should be avoided, it lacks semantic.
### Node
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 19f1730c80b6f6..0df76dda5f32b9 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-ja.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-ja.md
@@ -31,11 +31,11 @@ You need to update your `package.json` to use the latest version of Material-UI.
Or run
```sh
-npm install @material-ui/core@next
+npm install @material-ui/core
or
-yarn add @material-ui/core@next
+yarn add @material-ui/core
```
### Update React version
@@ -55,11 +55,11 @@ If you were previously using `@material-ui/styles` with v3 you need to update yo
Or run
```sh
-npm install @material-ui/styles@next
+npm install @material-ui/styles
or
-yarn add @material-ui/styles@next
+yarn add @material-ui/styles
```
## Handling breaking changes
@@ -154,7 +154,7 @@ yarn add @material-ui/styles@next
### TypeScript
-#### `value` type
+#### `value` type
Normalized `value` prop type for input components to use `unknown`. This affects
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
@@ -278,6 +278,15 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Slide] The child needs to be able to hold a ref. The [composition guide](/guides/composition/#caveat-with-refs) explains the migration strategy.
+### Slider
+
+- [Slider] Move from `@material-ui/lab` to `@material-ui/core`.
+
+ ```diff
+ -import Slider from '@material-ui/lab/Slider'
+ +import Slider from '@material-ui/core/Slider'
+ ```
+
### Switch
- [Switch] Refactor the implementation to make it easier to override the styles. Rename the class names to match the specification wording:
@@ -343,8 +352,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
Foo
@@ -387,7 +396,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [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] 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 #13028. The usage of *default* should be avoided, it lakes semantic.
+- [Typography] Rename `color="default"` to `color="initial"` following the logic of #13028. The usage of *default* should be avoided, it lacks semantic.
### Node
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 f10ad935cccbdd..500601631c75ac 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-pt.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-pt.md
@@ -1,4 +1,4 @@
-# Migration from v3 to v4
+# Migrando da v3 para v4
Sim, v4 foi lançada!
@@ -14,7 +14,7 @@ Esta é uma referência para atualizar seu site de Material-UI v3 para v4. Embor
Esta página de documentação cobre o *como* migrar da v3 para a v4. O *por que* é abordado na [postagem no blog do Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701).
-## Updating your dependencies
+## Atualizando suas dependências
A primeira coisa que você precisa fazer é atualizar suas dependências.
@@ -31,11 +31,11 @@ Você precisa atualizar seu `package.json` para usar a versão mais recente do M
Ou execute
```sh
-npm install @material-ui/core@next
+npm install @material-ui/core
ou
-yarn add @material-ui/core@next
+yarn add @material-ui/core
```
### Atualize a versão do React
@@ -55,11 +55,11 @@ Se você estava usando anteriormente `@material-ui/styles` com a versão 3, prec
Ou execute
```sh
-npm install @material-ui/styles@next
+npm install @material-ui/styles
ou
-yarn add @material-ui/styles@next
+yarn add @material-ui/styles
```
## Tratamento de alterações recentes
@@ -77,8 +77,8 @@ yarn add @material-ui/styles@next
-const DeepChild = withTheme()(DeepChildRaw);
+const DeepChild = withTheme(DeepChildRaw);
```
-- Scope the [keyframes API](https://cssinjs.org/jss-syntax/#keyframes-animation). Você deve aplicar as seguintes alterações na sua base de código.
- It helps isolating the animation logic:
+- Escopo da [keyframes API](https://cssinjs.org/jss-syntax/#keyframes-animation). Você deve aplicar as seguintes alterações na sua base de código.
+ Ele ajuda a isolar a lógica da animação:
```diff
rippleVisible: {
@@ -96,9 +96,9 @@ yarn add @material-ui/styles@next
},
```
-### Theme
+### Tema
-- The `theme.palette.augmentColor()` method no longer performs a side effect on its input color.
+- O método` theme.palette.augmentColor () `não produz mais um efeito colateral em sua cor de entrada.
Para usá-lo corretamente, agora você precisa usar o valor retornado.
```diff
@@ -109,7 +109,7 @@ yarn add @material-ui/styles@next
console.log({ background });
```
-- You can safely remove the next variant from the theme creation:
+- Você pode remover com segurança a próxima variante da criação de temas:
```diff
typography: {
@@ -117,7 +117,7 @@ yarn add @material-ui/styles@next
},
```
-- `theme.spacing.unit` usage is deprecated, you can use the new API:
+-` theme.spacing.unit` está com o uso obsoleto, você pode usar a nova API:
```diff
label: {
@@ -128,24 +128,24 @@ yarn add @material-ui/styles@next
}
```
- *Tip: you can provide more than 1 argument: `theme.spacing(1, 2) // = '8px 16px'`*.
+ * Dica: você pode fornecer mais de 1 argumento:` theme.spacing (1, 2) // = '8px 16px'` *.
- You can use [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api) on your project to make this smoother.
+ Você pode usar o [auxiliar de migração] (https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api) em seu projeto para tornar isso mais suave.
-### Layout
+### Leiaute
-- [Grid] In order to support arbitrary spacing values and to remove the need to mentally count by 8, we are changing the spacing API:
+- [Grid] Para suportar valores de espaçamento arbitrários e para remover a necessidade de contar mentalmente por 8, estamos mudando a API de espaçamento:
```diff
/**
- * Defines the space between the type `item` component.
+ * Define o espaço entre o tipo` componente do item.
* Só pode ser usado em um componente do tipo 'container'.
*/
- spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]),
+ spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
```
- Going forward, you can use the theme to implement [a custom Grid spacing transformation function](https://material-ui.com/system/spacing/#transformation).
-- [Container] Moved from `@material-ui/lab` to `@material-ui/core`.
+ Indo adiante, você pode usar o tema para implementar [uma função de transformação de espaçamento de grade customizada] (https://material-ui.com/system/spacing/#transformation).
+- [Container] Movido de `@material-ui/lab` to `@material-ui/core`.
```diff
-import Container from '@material-ui/lab/Container';
@@ -154,9 +154,9 @@ yarn add @material-ui/styles@next
### TypeScript
-#### `value` type
+#### `value` type
-Normalized `value` prop type for input components to use `unknown`. This affects
+Tipo da propriedade `value` normalizado para os componentes de entrada utilizarem `unknown`. Isso afeta
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
```diff
@@ -170,7 +170,7 @@ function MySelect({ children }) {
}
```
-This change is explained in more detail in our [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
+Esta alteração é explicada em mais detalhes no nosso guia [TypeScript](/guides/typescript/#handling-value-and-event-handlers)
### Botão
@@ -239,7 +239,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [List] Refaça a lista de componentes para coincidir com a especificação:
- - The `ListItemAvatar` component is required when using an avatar.
+ - O componente `ListItemAvatar` é necessário ao usar um avatar.
- O componente `ListItemIcon` é necessário ao usar uma caixa de seleção à esquerda.
- A propriedade `edge` deve ser definida para botões de ícone.
@@ -255,7 +255,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
Isso também se aplica aos componentes `Dialog` e `Popover`.
-- [Modal] Remove the classes customization API for the Modal component (-74% bundle size reduction when used standalone).
+- [Modal] Remova a API de customização de classes para o componente Modal (redução do tamanho do pacote -74% quando usado de forma independente).
- [Modal] event.defaultPrevented é agora ignorado. A nova lógica fecha o Modal mesmo se `event.preventDefault()` é chamado no evento down da tecla escape (Esc). `event.preventDefault()` destina-se a impedir comportamentos padrão, como clicar em uma caixa de seleção para verificá-lo, apertar um botão para enviar um formulário e pressionar a seta para a esquerda para mover o cursor em uma entrada de texto, etc. Apenas elementos HTML especiais possuem esses comportamentos padrão. Você deve usar `event.stopPropagation()` se você não quer acionar o evento `onClose` no modal.
@@ -278,6 +278,15 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Slide] O elemento filho precisa ser capaz de lidar com ref. O [guia de composição](/guides/composition/#caveat-with-refs) explica a estratégia de migração.
+### Slider
+
+- [Slider] Move from `@material-ui/lab` to `@material-ui/core`.
+
+ ```diff
+ -import Slider from '@material-ui/lab/Slider'
+ +import Slider from '@material-ui/core/Slider'
+ ```
+
### Seletor
- [Switch] Refatore a implementação para torná-la mais fácil de sobrescrever os estilos. Renomeie os nomes das classes para corresponder ao texto da especificação:
@@ -318,7 +327,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
+
Foo
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 d69e52f6873bb5..3037871e625a5d 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-ru.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-ru.md
@@ -31,11 +31,11 @@ You need to update your `package.json` to use the latest version of Material-UI.
Or run
```sh
-npm install @material-ui/core@next
+npm install @material-ui/core
or
-yarn add @material-ui/core@next
+yarn add @material-ui/core
```
### Update React version
@@ -55,11 +55,11 @@ If you were previously using `@material-ui/styles` with v3 you need to update yo
Or run
```sh
-npm install @material-ui/styles@next
+npm install @material-ui/styles
or
-yarn add @material-ui/styles@next
+yarn add @material-ui/styles
```
## Handling breaking changes
@@ -154,7 +154,7 @@ yarn add @material-ui/styles@next
### TypeScript
-#### `value` type
+#### `value` type
Normalized `value` prop type for input components to use `unknown`. This affects
`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
@@ -278,6 +278,15 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Slide] The child needs to be able to hold a ref. The [composition guide](/guides/composition/#caveat-with-refs) explains the migration strategy.
+### Slider
+
+- [Slider] Move from `@material-ui/lab` to `@material-ui/core`.
+
+ ```diff
+ -import Slider from '@material-ui/lab/Slider'
+ +import Slider from '@material-ui/core/Slider'
+ ```
+
### Switch (переключатель)
- [Switch] Refactor the implementation to make it easier to override the styles. Rename the class names to match the specification wording:
@@ -343,8 +352,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
Foo
@@ -387,7 +396,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [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] 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 #13028. The usage of *default* should be avoided, it lakes semantic.
+- [Typography] Rename `color="default"` to `color="initial"` following the logic of #13028. The usage of *default* should be avoided, it lacks semantic.
### Node
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 73538cb74ff0e3..6b26d18fca9f00 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-zh.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-zh.md
@@ -1,4 +1,4 @@
-# Migration from v3 to v4
+# 从v3版本迁移到v4版本
是的，我们已经发布了v4版本！
@@ -14,7 +14,7 @@
此文档介绍了*h如何*从v3版本迁移到v4版本。 关于迁移的*原因*，我们则在 [Medium上发布了一篇博客](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701)来详细解说。
-## Updating your dependencies
+## 更新您的依赖包
您需要做的第一件事，就是更新您的依赖包。
@@ -31,11 +31,11 @@
或者运行
```sh
-npm install @material-ui/core@next
+npm install @material-ui/core
-或者
+or
-yarn add @material-ui/core@next
+yarn add @material-ui/core
```
### 更新 React 的版本
@@ -55,11 +55,11 @@ yarn add @material-ui/core@next
或者运行
```sh
-npm install @material-ui/styles@next
+npm install @material-ui/styles
-或者
+or
-yarn add @material-ui/styles@next
+yarn add @material-ui/styles
```
## 处理变化带来的系统崩溃
@@ -71,14 +71,14 @@ yarn add @material-ui/styles@next
### 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) 相匹配。
+- 请移除 `withTheme()` 中的第一个可选的参数。 第一个参数本是作为未来的可能的选项的一个占位符。 我们从未发现有需要它的情况。 是时候来删除这个参数了。 它与[emotion 的 API](https://emotion.sh/docs/introduction) 以及 [styled-components 的 API ](https://www.styled-components.com) 相匹配。
```diff
-const DeepChild = withTheme()(DeepChildRaw);
+const DeepChild = withTheme(DeepChildRaw);
```
-- Scope the [keyframes API](https://cssinjs.org/jss-syntax/#keyframes-animation). 您应该在您的代码中做出以下改变。
- It helps isolating the animation logic:
+- 约束 [keyframes 的 API](https://cssinjs.org/jss-syntax/#keyframes-animation). 您应该在您的代码中做出以下改变。
+ 这对分离动画的逻辑有所帮助：
```diff
rippleVisible: {
@@ -95,11 +95,7 @@ yarn add @material-ui/styles@next
},
},
```
-
-### Theme
-
-- The `theme.palette.augmentColor()` method no longer performs a side effect on its input color.
- 若想要正确地使用它，您必须使用返回的值。
+ 若想要正确地使用它，您必须使用返回值。
```diff
-const background = { main: color };
@@ -109,7 +105,7 @@ yarn add @material-ui/styles@next
console.log({ background });
```
-- You can safely remove the next variant from the theme creation:
+—您可以从主题创建中安全地移除下一个变体：
```diff
typography: {
@@ -117,35 +113,24 @@ yarn add @material-ui/styles@next
},
```
-- `theme.spacing.unit` usage is deprecated, you can use the new API:
-
- ```diff
- label: {
- [theme.breakpoints.up('sm')]: {
- - paddingTop: theme.spacing.unit * 12,
- + paddingTop: theme.spacing(12),
- },
- }
- ```
+—我们已经不再使用`theme.spacing.unit`，请参照新的 API：
- *Tip: you can provide more than 1 argument: `theme.spacing(1, 2) // = '8px 16px'`*.
+ 您可以在项目中使用 [迁移小帮手](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api)来让您的迁移流程更加顺畅。
- You can use [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod/README.md#theme-spacing-api) on your project to make this smoother.
+### 布局
-### Layout
-
-- [Grid] In order to support arbitrary spacing values and to remove the need to mentally count by 8, we are changing the spacing API:
+- [Grid] 本着支持任意间距值并且摈弃心理上一直需要在8的基础上计数的目的，我们改变了 spacing 的 API:
```diff
/**
- * Defines the space between the type `item` component.
+ * 在类别为`item` 组件之间定义间距。
* 它只能用于类型为 `container` 的组件。
*/
- spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]),
+ spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
```
- Going forward, you can use the theme to implement [a custom Grid spacing transformation function](https://material-ui.com/system/spacing/#transformation).
-- [Container] Moved from `@material-ui/lab` to `@material-ui/core`.
+ 从今往后，您可以使用主题来实现 [一个自定义的网格间距变换函数](https://material-ui.com/system/spacing/#transformation)。
+- [Container] 从 `@material-ui/lab` 迁移到 `@material-ui/core`。
```diff
-import Container from '@material-ui/lab/Container';
@@ -154,23 +139,23 @@ yarn add @material-ui/styles@next
### TypeScript
-#### `value` type
+#### `value` type
-Normalized `value` prop type for input components to use `unknown`. This affects
-`InputBase`, `NativeSelect`, `OutlinedInput`, `Radio`, `RadioGroup`, `Select`, `SelectInput`, `Switch`, `TextArea`, and `TextField`.
+Normalized `value` prop type for input components to use `unknown`. 这会影响
+`InputBase`，`NativeSelect`，`OutlinedInput`，`Radio`，`RadioGroup`，`Select`，`SelectInput`，`TextArea` 和 `TextField`。
```diff
function MySelect({ children }) {
- function handleChange(event: any, value: string) {
+ function handleChange(event: any, value: unknown) {
- // handle value
+ //处理值
}
return {children}
}
```
-This change is explained in more detail in our [TypeScript guide](/guides/typescript/#handling-value-and-event-handlers)
+我们在 [TypeScript 指南中](/guides/typescript/#handling-value-and-event-handlers)更详细地解释了此变更。
### Buttons（按钮）
@@ -210,18 +195,18 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [CardActions] 移除 CSS类中的 `disableActionSpacing`。
- [CardActions] 将CSS类 `action` 重命名为 `spacing`。
-### ClickAwayListener
+### ClickAwayListener（他处点击监听器）
- [ClickAwayListener] 隐藏 react-event-listener 的属性。
-### Dialog
+### Dialog（对话框）
- [DialogActions] 将 `disableActionSpacing` 属性重命名为 `disableSpacing`。
- [DialogActions] 将CSS类 `action` 重命名为 `spacing`。
- [DialogContentText] 不使用文字铸排变体 `subtitle1`，而使用 `body1`。
- [Dialog] 子组件能够接受一个 ref。 [组合指南](/guides/composition/#caveat-with-refs)解释了迁移的策略。
-### Divider
+### Dividers（分隔线）
- [Divider] 移除了弃用的 ` inset ` 属性：
@@ -239,27 +224,27 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [List] 为了符合规范，我们重新在列表组件上做了调整 ：
- - The `ListItemAvatar` component is required when using an avatar.
+ - 当使用头像时，您必须要使用 `ListItemAvatar` 组件。
- 当使用左边的复选框时，您必须使用 `ListItemIcon` 组件。
- 您必须要在图标按钮上设置 `edge` 属性。
- [ListItem] 加强 `disabled` 和 `focusVisible` 样式规则的 CSS 特性。
-### Menu
+### Menu（菜单）
- [MenuItem] 删除 MenuItem 的固定高度。 浏览器将会自行根据间距和行高来计算高度。
-### Modal
+### Modal（模态框）
- [Modal] 子组件能够接受一个 ref。 [组合指南](/guides/composition/#caveat-with-refs)解释了迁移的策略。
这也适用于 `Dialog` 和 `Popover` 。
-- [Modal] Remove the classes customization API for the Modal component (-74% bundle size reduction when used standalone).
+- [Modal] 删除Modal组件类的自定义API (独立使用时将减少-74％的打包大小)。
- [Modal] 现在忽略了 event.defaultPrevented。 即使当向下离开事件调用了 `event.preventDefault()`，新的逻辑也会关闭模态框。 `event.preventDefault()` 旨在禁用一些默认的行为，如单击一个复选框来选中它；点击按钮来提交表单；以及点击左键来移除文本输入框的光标等等。 只有一些特殊的HTML元素才具有这些默认的行为。 若您不想触发模态框的 `onClose` 事件，您需要使用 `event.stopPropagation()`。
-### Paper
+### Paper（纸张）
- [Paper] 减小默认的 elevation（阴影高度）。 为了适配卡片组件和扩展面板组件，请更改默认纸张的阴影高度：
@@ -274,10 +259,19 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Portal] 当使用 `disablePortal`属性的时候，子元素需要能够接受一个 ref。 [组合指南](/guides/composition/#caveat-with-refs)解释了迁移的策略。
-### Slide（滑动）
+### Slide（滑块）
- [Slide] 子组件能够接受一个 ref。 [组合指南](/guides/composition/#caveat-with-refs)解释了迁移的策略。
+### Slider
+
+- [Slider] Move from `@material-ui/lab` to `@material-ui/core`.
+
+ ```diff
+ -import Slider from '@material-ui/lab/Slider'
+ +import Slider from '@material-ui/core/Slider'
+ ```
+
### Switch （开关）
- [Switch] 重新编写实施的代码能够更容易覆盖样式表。 请重命名类的名字以匹配规范的用词：
@@ -343,8 +337,8 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
```diff
Foo
@@ -387,7 +381,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Typography] 将默认的字体从 `body2` 换成 `body1`。 默认为16px的字体大小比默认为14px好。 Bootstrap，material.io，甚至我们的文档都将16px作为默认字体大小。 像 Ant Design 一样使用14px是可以理解的，因为中国的用户使用了不同的字母表。 我们建议使用12px作为日语的默认字体大小。
- [Typography] 移除了铸排变体的默认颜色。 大多数情况下，字体颜色应该是继承而来的。 这是网站的默认行为。
-- [Typography] 遵循 #13028的逻辑，将 `color="default"` 重命名为 `color="initial"`。 不应该再使用*default*，它缺少明确的语义。
+- [Typography] 遵循 #13028的逻辑，将 `color="default"` 重命名为 `color="initial"`。 The usage of *default* should be avoided, it lacks semantic.
### Node
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 a8950b73342e48..a77ed34a7e322e 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
@@ -1,22 +1,22 @@
-# Packetgröße minimieren
+# Paketgröße minimieren
Erfahren Sie mehr über die Tools, mit denen Sie die Paketgröße reduzieren können.
-## Packetgröße zählt
+## Paketgröße zählt
-Die Paketgröße der Material-UI wird sehr ernst genommen. Bei jedem Commit werden für jedes Paket und für kritische Teile dieser Pakete Größen-Snapshots erstellt ([siehe letzten 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. Bei jedem Commit werden für jedes Paket und für kritische Teile dieser Pakete Größen-Snapshots erstellt ([siehe letzten 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 Packetgröße reduzieren?
+## Wie kann ich die Paketgröße reduzieren?
-Der Einfachheit halber stellt Material-UI seine vollständige API auf der oberste Ebene des `material-ui` Imports zur Verfügung. Wenn Sie ES 6-Module und einen Bundler verwenden, der Tree-Shaking unterstützt ([`webpack` >= 2.x ](https://webpack.js.org/guides/tree-shaking/), [ ` parcel` mit einer Flagge](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)), können Sie sicher benannte Importe verwenden und nur einen minimalen Satz von Material-UI-Komponenten in Ihrem Bundles erwarten:
+Der Einfachheit halber stellt Material-UI seine vollständige API auf der oberste Ebene des `material-ui` Imports zur Verfügung. Wenn Sie ES6 Module und einen Bundler verwenden, der Tree-Shaking unterstützt ([`webpack` >= 2.x ](https://webpack.js.org/guides/tree-shaking/), [ ` parcel` mit zusätzlicher Konfiguration](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)), können Sie sicher benannte Importe verwenden und nur einen minimalen Satz von Material-UI-Komponenten in Ihrem Bundles erwarten:
```js
import { Button, TextField } from '@material-ui/core';
```
-Beachten Sie, dass das Tree-Shacking eine Optimierung darstellt, die normalerweise nur für die Produktion von Bundles angewendet wird. Entwicklung-Bundles wird die gesamte Bibliothek enthalten, was zu langsamen Startzeiten führen kann. Dies macht sich insbesondere dann bemerkbar, wenn Sie aus `@material-ui/icons` importieren. Die Startzeiten können ungefähr 6-mal langsamer sein als ohne benannte Importe von der API der obersten Ebene.
+Beachten Sie, dass das Tree-Shacking eine Optimierung darstellt, die normalerweise nicht in der Entwicklungsumgebung angewendet wird. Bundles in der Entwicklungsumgebung werden die gesamte Bibliothek enthalten, was zu langsamen Startzeiten führen kann. Dies macht sich insbesondere dann bemerkbar, wenn Sie aus `@material-ui/icons` importieren. Die Startzeiten können ungefähr 6-mal langsamer sein als ohne benannte Importe von der API der obersten Ebene.
-Wenn dies ein Problem für Sie ist, haben Sie verschiedene Möglichkeiten:
+If this is an issue for you, you have various options:
### Option 1
@@ -35,7 +35,7 @@ import TextField from '@material-ui/core/TextField';
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.
-Beachten Sie, dass wir nur Importe der ersten und zweiten Ebene unterstützen. Alles drunter wird als privat betrachtet und kann zu einer Duplizierung des Moduls in Ihrem Bundle führen.
+Be aware that we only support first and second level imports. Alles drunter wird als privat betrachtet und kann zu einer Duplizierung des Moduls in Ihrem Bundle führen.
```js
// OK
@@ -89,6 +89,6 @@ Wählen Sie eines der folgenden Plugins:
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@next/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.
+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.
⚠️ 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
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 748e51903f96b6..2fbfb9497ec2de 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
@@ -16,7 +16,7 @@ import { Button, TextField } from '@material-ui/core';
Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
-If this is an issue for you you have various options:
+If this is an issue for you, you have various options:
### Option 1
@@ -35,7 +35,7 @@ import TextField from '@material-ui/core/TextField';
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.
-Be aware that we only support first and second leve imports. Anything below is considered private and can cause module duplication in your bundle.
+Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
// OK
@@ -89,6 +89,6 @@ Pick one of the following plugins:
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@next/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).
+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).
⚠️ 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
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 0cf5643a54dc39..e1843341f1ed82 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
@@ -16,7 +16,7 @@ import { Button, TextField } from '@material-ui/core';
Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
-If this is an issue for you you have various options:
+If this is an issue for you, you have various options:
### Option 1
@@ -35,7 +35,7 @@ import TextField from '@material-ui/core/TextField';
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.
-Be aware that we only support first and second leve imports. Anything below is considered private and can cause module duplication in your bundle.
+Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
// OK
@@ -89,6 +89,6 @@ Pick one of the following plugins:
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@next/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).
+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).
⚠️ 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
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 ff7af2b4c64ce8..5eebc1410c8524 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
@@ -1,4 +1,4 @@
-# Minimizing Bundle Size
+# バンドルサイズの最小化
Learn more about the tools you can leverage to reduce the bundle size.
@@ -16,7 +16,7 @@ import { Button, TextField } from '@material-ui/core';
Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
-If this is an issue for you you have various options:
+If this is an issue for you, you have various options:
### Option 1
@@ -35,7 +35,7 @@ import TextField from '@material-ui/core/TextField';
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.
-Be aware that we only support first and second leve imports. Anything below is considered private and can cause module duplication in your bundle.
+Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
// OK
@@ -89,6 +89,6 @@ Pick one of the following plugins:
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@next/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).
+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).
⚠️ 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
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 e85837b4203198..d4442da9f100bd 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
@@ -35,7 +35,7 @@ import TextField from '@material-ui/core/TextField';
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.
-Esteja ciente de que apenas damos suporte para as importações de primeiro e segundo níveis. Qualquer coisa abaixo do segundo nível, é considerada privada e pode causar duplicação de módulo no seu pacote.
+Esteja ciente de que apenas damos suporte para as importações de primeiro e segundo nível. Qualquer coisa abaixo do segundo nível, é considerada privada e pode causar duplicação de módulo no seu pacote.
```js
// OK
@@ -89,6 +89,6 @@ Escolha um dos seguintes plugins:
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@next/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).
+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).
⚠️ 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
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 211bf2529c9ebc..5e1bda3c62441c 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
@@ -16,7 +16,7 @@ import { Button, TextField } from '@material-ui/core';
Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
-If this is an issue for you you have various options:
+If this is an issue for you, you have various options:
### Option 1
@@ -35,7 +35,7 @@ import TextField from '@material-ui/core/TextField';
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.
-Be aware that we only support first and second leve imports. Anything below is considered private and can cause module duplication in your bundle.
+Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
// OK
@@ -89,6 +89,6 @@ Pick one of the following plugins:
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@next/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).
+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).
⚠️ 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
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 52a0edbb3f3ae0..2782c72294d8b4 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
@@ -16,7 +16,7 @@ import { Button, TextField } from '@material-ui/core';
请注意 tree-shaking 通常只运用于生产环境的打包优化。 开发环境的打包则涵盖了完整的库，因此加载时间会比较慢。 在当您导入 `@material-ui/icons` 的时候，这个情况特别显著。 加载时间会大约比那些从顶层 API 的命名导入方式慢六倍。
-如果您觉得这样不妥，您还有以下几个选择：
+If this is an issue for you, you have various options:
### 选项1
@@ -35,7 +35,7 @@ import TextField from '@material-ui/core/TextField';
尽管这样直接导入并不会使用 [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js) 中的导出模式，但是对于那些公开的模块来说，此文件仍可以作为一个方便的参考。
-请注意，我们只支持第一级和第二级的导入。 以下的这些例子是私有的，它们会给你的打包文件带来重复的模块。
+Be aware that we only support first and second level imports. 以下的这些例子是私有的，它们会给你的打包文件带来重复的模块。
```js
// 可以
@@ -89,6 +89,6 @@ import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
考虑到一些[支持的平台](/getting-started/supported-platforms/)，在 npm 上发布的包是和 [Babel](https://github.com/babel/babel) 一起被**编译**的。
-我们同时也发布了这些组件的第二种版本。 您可以在 [`/es` 文件夹](https://unpkg.com/@material-ui/core@next/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)。
+我们同时也发布了这些组件的第二种版本。 您可以在< [`/es` folder](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)。
⚠️为了使得用户打包文件中的重复代码最小化，我们**强烈阻止**库的作者使用`/es` 文件夹。
\ 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 6c8db3eb4123e5..220ac1a9a61d29 100644
--- a/docs/src/pages/guides/responsive-ui/responsive-ui-ja.md
+++ b/docs/src/pages/guides/responsive-ui/responsive-ui-ja.md
@@ -5,7 +5,7 @@
[Responsive layouts](https://material.io/design/layout/responsive-layout-grid.html) in Material Design adapt to any possible screen size. We provide the following helpers to make the UI responsive:
- [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. It's the most basic layout element.
+- [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.
- [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/server-rendering/server-rendering-zh.md b/docs/src/pages/guides/server-rendering/server-rendering-zh.md
index 285d6f5951c73a..401e4a7ee36fda 100644
--- a/docs/src/pages/guides/server-rendering/server-rendering-zh.md
+++ b/docs/src/pages/guides/server-rendering/server-rendering-zh.md
@@ -50,7 +50,7 @@ const theme = createMuiTheme({
### 服务器端
-下面的大纲可以大致展现一下我们的服务器端。 我们将使用 [app.use](https://expressjs.com/en/api.html) 来设置一个 [Express middleware](https://expressjs.com/en/guide/using-middleware.html) 从而处理来自我们服务器端的所有请求。 如果您对 Express 或者 middleware 不太熟悉，您只需要知道每次服务器收到了一个请求，都会调用我们的 handleRender 函数。
+下面的大纲可以大致展现一下我们的服务器端。 我们将使用 [app.use](https://expressjs.com/en/api.html) 来设置一个 [Express 的中间件](https://expressjs.com/en/guide/using-middleware.html)，从而处理来自我们服务器端的所有请求。 如果您对 Express 或者 middleware 不太熟悉，您只需要知道每次服务器收到了一个请求，都会调用我们的 handleRender 函数。
`server.js`
diff --git a/docs/src/pages/guides/testing/testing-de.md b/docs/src/pages/guides/testing/testing-de.md
index 2f01593df56b9f..a18b7477109733 100644
--- a/docs/src/pages/guides/testing/testing-de.md
+++ b/docs/src/pages/guides/testing/testing-de.md
@@ -12,13 +12,7 @@ Obwohl wir eine 100%ige Testabdeckung erreicht haben, empfehlen wir unseren Benu
## 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.
-
-### 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.
-
-Die `createShallow()` Funktion kann für diese Situation verwendet werden. Neben dem Einwickeln der Enzym-API bietet es eine `dive` und `untilSelector` Möglichkeit.
+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.
### Volles DOM-Rendering
@@ -26,6 +20,12 @@ Das vollständige DOM-Rendering ist ideal für Anwendungsfälle, in denen Kompon
Die `createMount()` Funktion kann für diese Situation verwendet werden. Neben dem Einwickeln der Enzym-API bietet es eine `cleanUp` Möglichkeit.
+### 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.
+
+Die `createShallow()` Funktion kann für diese Situation verwendet werden. Neben dem Einwickeln der Enzym-API bietet es eine `dive` und `untilSelector` Möglichkeit.
+
### 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.
@@ -34,72 +34,81 @@ Die `createRender()` Funktion ist dafür ideal. Dies ist nur ein Alias für die
## API
-### `createShallow([options]) => shallow`
+### `createMount([options]) => mount`
-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.
+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.
#### Argumente
1. `Optionen` (*Object* [optional])
- - `options.shallow` (*Function* [optional]): Die Shallow-Funktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
- - `options.untilSelector` (*String* [optional]): Rendert rekursiv die Kinder flach, so lange, bis sie den bereitgestellten Selektor finden können. Es ist hilfreich, Komponenten höherer Ordnung aufzuschlüsseln.
- - `options.dive` (*Boolean* [optional]): Rendert funktional flach das erste nicht-DOM-Child des aktuellen Wrappers und gibt einen Wrapper zurück.
- - Die anderen Schlüssel werden an das Optionsargument von `enzyme.shallow()` weitergeleitet.
+ - `options.mount` (*Function* [optional]): Die Mount-Funktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
+ - Die anderen Schlüssel werden an das Optionsargument von `enzyme.mount()` weitergeleitet.
#### Rückgabewerte
-`shallow` (*shallow*): Eine shallow-Funktion.
+`mount` (*mount*): Die mount-Funktion.
#### Beispiele
```jsx
-importiere { createShallow } aus '@ material-ui / core / test-utils';
+import { createMount } from '@material-ui/core/test-utils';
+import { MuiThemeProvider } from '@material-ui/core/styles';
-beschreiben ('<0 />', () => {
- sei flach;
+describe('
+ {children}
+
+ );
+ }
+
+ before(() => {
+ mount = createMount();
});
- es ('sollte funktionieren', () => {
- const wrapper = shallow (<0 />);
+ after(() => {
+ mount.cleanUp();
+ });
+
+ it('should work', () => {
+ const wrapper = mount(
+ {children}
+
+ );
+ }
+
+ before(() => {
+ mount = createMount();
+ });
+
+ after(() => {
+ mount.cleanUp();
});
it('should work', () => {
- const wrapper = shallow(
+ {children}
+
+ );
+ }
+
+ before(() => {
+ mount = createMount();
+ });
+
+ after(() => {
+ mount.cleanUp();
});
it('should work', () => {
- const wrapper = shallow(Write tests to prevent regressions and write better code.
@@ -12,13 +12,7 @@ While we have reached the 100% test coverage achievement, we don't encourage our
## Userspace
-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.
-
-### 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.
-
-The `createShallow()` function can be used for this situation. Aside from wrapping the enzyme API, it provides a `dive` and `untilSelector` option.
+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.
### Full DOM rendering
@@ -26,6 +20,12 @@ Full DOM rendering is ideal for use cases where you have components that may int
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.
+
+The `createShallow()` function can be used for this situation. Aside from wrapping the enzyme API, it provides a `dive` and `untilSelector` option.
+
### Render to string
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.
@@ -34,72 +34,81 @@ The `createRender()` function is ideal for this. This is just an alias for the e
## API
-### `createShallow([options]) => shallow`
+### `createMount([options]) => mount`
-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.
+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.
-#### Arguments
+#### 引数
1. `options` (*Object* [optional])
- - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
- - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
- - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
- - The other keys are forwarded to the options argument of `enzyme.shallow()`.
+ - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.mount()`.
-#### Returns
+#### 戻り値
-`shallow` (*shallow*): A shallow function.
+`mount` (*mount*): A mount function.
#### 例
```jsx
-import { createShallow } from '@material-ui/core/test-utils';
+import { createMount } from '@material-ui/core/test-utils';
+import { MuiThemeProvider } from '@material-ui/core/styles';
describe('
+ {children}
+
+ );
+ }
+
+ before(() => {
+ mount = createMount();
+ });
+
+ after(() => {
+ mount.cleanUp();
});
it('should work', () => {
- const wrapper = shallow(
+ {children}
+
+ );
+ }
+
+ before(() => {
+ mount = createMount();
});
- it('deve funcionar', () => {
- const wrapper = shallow(
+ {children}
+
+ );
+ }
+
+ before(() => {
+ mount = createMount();
+ });
+
+ after(() => {
+ mount.cleanUp();
});
it('should work', () => {
- const wrapper = shallow(
+ {children}
+
+ );
+ }
+
+ before(() => {
+ mount = createMount();
+ });
+
+ after(() => {
+ mount.cleanUp();
});
it('should work', () => {
- const wrapper = shallow(借助 TypeScript，你可以为 JavaScript 添加静态类型，从而提高代码质量及开发者的工作效率。
-请查看一下 [Create React App with TypeScript](https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript) 的例子。 此例子要求 TypeScript 版本大于 2.8。
+请查看一下 [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` 或省略某些库可能会带来一些错误。
@@ -253,10 +253,10 @@ const theme = createMyTheme({ appDrawer: { breakpoint: 'md' }});
但是，并不是每个组件都完全支持您传入的任何组件类型。 如果您在 TypeScript 中遇到一个不接受其 `component` 属性的组件，请新建一个 issue。 我们也一直在努力实现组件属性的通用化， 这样能够帮助我们解决这个问题。
-## Handling `value` and event handlers
+## 处理`值`和事件处理器
-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` 属性或者包含当前`值`的事件处理器。 大多数情况下`值`只在 React 内被处理，这样的话它能够是任何类型，譬如 objects 或者 arrays。
-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` 来说。 这意味着留给我们的最合适的选项是将其输入为 `unknown` 并让开发者自行决定如何来缩小该类型。 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 haven 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
+我们的演示包含了使用类型转换的类型变体。 鉴于所有的类型都位于一个文件中，并且都是非常基本的，这样的折衷可以接受。 You have to decide for yourself if the same tradeoff is acceptable for you. 我们则希望，通过选择性加入，我们的库的类型默认为严格的。
\ No newline at end of file
diff --git a/docs/src/pages/styles/advanced/advanced-de.md b/docs/src/pages/styles/advanced/advanced-de.md
index ec0f256fba66e4..0356827379d2ac 100644
--- a/docs/src/pages/styles/advanced/advanced-de.md
+++ b/docs/src/pages/styles/advanced/advanced-de.md
@@ -243,13 +243,13 @@ Das Einfügen von Style-Tags erfolgt in der **gleichen Reihenfolge** wie die `ma
import clsx from 'clsx';
import { makeStyles } from '@material-ui/styles';
-const useStyleBase = makeStyles({
+const useStylesBase = makeStyles({
root: {
color: 'blue', // 🔵
},
});
-const useStyle = makeStyles({
+const useStyles = makeStyles({
root: {
color: 'red', // 🔴
},
@@ -258,7 +258,7 @@ const useStyle = makeStyles({
export default function MyComponent() {
// Order doesn't matter
const classes = useStyles();
- const classesBase = useStyleBase();
+ const classesBase = useStylesBase();
// Order doesn't matter
const className = clsx(classes.root, classesBase.root)
@@ -486,7 +486,7 @@ const StyledTextField = styled(TextField)`
}
.MuiOutlinedInput-root {
fieldset {
- border-color: red; ❤️
+ border-color: red; 🔴
}
&:hover fieldset {
border-color: yellow; 💛
@@ -559,11 +559,11 @@ Wenn Sie Server Side-Rendering (SSR) verwenden, sollten Sie die Nonce im `
```
-Dann müssen Sie dieses Nonce an JSS übergeben, damit es den nachfolgenden `