From 1d596f587c03c52f74ba09da7744d4252e49ab6a Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 5 May 2021 11:07:37 +0200 Subject: [PATCH 1/7] each sentence a line --- docs/src/pages/components/box/box.md | 3 ++- .../customization/how-to-customize/how-to-customize.md | 3 ++- docs/src/pages/system/advanced/advanced.md | 7 +++++-- docs/src/pages/system/basics/basics.md | 3 ++- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 027ea132411b2d..926cc0f95622b4 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -18,7 +18,8 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty ## The sx prop -All system properties are available via the `sx` prop. In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: +All system properties are available via the `sx` prop. +In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: {{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} diff --git a/docs/src/pages/customization/how-to-customize/how-to-customize.md b/docs/src/pages/customization/how-to-customize/how-to-customize.md index eeac4b0cffbc9c..98a2893a0c2415 100644 --- a/docs/src/pages/customization/how-to-customize/how-to-customize.md +++ b/docs/src/pages/customization/how-to-customize/how-to-customize.md @@ -20,7 +20,8 @@ You might need to change the style of a component for a specific implementation, ### Use the `sx` prop -The easiest way to add style overrides for a one-off situation is to use the `sx` prop available on all Material-UI components. Here is an example: +The easiest way to add style overrides for a one-off situation is to use the `sx` prop available on all Material-UI components. +Here is an example: {{"demo": "pages/customization/how-to-customize/SxProp.js"}} diff --git a/docs/src/pages/system/advanced/advanced.md b/docs/src/pages/system/advanced/advanced.md index eff1c4cc97291b..00a6d4ce360e07 100644 --- a/docs/src/pages/system/advanced/advanced.md +++ b/docs/src/pages/system/advanced/advanced.md @@ -4,12 +4,15 @@ ## 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` 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, this 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` supports, and a different API. {{"demo": "pages/system/advanced/CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}} diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index ed4deb6ae26920..4db0e5beb0a319 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -270,7 +270,8 @@ 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. +Here is the previous example again, using the object syntax. {{"demo": "pages/system/basics/BreakpointsAsObject.js"}} From 914d2f763ac703f8d1f367b4101699f4fc8336b1 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 5 May 2021 11:08:19 +0200 Subject: [PATCH 2/7] link sx prop --- docs/src/pages/system/advanced/advanced.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/system/advanced/advanced.md b/docs/src/pages/system/advanced/advanced.md index 00a6d4ce360e07..425abe3f8284e8 100644 --- a/docs/src/pages/system/advanced/advanced.md +++ b/docs/src/pages/system/advanced/advanced.md @@ -4,7 +4,7 @@ ## Adding the `sx` prop to your custom components -The `unstable_styleFunctionSx` utility adds the support for the `sx` to your own components. +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, this utility will give you the same capabilities, while having a smaller bundle size. From 94b4c324dc3feff41318fb521339b30c412c4807 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 5 May 2021 11:11:20 +0200 Subject: [PATCH 3/7] link sx prop --- docs/src/pages/components/box/box.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 926cc0f95622b4..bf897cf514f2ae 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -16,10 +16,10 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty [The palette](/system/palette/) style function. -## The sx prop +## The `sx` prop -All system properties are available via the `sx` prop. -In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: +All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop). +In addition, the `sx` prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: {{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} From 05640905ebd89f3fe28be7c04f2d499623ab8b55 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 5 May 2021 11:11:48 +0200 Subject: [PATCH 4/7] link sx prop --- .../pages/customization/how-to-customize/how-to-customize.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/customization/how-to-customize/how-to-customize.md b/docs/src/pages/customization/how-to-customize/how-to-customize.md index 98a2893a0c2415..df10becb8862be 100644 --- a/docs/src/pages/customization/how-to-customize/how-to-customize.md +++ b/docs/src/pages/customization/how-to-customize/how-to-customize.md @@ -20,7 +20,7 @@ You might need to change the style of a component for a specific implementation, ### Use the `sx` prop -The easiest way to add style overrides for a one-off situation is to use the `sx` prop available on all Material-UI components. +The easiest way to add style overrides for a one-off situation is to use the [`sx` prop](/system/basics/#the-sx-prop) available on all Material-UI components. Here is an example: {{"demo": "pages/customization/how-to-customize/SxProp.js"}} From 756e9cb5d04fa1918e9ec4b86325cd0d21d2b113 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 5 May 2021 11:14:20 +0200 Subject: [PATCH 5/7] link sx --- docs/src/pages/system/advanced/advanced.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/system/advanced/advanced.md b/docs/src/pages/system/advanced/advanced.md index 425abe3f8284e8..199efcabf69da8 100644 --- a/docs/src/pages/system/advanced/advanced.md +++ b/docs/src/pages/system/advanced/advanced.md @@ -13,6 +13,6 @@ If you would like to use the system independently from Material-UI, this utility ## 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. +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}} From a29fff33afb270b3b9c4b3e95f2cc85516ec0c4e Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 5 May 2021 11:15:42 +0200 Subject: [PATCH 6/7] more "this" removal --- docs/src/pages/system/advanced/advanced.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/system/advanced/advanced.md b/docs/src/pages/system/advanced/advanced.md index 199efcabf69da8..4c148c9e83dc7c 100644 --- a/docs/src/pages/system/advanced/advanced.md +++ b/docs/src/pages/system/advanced/advanced.md @@ -6,7 +6,7 @@ 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, this utility will give you the same capabilities, while having a smaller bundle size. +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"}} From d27c0b8616dce90a1dcd7baa66c15547ae670347 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 5 May 2021 11:22:07 +0200 Subject: [PATCH 7/7] Explicit documentation of breakpoints in sx --- docs/src/pages/system/basics/BreakpointsAsObject.js | 12 +++++++++++- docs/src/pages/system/basics/BreakpointsAsObject.tsx | 12 +++++++++++- docs/src/pages/system/basics/basics.md | 4 +++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/docs/src/pages/system/basics/BreakpointsAsObject.js b/docs/src/pages/system/basics/BreakpointsAsObject.js index ee160b38ae858c..180935f9825a75 100644 --- a/docs/src/pages/system/basics/BreakpointsAsObject.js +++ b/docs/src/pages/system/basics/BreakpointsAsObject.js @@ -4,7 +4,17 @@ import Box from '@material-ui/core/Box'; export default function BreakpointsAsObject() { return (
- + This box has a responsive width.
diff --git a/docs/src/pages/system/basics/BreakpointsAsObject.tsx b/docs/src/pages/system/basics/BreakpointsAsObject.tsx index ee160b38ae858c..180935f9825a75 100644 --- a/docs/src/pages/system/basics/BreakpointsAsObject.tsx +++ b/docs/src/pages/system/basics/BreakpointsAsObject.tsx @@ -4,7 +4,17 @@ import Box from '@material-ui/core/Box'; export default function BreakpointsAsObject() { return (
- + This box has a responsive width.
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index 4db0e5beb0a319..1a45e95dce799d 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -211,7 +211,7 @@ Here is an example leveraging them: 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 }} @@ -271,6 +271,8 @@ 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. +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"}}