;
+}
```
diff --git a/docs/src/pages/system/advanced/advanced-de.md b/docs/src/pages/system/advanced/advanced-de.md
index cb0b0ce0b03574..707c49b54544bb 100644
--- a/docs/src/pages/system/advanced/advanced-de.md
+++ b/docs/src/pages/system/advanced/advanced-de.md
@@ -4,12 +4,12 @@
## Adding the `sx` prop to your custom components
-The `unstable_styleFunctionSx` utility adds the support for the `sx` to your own components. Normally you would use the `Box` components from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, this utility will give you the same capabilities, while having a smaller bundle size.
+The `unstable_styleFunctionSx` utility adds the support for the [`sx` prop](/system/basics/#the-sx-prop) to your own components. Normally you would use the `Box` component from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, the `unstable_styleFunctionSx` utility will give you the same capabilities, while having a smaller bundle size.
{{"demo": "pages/system/advanced/StyleFunctionSxDemo.js"}}
## Using standalone system utilities
-If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the `sx` supports, and a different API.
+If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the [`sx` prop](/system/basics/#the-sx-prop) supports, and a different API.
{{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}
diff --git a/docs/src/pages/system/advanced/advanced-es.md b/docs/src/pages/system/advanced/advanced-es.md
index 5f5aaa2a00fb78..0bdd2da5a26911 100644
--- a/docs/src/pages/system/advanced/advanced-es.md
+++ b/docs/src/pages/system/advanced/advanced-es.md
@@ -4,12 +4,12 @@
## Adding the `sx` prop to your custom components
-The `unstable_styleFunctionSx` utility adds the support for the `sx` to your own components. Normally you would use the `Box` components from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, this utility will give you the same capabilities, while having a smaller bundle size.
+The `unstable_styleFunctionSx` utility adds the support for the [`sx` prop](/system/basics/#the-sx-prop) to your own components. Normally you would use the `Box` component from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, the `unstable_styleFunctionSx` utility will give you the same capabilities, while having a smaller bundle size.
{{"demo": "pages/system/advanced/StyleFunctionSxDemo.js"}}
## Using standalone system utilities
-If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the `sx` supports, and a different API.
+If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the [`sx` prop](/system/basics/#the-sx-prop) supports, and a different API.
{{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}
diff --git a/docs/src/pages/system/advanced/advanced-ja.md b/docs/src/pages/system/advanced/advanced-ja.md
index 4bca930cc7762e..c242a0a23e6900 100644
--- a/docs/src/pages/system/advanced/advanced-ja.md
+++ b/docs/src/pages/system/advanced/advanced-ja.md
@@ -4,12 +4,12 @@
## Adding the `sx` prop to your custom components
-The `unstable_styleFunctionSx` utility adds the support for the `sx` to your own components. Normally you would use the `Box` components from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, this utility will give you the same capabilities, while having a smaller bundle size.
+The `unstable_styleFunctionSx` utility adds the support for the [`sx` prop](/system/basics/#the-sx-prop) to your own components. Normally you would use the `Box` component from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, the `unstable_styleFunctionSx` utility will give you the same capabilities, while having a smaller bundle size.
{{"demo": "pages/system/advanced/StyleFunctionSxDemo.js"}}
## Using standalone system utilities
-If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the `sx` supports, and a different API.
+If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the [`sx` prop](/system/basics/#the-sx-prop) supports, and a different API.
{{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}
diff --git a/docs/src/pages/system/advanced/advanced-pt.md b/docs/src/pages/system/advanced/advanced-pt.md
index 36bbe25513a8fd..d035a246e4b0f0 100644
--- a/docs/src/pages/system/advanced/advanced-pt.md
+++ b/docs/src/pages/system/advanced/advanced-pt.md
@@ -4,12 +4,12 @@
## Adicionando a propriedade `sx` para seus componentes customizados
-O utilitário `unstable_styleFunctionSx` adiciona suporte para a propriedade `sx` em seus componentes. Normalmente você usaria os componentes `Box` de `@material-ui/core` como raiz da árvore de componentes. Se você quiser usar o sistema sem depender do Material-UI, este utilitário lhe dará as mesmas capacidades, enquanto tem um tamanho menor de pacote.
+The `unstable_styleFunctionSx` utility adds the support for the [`sx` prop](/system/basics/#the-sx-prop) to your own components. Normally you would use the `Box` component from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, the `unstable_styleFunctionSx` utility will give you the same capabilities, while having a smaller bundle size.
{{"demo": "pages/system/advanced/StyleFunctionSxDemo.js"}}
## Usando utilitários de sistema autônomo
-Se você precisar apenas de alguns elementos do sistema em seus componentes customizados, você pode usar diretamente e combinar as diferentes funções de estilo disponíveis, e acessá-las como propriedades de componente. Você pode usar esta abordagem se você precisar de um tamanho menor de pacote e melhor desempenho do que o uso de Box, pelo preço de usar um suporte de subconjunto `sx` e uma API diferente.
+Se você precisar apenas de alguns elementos do sistema em seus componentes customizados, você pode usar diretamente e combinar as diferentes funções de estilo disponíveis, e acessá-las como propriedades de componente. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the [`sx` prop](/system/basics/#the-sx-prop) supports, and a different API.
{{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}
diff --git a/docs/src/pages/system/advanced/advanced-ru.md b/docs/src/pages/system/advanced/advanced-ru.md
index eb222196beb081..44392de9d67553 100644
--- a/docs/src/pages/system/advanced/advanced-ru.md
+++ b/docs/src/pages/system/advanced/advanced-ru.md
@@ -4,12 +4,12 @@
## Adding the `sx` prop to your custom components
-The `unstable_styleFunctionSx` utility adds the support for the `sx` to your own components. Normally you would use the `Box` components from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, this utility will give you the same capabilities, while having a smaller bundle size.
+The `unstable_styleFunctionSx` utility adds the support for the [`sx` prop](/system/basics/#the-sx-prop) to your own components. Normally you would use the `Box` component from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, the `unstable_styleFunctionSx` utility will give you the same capabilities, while having a smaller bundle size.
{{"demo": "pages/system/advanced/StyleFunctionSxDemo.js"}}
## Using standalone system utilities
-If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the `sx` supports, and a different API.
+If you only need some elements of the system in your custom components, you can directly use and combine the different style functions available, and access them as component props. You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the [`sx` prop](/system/basics/#the-sx-prop) supports, and a different API.
{{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}
diff --git a/docs/src/pages/system/advanced/advanced-zh.md b/docs/src/pages/system/advanced/advanced-zh.md
index d97fb366f0c046..2acc30f97d503b 100644
--- a/docs/src/pages/system/advanced/advanced-zh.md
+++ b/docs/src/pages/system/advanced/advanced-zh.md
@@ -4,12 +4,12 @@
## 将 `sx` 属性添加到你的自定义组件
-`unstable_styleFunctionSx` 工具集为你自定义的组件添加了 `sx` 的支持。 通常你会在组件树的根部使用 `@material-ui/core` 中的 `Box` 组件。 如果你想独立于 Material-UI 使用系统，这个工具集可以为你提供同样的功能，同时该捆绑包的尺寸会更小。
+The `unstable_styleFunctionSx` utility adds the support for the [`sx` prop](/system/basics/#the-sx-prop) to your own components. Normally you would use the `Box` component from `@material-ui/core` at the root of your component tree. If you would like to use the system independently from Material-UI, the `unstable_styleFunctionSx` utility will give you the same capabilities, while having a smaller bundle size.
{{"demo": "pages/system/advanced/StyleFunctionSxDemo.js"}}
## 使用独立的系统工具集
-如果你在自定义组件中只需要系统中的一些元素，你可以直接使用和组合不同的风格功能，并将其作为组件属性访问。 如果你需要比使用 Box 更小的捆绑大小和更好的性能，那么可以使用这种方法，但代价是需要使用 `sx` 支持的子集和不同的 API。
+如果你在自定义组件中只需要系统中的一些元素，你可以直接使用和组合不同的风格功能，并将其作为组件属性访问。 You might use this approach if you need smaller bundle size and better performance than using Box, for the price of using a subset of what the [`sx` prop](/system/basics/#the-sx-prop) supports, and a different API.
{{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}
diff --git a/docs/src/pages/system/basics/basics-de.md b/docs/src/pages/system/basics/basics-de.md
index c69af926e53fa0..5f670aed509015 100644
--- a/docs/src/pages/system/basics/basics-de.md
+++ b/docs/src/pages/system/basics/basics-de.md
@@ -1,6 +1,6 @@
# Material-UI System
-
CSS utilities for rapidly creating custom design.
+
CSS utilities for rapidly laying out custom designs.
Material-UI comes with dozens of **ready-to-use** components in the core. These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system:
@@ -14,14 +14,28 @@ _(Resize the window to see the responsive breakpoints)_
## Installation
+
+
```jsx
-// usando npm
-npm install @material-ui/system
+// with npm
+npm install @material-ui/system@next @emotion/react @emotion/styled
+
+// with yarn
+yarn add @material-ui/system@next @emotion/react @emotion/styled
+```
-// usando yarn
-yarn add @material-ui/system
+Or if you want to use `styled-components` as a styling engine:
+
+```sh
+// with npm
+npm install @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+
+// with yarn
+yarn add @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
```
+Take a look at the [Styled Engine guide](/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+
## Why use the system?
Compare how the same stat component can be built with two different APIs.
@@ -123,7 +137,7 @@ return (
18.77%
- vs last week
+ vs. last week
```
@@ -183,9 +197,9 @@ Cons:
### API tradeoff
-In previous versions, the system properties were supported as props on the `Box` component. From v5, however, the system provides a superset of CSS (supports all CSS properties/selectors in addition to custom ones), and is available in all components, so selectors cannot be efficiently mapped to props without potential naming conflicts. Instead, all system properties are available under one prop `sx`.
+Having the system under one prop (`sx`) helps to differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the **separation of concerns**. For instance, a `color` prop on a button impacts multiple states (hover, focus, etc.), not to be confused with the color CSS property.
-Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic.
+Only the `Box`, `Stack`, `Typography`, and `Grid` components accept the system properties as _props_ for the above reason. These components are designed to solve CSS problems, they are CSS component utilities.
## Nutzung
@@ -204,7 +218,7 @@ There are lots of shorthands available for the CSS properties. These are documen
color: 'primary.main', // theme.palette.primary.main
m: 1, // margin: theme.spacing(1)
p: {
- xs: 1, // [theme.breakpoints.up('xs')]: : { padding: theme.spacing(1) }
+ xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
},
zIndex: 'tooltip', // theme.zIndex.tooltip
}}
@@ -215,7 +229,7 @@ These shorthands are **optional**, they are great to save time when writing styl
### Superset of CSS
-As part of the prop, you can use any regular CSS too: child or pseudo-selectors, media queries, raw CSS values, etc. Here are a few examples: Here are a few examples:
+As part of the prop, you can use any regular CSS too: child or pseudo-selectors, media queries, raw CSS values, etc. Here are a few examples: Here are a few examples: Here are a few examples:
- Using pseudo selectors:
@@ -262,7 +276,7 @@ If you would like to have responsive values for a CSS property, you can use the
#### 1. Breakpoints as an object
-The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Here is the previous example again, using the object syntax.
+The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Note that each breakpoint property matches the breakpoint and every larger breakpoint. For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`. Here is the previous example again, using the object syntax.
{{"demo": "pages/system/basics/BreakpointsAsObject.js"}}
@@ -292,6 +306,7 @@ import { createTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
+ mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
@@ -305,9 +320,8 @@ export default function CustomBreakpoints() {
diff --git a/docs/src/pages/system/basics/basics-es.md b/docs/src/pages/system/basics/basics-es.md
index cbc12f2c2f471c..57705e9b805e30 100644
--- a/docs/src/pages/system/basics/basics-es.md
+++ b/docs/src/pages/system/basics/basics-es.md
@@ -1,6 +1,6 @@
# Material-UI System
-CSS utilities for rapidly creating custom design.
+CSS utilities for rapidly laying out custom designs.
Material-UI comes with dozens of **ready-to-use** components in the core. These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system:
@@ -14,14 +14,28 @@ _(Resize the window to see the responsive breakpoints)_
## Instalación
+
+
```jsx
-// usando npm
-npm install @material-ui/system
+// with npm
+npm install @material-ui/system@next @emotion/react @emotion/styled
+
+// with yarn
+yarn add @material-ui/system@next @emotion/react @emotion/styled
+```
-// usando yarn
-yarn add @material-ui/system
+Or if you want to use `styled-components` as a styling engine:
+
+```sh
+// with npm
+npm install @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+
+// with yarn
+yarn add @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
```
+Take a look at the [Styled Engine guide](/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+
## Why use the system?
Compare how the same stat component can be built with two different APIs.
@@ -123,7 +137,7 @@ return (
18.77%
- vs last week
+ vs. last week
```
@@ -183,9 +197,9 @@ Cons:
### API tradeoff
-In previous versions, the system properties were supported as props on the `Box` component. From v5, however, the system provides a superset of CSS (supports all CSS properties/selectors in addition to custom ones), and is available in all components, so selectors cannot be efficiently mapped to props without potential naming conflicts. Instead, all system properties are available under one prop `sx`.
+Having the system under one prop (`sx`) helps to differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the **separation of concerns**. For instance, a `color` prop on a button impacts multiple states (hover, focus, etc.), not to be confused with the color CSS property.
-Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic.
+Only the `Box`, `Stack`, `Typography`, and `Grid` components accept the system properties as _props_ for the above reason. These components are designed to solve CSS problems, they are CSS component utilities.
## Implementación
@@ -204,7 +218,7 @@ There are lots of shorthands available for the CSS properties. These are documen
color: 'primary.main', // theme.palette.primary.main
m: 1, // margin: theme.spacing(1)
p: {
- xs: 1, // [theme.breakpoints.up('xs')]: : { padding: theme.spacing(1) }
+ xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
},
zIndex: 'tooltip', // theme.zIndex.tooltip
}}
@@ -262,7 +276,7 @@ If you would like to have responsive values for a CSS property, you can use the
#### 1. Breakpoints as an object
-The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Here is the previous example again, using the object syntax.
+The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Note that each breakpoint property matches the breakpoint and every larger breakpoint. For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`. Here is the previous example again, using the object syntax.
{{"demo": "pages/system/basics/BreakpointsAsObject.js"}}
@@ -292,6 +306,7 @@ import { createTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
+ mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
@@ -305,9 +320,8 @@ export default function CustomBreakpoints() {
diff --git a/docs/src/pages/system/basics/basics-fr.md b/docs/src/pages/system/basics/basics-fr.md
index 2b420763f18278..33e7949675f3ed 100644
--- a/docs/src/pages/system/basics/basics-fr.md
+++ b/docs/src/pages/system/basics/basics-fr.md
@@ -14,6 +14,8 @@ _(Resize the window to see the responsive breakpoints)_
## Installation
+
+
```jsx
// usando npm
npm install @material-ui/system
@@ -22,6 +24,18 @@ npm install @material-ui/system
yarn add @material-ui/system
```
+Or if you want to use `styled-components` as a styling engine:
+
+```sh
+// with npm
+npm install @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+
+// with yarn
+yarn add @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+```
+
+Take a look at the [Styled Engine guide](/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+
## Why use the system?
Compare how the same stat component can be built with two different APIs.
@@ -97,35 +111,15 @@ return (
```jsx
- Sessions
-
- 98.3 K
-
-
-
- 18.77%
-
-
- vs last week
-
-
```
### Problem solved
@@ -183,9 +177,9 @@ Cons:
### API tradeoff
-In previous versions, the system properties were supported as props on the `Box` component. From v5, however, the system provides a superset of CSS (supports all CSS properties/selectors in addition to custom ones), and is available in all components, so selectors cannot be efficiently mapped to props without potential naming conflicts. Instead, all system properties are available under one prop `sx`.
+Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the **separation of concerns**. For instance, a `color` prop on a button impacts multiple states (hover, focus, etc.), not to be confused with the color CSS property.
-Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic.
+Only the `Box`, `Stack`, `Typography`, and `Grid` components accept the system properties as _props_ for the above reason. These components are designed to solve CSS problems, they are CSS component utilities.
## Utilisation
@@ -200,15 +194,35 @@ There are lots of shorthands available for the CSS properties. These are documen
```jsx
+ Sessions
+
+ 98.3 K
+
+
+
+ 18.77%
+
+
+ vs last week
+
+
```
These shorthands are **optional**, they are great to save time when writing styles but it can be overwhelming to learn new custom APIs. You might want to skip this part and bet on CSS, it has been standardized for decades, head to the [next section](#superset-of-css).
@@ -262,7 +276,7 @@ If you would like to have responsive values for a CSS property, you can use the
#### 1. Breakpoints as an object
-The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Here is the previous example again, using the object syntax.
+The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Note that each breakpoint property matches the breakpoint and every larger breakpoint. For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`. Here is the previous example again, using the object syntax.
{{"demo": "pages/system/basics/BreakpointsAsObject.js"}}
@@ -285,6 +299,23 @@ You can skip breakpoints with the `null` value:
You can also specify your own custom breakpoints, and use them as keys when defining the breakpoints object. Here is an example of how to do that.
```jsx
+declare module "@material-ui/core/styles/createBreakpoints" {
+ interface BreakpointOverrides {
+ xs: false; // removes the `xs` breakpoint
+ sm: false;
+ md: false;
+ lg: false;
+ xl: false;
+ tablet: true; // adds the `tablet` breakpoint
+ laptop: true;
+ desktop: true;
+ }
+}
+```
+
+If you are using TypeScript, you will also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values.
+
+```ts
import * as React from 'react';
import Box from '@material-ui/core/Box';
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
@@ -318,30 +349,13 @@ export default function CustomBreakpoints() {
}
```
-If you are using TypeScript, you will also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values.
-
-```ts
-declare module "@material-ui/core/styles/createBreakpoints" {
- interface BreakpointOverrides {
- xs: false; // removes the `xs` breakpoint
- sm: false;
- md: false;
- lg: false;
- xl: false;
- tablet: true; // adds the `tablet` breakpoint
- laptop: true;
- desktop: true;
- }
-}
-```
-
### Theme getter
If you wish to use the theme for a CSS property that is not supported natively by the system, you can use a function as the value, in which you can access the theme object.
{{"demo": "pages/system/basics/ValueAsFunction.js"}}
-## Implementations
+## Implémentations
The `sx` prop can be used in four different locations:
diff --git a/docs/src/pages/system/basics/basics-ja.md b/docs/src/pages/system/basics/basics-ja.md
index 3d1ba7bcd35ca1..a77d205d5154ee 100644
--- a/docs/src/pages/system/basics/basics-ja.md
+++ b/docs/src/pages/system/basics/basics-ja.md
@@ -1,8 +1,8 @@
# Material-UI System
-CSS utilities for rapidly creating custom design.
+CSS utilities for rapidly laying out custom designs.
-Material-UI comes with dozens of **ready-to-use** components in the core. These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system:
+Material-UIには、コアに数十の **今すぐ使用できる** コンポーネントが付属しています。 These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system:
The **system** lets you quickly build custom UI components leveraging the values defined in your theme.
@@ -14,14 +14,28 @@ _(Resize the window to see the responsive breakpoints)_
## インストール
+
+
```jsx
-// usando npm
-npm install @material-ui/system
+// with npm
+npm install @material-ui/system@next @emotion/react @emotion/styled
+
+// with yarn
+yarn add @material-ui/system@next @emotion/react @emotion/styled
+```
-// usando yarn
-yarn add @material-ui/system
+Or if you want to use `styled-components` as a styling engine:
+
+```sh
+// with npm
+npm install @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+
+// with yarn
+yarn add @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
```
+Take a look at the [Styled Engine guide](/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+
## Why use the system?
Compare how the same stat component can be built with two different APIs.
@@ -123,7 +137,7 @@ return (
18.77%
- vs last week
+ vs. last week
```
@@ -183,9 +197,9 @@ Cons:
### API tradeoff
-In previous versions, the system properties were supported as props on the `Box` component. From v5, however, the system provides a superset of CSS (supports all CSS properties/selectors in addition to custom ones), and is available in all components, so selectors cannot be efficiently mapped to props without potential naming conflicts. Instead, all system properties are available under one prop `sx`.
+Having the system under one prop (`sx`) helps to differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the **separation of concerns**. For instance, a `color` prop on a button impacts multiple states (hover, focus, etc.), not to be confused with the color CSS property.
-Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic.
+Only the `Box`, `Stack`, `Typography`, and `Grid` components accept the system properties as _props_ for the above reason. These components are designed to solve CSS problems, they are CSS component utilities.
## 使い方
@@ -204,7 +218,7 @@ There are lots of shorthands available for the CSS properties. These are documen
color: 'primary.main', // theme.palette.primary.main
m: 1, // margin: theme.spacing(1)
p: {
- xs: 1, // [theme.breakpoints.up('xs')]: : { padding: theme.spacing(1) }
+ xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
},
zIndex: 'tooltip', // theme.zIndex.tooltip
}}
@@ -262,7 +276,7 @@ If you would like to have responsive values for a CSS property, you can use the
#### 1. Breakpoints as an object
-The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Here is the previous example again, using the object syntax.
+The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Note that each breakpoint property matches the breakpoint and every larger breakpoint. For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`. Here is the previous example again, using the object syntax.
{{"demo": "pages/system/basics/BreakpointsAsObject.js"}}
@@ -292,6 +306,7 @@ import { createTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
+ mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
@@ -305,9 +320,8 @@ export default function CustomBreakpoints() {
diff --git a/docs/src/pages/system/basics/basics-pt.md b/docs/src/pages/system/basics/basics-pt.md
index 86e2903b29aaaf..b1ba1ea7530717 100644
--- a/docs/src/pages/system/basics/basics-pt.md
+++ b/docs/src/pages/system/basics/basics-pt.md
@@ -1,6 +1,6 @@
# Sistema Material-UI
-Utilitários CSS para criar rapidamente um design customizado.
+CSS utilities for rapidly laying out custom designs.
Material-UI comes with dozens of **ready-to-use** components in the core. Esses componentes são um ponto de partida incrível, mas quando se trata de fazer seu site se destacar com um design customizado, pode ser mais simples começar de um estado sem estilos. Apresentando o sistema:
@@ -14,14 +14,28 @@ _(Redimensione a janela para ver os pontos de quebra responsivos)_
## Instalação
+
+
```jsx
-// utilizando o npm
-npm install @material-ui/system
+// with npm
+npm install @material-ui/system@next @emotion/react @emotion/styled
+
+// with yarn
+yarn add @material-ui/system@next @emotion/react @emotion/styled
+```
-// utilizando o yarn
-yarn add @material-ui/system
+Or if you want to use `styled-components` as a styling engine:
+
+```sh
+// with npm
+npm install @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+
+// with yarn
+yarn add @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
```
+Take a look at the [Styled Engine guide](/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+
## Por que usar o sistema?
Compare como o mesmo componente de estatística pode ser construído com duas APIs diferentes.
@@ -123,7 +137,7 @@ return (
18.77%
- vs last week
+ vs. last week
```
@@ -175,7 +189,7 @@ Contras:
| a. Renderizar 1.000 Box | `
` | 100ms |
| b. Renderizar 1.000 componentes | `
` | 120ms |
| c. Renderizar 1,000 styled components | `
` | 160ms |
- | d. Renderizar 1.000 Box | `` | 370ms |
+ | d. a. Renderizar 1.000 Box | `` | 370ms |
_Vá até a [pasta de benchmark](https://github.com/mui-org/material-ui/tree/next/benchmark/browser) para uma reprodução dessas métricas._
@@ -183,9 +197,9 @@ Contras:
### API tradeoff
-In previous versions, the system properties were supported as props on the `Box` component. From v5, however, the system provides a superset of CSS (supports all CSS properties/selectors in addition to custom ones), and is available in all components, so selectors cannot be efficiently mapped to props without potential naming conflicts. Instead, all system properties are available under one prop `sx`.
+Having the system under one prop (`sx`) helps to differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the **separation of concerns**. For instance, a `color` prop on a button impacts multiple states (hover, focus, etc.), not to be confused with the color CSS property.
-Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic.
+Only the `Box`, `Stack`, `Typography`, and `Grid` components accept the system properties as _props_ for the above reason. These components are designed to solve CSS problems, they are CSS component utilities.
## Uso
@@ -204,7 +218,7 @@ Existem muitas abreviações disponíveis para as propriedades do CSS. Estas sã
color: 'primary.main', // theme.palette.primary.main
m: 1, // margin: theme.spacing(1)
p: {
- xs: 1, // [theme.breakpoints.up('xs')]: : { padding: theme.spacing(1) }
+ xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
},
zIndex: 'tooltip', // theme.zIndex.tooltip
}}
@@ -215,7 +229,7 @@ Estas abreviações são **opcionais**, elas são ótimas para economizar tempo
### Super conjunto de CSS
-Como parte da propriedade, você pode usar qualquer CSS normalmente: seletores filhos ou pseudo seletores, consultas de mídia, valores CSS brutos, etc. Aqui esta alguns exemplos: Aqui esta alguns exemplos:
+Como parte da propriedade, você pode usar qualquer CSS normalmente: seletores filhos ou pseudo seletores, consultas de mídia, valores CSS brutos, etc. Aqui esta alguns exemplos:
- Usando pseudo seletores:
@@ -262,7 +276,7 @@ Se você quiser ter valores responsivos para uma propriedade CSS, você pode usa
#### 1. Pontos de quebra como um objeto
-A primeira opção para definir pontos de quebra é defini-los como um objeto, usando os pontos de quebra como chaves. Aqui está o exemplo anterior novamente, usando a sintaxe do objeto.
+A primeira opção para definir pontos de quebra é defini-los como um objeto, usando os pontos de quebra como chaves. Note that each breakpoint property matches the breakpoint and every larger breakpoint. For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`. Aqui está o exemplo anterior novamente, usando a sintaxe do objeto.
{{"demo": "pages/system/basics/BreakpointsAsObject.js"}}
@@ -292,6 +306,7 @@ import { createTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
+ mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
@@ -305,13 +320,12 @@ export default function CustomBreakpoints() {
- Este box tem uma largura responsiva
+ This box has a responsive width
);
@@ -355,7 +369,7 @@ Todos os componentes Material-UI do core suportarão a propriedade `sx`.
### 3. Componentes customizados
-Além dos componentes de Material-UI, você também pode adicionar a propriedade `sx` para seus componentes customizados, usando o utilitário `styled` de `@material-ui/core/styles`.
+In addition to Material-UI components, you can add the `sx` prop to your custom components too, by using the `styled` utility from `@material-ui/core/styles`.
```jsx
import { styled } from '@material-ui/core/styles';
diff --git a/docs/src/pages/system/basics/basics-ru.md b/docs/src/pages/system/basics/basics-ru.md
index 509c89cece4939..d48199eaa2c12a 100644
--- a/docs/src/pages/system/basics/basics-ru.md
+++ b/docs/src/pages/system/basics/basics-ru.md
@@ -1,6 +1,6 @@
# Material-UI System
-CSS utilities for rapidly creating custom design.
+CSS utilities for rapidly laying out custom designs.
Material-UI comes with dozens of **ready-to-use** components in the core. These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system:
@@ -14,14 +14,28 @@ _(Resize the window to see the responsive breakpoints)_
## Инструкция по установке
+
+
```jsx
-// usando npm
-npm install @material-ui/system
+// with npm
+npm install @material-ui/system@next @emotion/react @emotion/styled
+
+// with yarn
+yarn add @material-ui/system@next @emotion/react @emotion/styled
+```
-// usando yarn
-yarn add @material-ui/system
+Or if you want to use `styled-components` as a styling engine:
+
+```sh
+// with npm
+npm install @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+
+// with yarn
+yarn add @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
```
+Take a look at the [Styled Engine guide](/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+
## Why use the system?
Compare how the same stat component can be built with two different APIs.
@@ -123,7 +137,7 @@ return (
18.77%
- vs last week
+ vs. last week
```
@@ -183,9 +197,9 @@ Cons:
### API tradeoff
-In previous versions, the system properties were supported as props on the `Box` component. From v5, however, the system provides a superset of CSS (supports all CSS properties/selectors in addition to custom ones), and is available in all components, so selectors cannot be efficiently mapped to props without potential naming conflicts. Instead, all system properties are available under one prop `sx`.
+Having the system under one prop (`sx`) helps to differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the **separation of concerns**. For instance, a `color` prop on a button impacts multiple states (hover, focus, etc.), not to be confused with the color CSS property.
-Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic.
+Only the `Box`, `Stack`, `Typography`, and `Grid` components accept the system properties as _props_ for the above reason. These components are designed to solve CSS problems, they are CSS component utilities.
## Использование
@@ -204,7 +218,7 @@ There are lots of shorthands available for the CSS properties. These are documen
color: 'primary.main', // theme.palette.primary.main
m: 1, // margin: theme.spacing(1)
p: {
- xs: 1, // [theme.breakpoints.up('xs')]: : { padding: theme.spacing(1) }
+ xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
},
zIndex: 'tooltip', // theme.zIndex.tooltip
}}
@@ -262,7 +276,7 @@ If you would like to have responsive values for a CSS property, you can use the
#### 1. Breakpoints as an object
-The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Here is the previous example again, using the object syntax.
+The first option for defining breakpoints is to define them as an object, using the breakpoints as keys. Note that each breakpoint property matches the breakpoint and every larger breakpoint. For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`. Here is the previous example again, using the object syntax.
{{"demo": "pages/system/basics/BreakpointsAsObject.js"}}
@@ -292,6 +306,7 @@ import { createTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
+ mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
@@ -305,9 +320,8 @@ export default function CustomBreakpoints() {
diff --git a/docs/src/pages/system/basics/basics-zh.md b/docs/src/pages/system/basics/basics-zh.md
index c0d5dec8fc705f..e2b5a4d66be3ae 100644
--- a/docs/src/pages/system/basics/basics-zh.md
+++ b/docs/src/pages/system/basics/basics-zh.md
@@ -1,6 +1,6 @@
# Material-UI 系统（System）
-用于快速创建自定义设计的 CSS 工具集。
+CSS utilities for rapidly laying out custom designs.
Material-UI comes with dozens of **ready-to-use** components in the core. 开始使用这些组件时可能会非常困难，但当涉及到通过定制设计使你的网站脱颖而出时，从这样无风格的状态开始可能更简单。 开始使用这些组件时可能会非常困难，但当涉及到通过定制设计使你的网站脱颖而出时，从这样无风格的状态开始可能更简单。 介绍该系统：
@@ -14,14 +14,28 @@ _（调整窗口大小以查看响应的断点）_
## 安装
+
+
```jsx
-// 使用 npm
-npm install @material-ui/system
+// with npm
+npm install @material-ui/system@next @emotion/react @emotion/styled
+
+// with yarn
+yarn add @material-ui/system@next @emotion/react @emotion/styled
+```
-// 使用 yarn
-yarn add @material-ui/system
+Or if you want to use `styled-components` as a styling engine:
+
+```sh
+// with npm
+npm install @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
+
+// with yarn
+yarn add @material-ui/system@next @material-ui/styled-engine-sc@next styled-components
```
+Take a look at the [Styled Engine guide](/guides/styled-engine/) for more information about how to configure `styled-components` as the style engine.
+
## 为什么要使用系统？
比较同一个统计组件如何使用两种不同的 API 来构建。
@@ -123,7 +137,7 @@ return (
18.77%
- vs last week
+ vs. last week
```
@@ -136,7 +150,7 @@ return (
用户没有必要在样式组件的用法和定义的地方不断跳转。 有了这个系统，直接就可以在你需要的组件上面进行样式定制。
-**2. 2. 命名是一件很难的事情。**
+**2. UI 中要达成一致是很困难的。**
你有没有发现自己在为一个样式组件找一个好名字而苦恼？ 该系统可以直接将样式映射到元素。 所以你要做的就是只关心实际的样式属性。
@@ -170,12 +184,12 @@ This prop provides a superset of CSS (contains all CSS properties/selectors in a
- 运行时会造成性能影响：
- | 基准测试 | 代码片段 | 花费时间 |
- |:-------------------- |:--------------------------- | ----- |
- | a. a. 渲染 1,000 个基元 | `` | 100ms |
- | b. b. 渲染 1,000 个组件 | `
` | 120ms |
- | c. c. 渲染 1,000 个样式组件 | `
` | 160ms |
- | d. 渲染一千个分组（Box） | `` | 370ms |
+ | 基准测试 | 代码片段 | 花费时间 |
+ |:----------------------- |:--------------------------- | ----- |
+ | a. a. 渲染 1,000 个基元 | `` | 100ms |
+ | b. b. b. 渲染 1,000 个组件 | `
` | 120ms |
+ | c. c. c. 渲染 1,000 个样式组件 | `
` | 160ms |
+ | d. 渲染一千个分组（Box） | `` | 370ms |
_这里是可复现的 [性能测试文件夹](https://github.com/mui-org/material-ui/tree/next/benchmark/browser)。_
@@ -183,9 +197,9 @@ This prop provides a superset of CSS (contains all CSS properties/selectors in a
### API 权衡
-In previous versions, the system properties were supported as props on the `Box` component. In previous versions, the system properties were supported as props on the `Box` component. From v5, however, the system provides a superset of CSS (supports all CSS properties/selectors in addition to custom ones), and is available in all components, so selectors cannot be efficiently mapped to props without potential naming conflicts. Instead, all system properties are available under one prop `sx`. Instead, all system properties are available under one prop `sx`.
+Having the system under one prop (`sx`) helps to differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic. It's important for the **separation of concerns**. For instance, a `color` prop on a button impacts multiple states (hover, focus, etc.), not to be confused with the color CSS property.
-Additionally, having the system under one prop helps to easily differentiate props defined for the sole purpose of CSS utilities, vs. those for component business logic.
+Only the `Box`, `Stack`, `Typography`, and `Grid` components accept the system properties as _props_ for the above reason. These components are designed to solve CSS problems, they are CSS component utilities.
## 使用
@@ -204,7 +218,7 @@ CSS 属性中有大量的速记语法。 这些语法在之后的文档中都有
color: 'primary.main', // theme.palette.primary.main
m: 1, // margin: theme.spacing(1)
p: {
- xs: 1, // [theme.breakpoints.up('xs')]: : { padding: theme.spacing(1) }
+ xs: 1, // [theme.breakpoints.up('xs')]: { padding: theme.spacing(1) }
},
zIndex: 'tooltip', // theme.zIndex.tooltip
}}
@@ -260,9 +274,9 @@ CSS 属性中有大量的速记语法。 这些语法在之后的文档中都有
如果你想要你的 CSS 属性是响应式的，那么可以使用断点速记语法。 确定断点有两种方法：
-#### 1. 1. 将断点作为对象
+#### 1. 1. 1. 将断点作为对象
-定义断点的第一种选择是将断点定义为一个对象，将断点作为其键。 这里又是前面的例子，使用的是对象语法。
+定义断点的第一种选择是将断点定义为一个对象，将断点作为其键。 Note that each breakpoint property matches the breakpoint and every larger breakpoint. For example, `width: { lg: 100 }` is equivalent to `theme.breakpoints.up('lg')`. 这里又是前面的例子，使用的是对象语法。
{{"demo": "pages/system/basics/BreakpointsAsObject.js"}}
@@ -293,6 +307,7 @@ import { createTheme, ThemeProvider } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
+ mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1280,
@@ -306,13 +321,12 @@ export default function CustomBreakpoints() {
- 该分组的宽度是响应式的
+ This box has a responsive width
);
@@ -346,7 +360,7 @@ declare module "@material-ui/core/styles/createBreakpoints" {
`sx` 属性可以用于四个不同的位置：
-### 1. 1. 核心组件
+### 1. 1. 1. 核心组件
所有的 Material-UI 核心组件都支持 `sx` 属性。
@@ -354,9 +368,9 @@ declare module "@material-ui/core/styles/createBreakpoints" {
[`Box`](/components/box/) 是一个轻量级组件，它可以以工具集的方式通过包装其他组件来达到访问其 `sx` 属性的目的。 默认情况下将渲染一个 `` 元素。
-### 3。 自定义组件
+### 3。 2. 自定义组件
-除了 Material-UI 组件，你也可以通过使用 `@material-ui/core/styles` 中的 `styled` 工具集来将 `sx` 属性添加到你的自定义组件中。
+In addition to Material-UI components, you can add the `sx` prop to your custom components too, by using the `styled` utility from `@material-ui/core/styles`.
```jsx
import { styled } from '@material-ui/core/styles';
@@ -364,6 +378,6 @@ import { styled } from '@material-ui/core/styles';
const Div = styled('div')``;
```
-### 4、 4、 使用 babel 插件的任何元素
+### 4、 4、 4、 使用 babel 插件的任何元素
等待开发 [#23220](https://github.com/mui-org/material-ui/issues/23220)。
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md
index 599b90c0975733..50c4befc0dc248 100644
--- a/docs/src/pages/system/basics/basics.md
+++ b/docs/src/pages/system/basics/basics.md
@@ -167,7 +167,9 @@ The system provides direct access to the value in the theme. It makes it easier
The `sx` prop, as the main part of the system, solves these problems by providing a fast & simple way of applying the correct design tokens for specific CSS properties directly to a React element. The [demo above](#demo) shows how it can be used to create a one-off design.
-This prop provides a superset of CSS (contains all CSS properties/selectors in addition to custom ones) that maps values directly from the theme, depending on the CSS property used. Also, it allows a simple way of defining responsive values that correspond to the breakpoints defined in the theme.
+This prop provides a superset of CSS (contains all CSS properties/selectors in addition to custom ones) that maps values directly from the theme, depending on the CSS property used.
+Also, it allows a simple way of defining responsive values that correspond to the breakpoints defined in the theme.
+For more details, visit the [`sx` prop page](/system/the-sx-prop/).
### When to use it?
diff --git a/docs/src/pages/system/borders/borders-fr.md b/docs/src/pages/system/borders/borders-fr.md
index 11ef121d8bacd7..29584f71788efe 100644
--- a/docs/src/pages/system/borders/borders-fr.md
+++ b/docs/src/pages/system/borders/borders-fr.md
@@ -58,7 +58,7 @@ Use border utilities to add or remove an element's borders. Choose from all bord
import { borders } from '@material-ui/system';
```
-| Import name | Prop | Propriété CSS | Clé du thème |
+| Nom importé | Propriété | Propriété CSS | Clé du thème |
|:-------------- |:-------------- |:--------------- |:---------------------------------------------------------------- |
| `border` | `border` | `border` | `borders` |
| `borderTop` | `borderTop` | `border-top` | `borders` |
diff --git a/docs/src/pages/system/borders/borders-pt.md b/docs/src/pages/system/borders/borders-pt.md
index e24d4819487f50..a9145cfdfaa162 100644
--- a/docs/src/pages/system/borders/borders-pt.md
+++ b/docs/src/pages/system/borders/borders-pt.md
@@ -25,6 +25,44 @@ Use border utilities to add or remove an element's borders. Escolha para todas a
…
…
…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
…
…
…
@@ -35,6 +73,16 @@ Use border utilities to add or remove an element's borders. Escolha para todas a
…
…
…
+…
+…
+…
+…
+…
+…
+…
+…
+…
+…
…
…
…
@@ -171,6 +219,26 @@ Use border utilities to add or remove an element's borders. Escolha para todas a
…
…
…
+…
+…
+…
+…
+…
+…
+…
+
+
+### `@material-ui/core@5.0.0-alpha.38`
+
+#### Breaking changes
+
+- [Menu] Use ButtonBase in MenuItem (#26591) @siriwatknp
+
+ - Change the default value of `anchorOrigin.vertical` to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. You can restore the previous behavior with:
+
+ ```diff
+