[docs] Polish typography demos

Author: oliviertassinari

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>
   );
 }

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>
   );
 }

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>
   );
 }

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>
   );
 }

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