[docs] Polish typography demos

mui · Jan 27, 2020 · 622a00c · 622a00c
1 parent 536c3c0
commit 622a00c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 25 deletions.
diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js
@@ -14,12 +14,10 @@ theme.typography.h3 = {
   },
 };
 
-export default function ResponsiveFontSizes() {
+export default function CustomResponsiveFontSizes() {
   return (
-    <div>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h3">Responsive h3</Typography>
-      </ThemeProvider>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Typography variant="h3">Responsive h3</Typography>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx
@@ -14,12 +14,10 @@ theme.typography.h3 = {
   },
 };
 
-export default function ResponsiveFontSizes() {
+export default function CustomResponsiveFontSizes() {
   return (
-    <div>
-      <ThemeProvider theme={theme}>
-        <Typography variant="h3">Responsive h3</Typography>
-      </ThemeProvider>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Typography variant="h3">Responsive h3</Typography>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js
@@ -19,12 +19,12 @@ const theme = createMuiTheme({
 
 export default function TypographyVariants() {
   return (
-    <ThemeProvider theme={theme}>
-      <div>
+    <div>
+      <ThemeProvider theme={theme}>
         <Typography variant="subtitle1">subtitle</Typography>
         <Typography>body1</Typography>
         <Button>Button</Button>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </div>
   );
 }
diff --git a/docs/src/pages/customization/typography/TypographyVariants.tsx b/docs/src/pages/customization/typography/TypographyVariants.tsx
@@ -19,12 +19,12 @@ const theme = createMuiTheme({
 
 export default function TypographyVariants() {
   return (
-    <ThemeProvider theme={theme}>
-      <div>
+    <div>
+      <ThemeProvider theme={theme}>
         <Typography variant="subtitle1">subtitle</Typography>
         <Typography>body1</Typography>
         <Button>Button</Button>
-      </div>
-    </ThemeProvider>
+      </ThemeProvider>
+    </div>
   );
 }
diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md
@@ -56,7 +56,7 @@ const raleway = {
 Next, you need to change the theme to use this new font.
 In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice).
 
-```js
+```jsx
 const theme = createMuiTheme({
   typography: {
     fontFamily: 'Raleway, Arial',
@@ -71,10 +71,12 @@ const theme = createMuiTheme({
 });
 
 // ...
-<ThemeProvider theme={theme}>
-  <CssBaseline />
-  {children}
-</ThemeProvider>;
+return (
+  <ThemeProvider theme={theme}>
+    <CssBaseline />
+    {children}
+  </ThemeProvider>
+);
 ```
 
 ## Font size