[docs] Add Customization/Components TS demo

docs/src/pages/customization/components/Component.js

@@ -2,8 +2,6 @@ import React from 'react';
 import ClassNames from 'docs/src/pages/customization/components/ClassNames';
 
 // We can use ClassNames over and over.
-function Component() {
+export default function Component() {
   return <ClassNames>Component</ClassNames>;
 }
-
-export default Component;

docs/src/pages/customization/components/Component.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import ClassNames from 'docs/src/pages/customization/components/ClassNames';
 
 // We can use ClassNames over and over.
-function Component() {
+export default function Component() {
   return <ClassNames>Component</ClassNames>;
 }
-
-export default Component;

docs/src/pages/customization/components/DynamicThemeNesting.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { blue } from '@material-ui/core/colors';
+import Switch from '@material-ui/core/Switch';
+
+const defaultTheme = createMuiTheme();
+
+export default function DynamicThemeNesting() {
+  const [color, setColor] = React.useState('default');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setColor(event.target.checked ? 'blue' : 'default');
+  };
+
+  return (
+    <React.Fragment>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={color === 'blue'}
+            onChange={handleChange}
+            color="primary"
+            value="dynamic-class-name"
+          />
+        }
+        label="Blue"
+      />
+      <ThemeProvider
+        theme={
+          color === 'blue'
+            ? {
+                ...defaultTheme,
+                palette: {
+                  ...defaultTheme.palette,
+                  secondary: {
+                    main: blue[500],
+                    contrastText: '#fff',
+                  },
+                },
+              }
+            : defaultTheme
+        }
+      >
+        <Button variant="contained" color="secondary">
+          {'Theme nesting'}
+        </Button>
+      </ThemeProvider>
+    </React.Fragment>
+  );
+}

docs/src/pages/customization/components/InlineStyle.js

@@ -12,8 +12,6 @@ const style = {
   boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
 };
 
-function InlineStyle() {
+export default function InlineStyle() {
   return <Button style={style}>inline-style</Button>;
 }
-
-export default InlineStyle;

docs/src/pages/customization/components/InlineStyle.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+
+// We can use inline-style
+const style = {
+  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+  borderRadius: 3,
+  border: 0,
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+};
+
+export default function InlineStyle() {
+  return <Button style={style}>inline-style</Button>;
+}