diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.js b/docs/src/pages/customization/components/DynamicCSSVariables.js
index 8f4f81813543ab..6be56315368fff 100644
--- a/docs/src/pages/customization/components/DynamicCSSVariables.js
+++ b/docs/src/pages/customization/components/DynamicCSSVariables.js
@@ -16,12 +16,24 @@ const useStyles = makeStyles({
   },
 });
 
+const blue = {
+  '--background-start': '#2196F3',
+  '--background-end': '#21CBF3',
+  '--box-shadow': 'rgba(33, 203, 243, .3)',
+};
+
+const defaultColor = {
+  '--background-start': '#FE6B8B',
+  '--background-end': '#FF8E53',
+  '--box-shadow': 'rgba(255, 105, 135, .3)',
+};
+
 export default function DynamicCSSVariables() {
   const classes = useStyles();
-  const [color, setColor] = React.useState('default');
+  const [color, setColor] = React.useState(defaultColor);
 
   const handleChange = event => {
-    setColor(event.target.checked ? 'blue' : 'default');
+    setColor(event.target.checked ? blue : defaultColor);
   };
 
   return (
@@ -29,7 +41,7 @@ export default function DynamicCSSVariables() {
       <FormControlLabel
         control={
           <Switch
-            checked={color === 'blue'}
+            checked={color === blue}
             onChange={handleChange}
             color="primary"
             value="dynamic-class-name"
@@ -37,22 +49,7 @@ export default function DynamicCSSVariables() {
         }
         label="Blue"
       />
-      <Button
-        className={classes.button}
-        style={
-          color === 'blue'
-            ? {
-                '--background-start': '#2196F3',
-                '--background-end': '#21CBF3',
-                '--box-shadow': 'rgba(33, 203, 243, .3)',
-              }
-            : {
-                '--background-start': '#FE6B8B',
-                '--background-end': '#FF8E53',
-                '--box-shadow': 'rgba(255, 105, 135, .3)',
-              }
-        }
-      >
+      <Button className={classes.button} style={color}>
         {'CSS variables'}
       </Button>
     </React.Fragment>
diff --git a/docs/src/pages/customization/components/DynamicCSSVariables.tsx b/docs/src/pages/customization/components/DynamicCSSVariables.tsx
new file mode 100644
index 00000000000000..630bdd623846f3
--- /dev/null
+++ b/docs/src/pages/customization/components/DynamicCSSVariables.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+
+const useStyles = makeStyles({
+  button: {
+    background: 'linear-gradient(45deg, var(--background-start) 30%, var(--background-end) 90%)',
+    borderRadius: 3,
+    border: 0,
+    color: 'white',
+    height: 48,
+    padding: '0 30px',
+    boxShadow: '0 3px 5px 2px var(--box-shadow)',
+  },
+});
+
+const blue = {
+  '--background-start': '#2196F3',
+  '--background-end': '#21CBF3',
+  '--box-shadow': 'rgba(33, 203, 243, .3)',
+} as React.CSSProperties;
+
+const defaultColor = {
+  '--background-start': '#FE6B8B',
+  '--background-end': '#FF8E53',
+  '--box-shadow': 'rgba(255, 105, 135, .3)',
+} as React.CSSProperties;
+
+export default function DynamicCSSVariables() {
+  const classes = useStyles();
+  const [color, setColor] = React.useState(defaultColor);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setColor(event.target.checked ? blue : defaultColor);
+  };
+
+  return (
+    <React.Fragment>
+      <FormControlLabel
+        control={
+          <Switch
+            checked={color === blue}
+            onChange={handleChange}
+            color="primary"
+            value="dynamic-class-name"
+          />
+        }
+        label="Blue"
+      />
+      <Button className={classes.button} style={color}>
+        {'CSS variables'}
+      </Button>
+    </React.Fragment>
+  );
+}