[docs] Add typescript version of AdaptingStyledComponents

Author: merceyz

docs/src/pages/styles/basics/AdaptingStyledComponents.js

@@ -19,13 +19,11 @@ const MyButton = styled(({ color, ...other }) => <Button {...other} />)({
   margin: 8,
 });
 
-function AdaptingStyledComponents() {
+export default function AdaptingStyledComponents() {
   return (
     <React.Fragment>
       <MyButton color="red">Red</MyButton>
       <MyButton color="blue">Blue</MyButton>
     </React.Fragment>
   );
 }
-
-export default AdaptingStyledComponents;

docs/src/pages/styles/basics/AdaptingStyledComponents.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled } from '@material-ui/styles';
+import Button, { ButtonProps } from '@material-ui/core/Button';
+import { Omit } from '@material-ui/types';
+
+interface MyButtonProps {
+  color: 'red' | 'blue';
+}
+
+const MyButton = styled(
+  ({ color, ...other }: MyButtonProps & Omit<ButtonProps, keyof MyButtonProps>) => (
+    <Button {...other} />
+  ),
+)({
+  background: (props: MyButtonProps) =>
+    props.color === 'red'
+      ? 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
+      : 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
+  border: 0,
+  borderRadius: 3,
+  boxShadow: (props: MyButtonProps) =>
+    props.color === 'red'
+      ? '0 3px 5px 2px rgba(255, 105, 135, .3)'
+      : '0 3px 5px 2px rgba(33, 203, 243, .3)',
+  color: 'white',
+  height: 48,
+  padding: '0 30px',
+  margin: 8,
+});
+
+export default function AdaptingStyledComponents() {
+  return (
+    <React.Fragment>
+      <MyButton color="red">Red</MyButton>
+      <MyButton color="blue">Blue</MyButton>
+    </React.Fragment>
+  );
+}

docs/src/pages/system/basics/JSS.js

@@ -9,12 +9,10 @@ const Box = styled('div')(
   ),
 );
 
-function JSS() {
+export default function JSS() {
   return (
     <Box color="white" bgcolor="palevioletred" p={1}>
       JSS
     </Box>
   );
 }
-
-export default JSS;

docs/src/pages/system/basics/JSS.tsx

@@ -9,12 +9,10 @@ const Box = styled('div')(
   ),
 );
 
-function JSS() {
+export default function JSS() {
   return (
     <Box color="white" bgcolor="palevioletred" p={1}>
       JSS
     </Box>
   );
 }
-
-export default JSS;