From 783ff53ba62b3fd71652d53f31854b2102064b41 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 23 Oct 2020 12:20:07 +0200 Subject: [PATCH] restructure a bit the docs page for the Box --- docs/src/pages/components/box/box.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index e7ae7805322511..196b1ff76fd958 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -16,6 +16,12 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty [The palette](/system/palette/) style function. +## The sx prop + +All system properties, are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: + +{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} + ## Overriding Material-UI components The Box component wraps your component. @@ -28,7 +34,7 @@ This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way. However, sometimes you have to target the underlying DOM element. -For instance, you want to change the border of the button. +For instance, you want to change the border of the Button. The Button component defines its own styles. CSS inheritance doesn't help. To workaround the problem, you have two options: @@ -47,12 +53,6 @@ The Box children accepts a render props function. You can pull out the `classNam > ⚠️ The CSS specificity relies on the import order. > If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last. -## The sx prop - -All system props, are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: - -{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} - ## API ```jsx