[docs] Update system installation (#26481)

mui · May 31, 2021 · d17b28e · d17b28e
1 parent 1956249
commit d17b28e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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
 
+<!-- #default-branch-switch -->
+
 ```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
@@ -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:
 
+<!-- #default-branch-switch -->
+
 ```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