From d17b28e526e69b9c2faa0260e88c9facdc72b618 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 31 May 2021 21:11:57 +0200 Subject: [PATCH] [docs] Update system installation (#26481) --- docs/src/pages/system/basics/basics.md | 18 ++++++++++++++++-- packages/material-ui-system/README.md | 8 +++++--- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index b169478290e0d6..5631437fb2b908 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -15,14 +15,28 @@ _(Resize the window to see the responsive breakpoints)_ ## Installation + + ```jsx // with npm -npm install @material-ui/system +npm install @material-ui/system@next @emotion/react @emotion/styled + +// with yarn +yarn add @material-ui/system@next @emotion/react @emotion/styled +``` + +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 +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. diff --git a/packages/material-ui-system/README.md b/packages/material-ui-system/README.md index 7c0d06f7bdb539..b4c08834a65f60 100644 --- a/packages/material-ui-system/README.md +++ b/packages/material-ui-system/README.md @@ -1,17 +1,19 @@ # @material-ui/system -Style props functions for building powerful design systems. +CSS utilities for rapidly laying out custom designs. ## Installation Install the package in your project directory with: + + ```sh // with npm -npm install @material-ui/system +npm install @material-ui/system@next @emotion/react @emotion/styled // with yarn -yarn add @material-ui/system +yarn add @material-ui/system@next @emotion/react @emotion/styled ``` ## Documentation