[docs] Box & system cleanup (#22962)

mui · Oct 10, 2020 · 6c22660 · 6c22660
1 parent 01ebd98
commit 6c22660
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 21 deletions.
diff --git a/docs/src/pages/system/basics/Emotion.js b/docs/src/pages/system/basics/Emotion.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { palette, spacing } from '@material-ui/system';
-import NoSsr from '@material-ui/core/NoSsr';
 
 const Box = styled.div`
   ${palette}
@@ -10,10 +9,8 @@ const Box = styled.div`
 
 export default function Emotion() {
   return (
-    <NoSsr>
-      <Box color="white" bgcolor="palevioletred" p={1}>
-        Emotion
-      </Box>
-    </NoSsr>
+    <Box color="white" bgcolor="palevioletred" p={1}>
+      Emotion
+    </Box>
   );
 }
diff --git a/docs/src/pages/system/basics/Emotion.tsx b/docs/src/pages/system/basics/Emotion.tsx
@@ -6,7 +6,6 @@ import {
   spacing,
   SpacingProps,
 } from '@material-ui/system';
-import NoSsr from '@material-ui/core/NoSsr';
 
 const Box = styled.div<PaletteProps & SpacingProps>`
   ${palette}
@@ -15,10 +14,8 @@ const Box = styled.div<PaletteProps & SpacingProps>`
 
 export default function Emotion() {
   return (
-    <NoSsr>
-      <Box color="white" bgcolor="palevioletred" p={1}>
-        Emotion
-      </Box>
-    </NoSsr>
+    <Box color="white" bgcolor="palevioletred" p={1}>
+      Emotion
+    </Box>
   );
 }
diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md
@@ -18,7 +18,7 @@ It's important to understand that this package exposes pure (side-effect free) s
 
 ### Demo
 
-In the rest of this _Getting Started_ section we are using **styled-components** as the reference example (to emphasize the universality of this package). Alternatively, you can [use JSS](#interoperability).
+In the rest of this _Getting Started_ section we are using **styled-components** as the reference example (to emphasize the universality of this package). Alternatively, you can [emotion](#interoperability) or any other CSS-in-JS styling solution.
 The demos are also based on the **default** Material-UI [theme object](/customization/default-theme/).
 
 {{"demo": "pages/system/basics/Demo.js", "defaultCodeOpen": true}}
@@ -110,21 +110,15 @@ To make the Box component more useful, we have been building a collection of sty
 - [spacing](/system/spacing/#api)
 - [typography](/system/typography/#api)
 
-If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using JSS internally):
+If you are already using `@material-ui/core`, you can use the [Box component](/components/box/) (using emotion internally by default):
 
 ```jsx
 import Box from '@material-ui/core/Box';
 ```
 
 ## Interoperability
 
-`@material-ui/system` works with most CSS-in-JS libraries, including JSS, styled-components, and emotion.
-
-If you are already using `@material-ui/core`, we encourage you to start with the **JSS** solution to minimize bundle size.
-
-### JSS
-
-{{"demo": "pages/system/basics/JSS.js", "defaultCodeOpen": true}}
+`@material-ui/system` works with most CSS-in-JS libraries, including JSS, styled-components, and emotion. Here are a few examples usages.
 
 ### Styled components