Material-ui: create-react-app-with-typescript-next ts compilation error

[emmtqg]

Hi -
I cloned the example from https://github.com/mui-org/material-ui/tree/next/examples/create-react-app-with-typescript-next and built it with yarn. I got a ts complation error:

/create-react-app-with-typescript-next/src/ProTip.tsx(17,13):
Object is of type 'unknown'.  TS2571

    15 | const useStyles = makeStyles(theme => ({
    16 |   root: {
  > 17 |     margin: theme.spacing(6, 0, 3),
       |             ^
    18 |   },
    19 |   lightBulb: {
    20 |     verticalAlign: 'middle',
Compiling...
Failed to compile.

I googled and found a fix in issue #15400 by @nareshbhatia in the PS in the description which solved my problem too. I just wanted to highlight this for other people using this demo code.
__Fix is to__:

1. Import
   import { Theme } from '@material-ui/core/styles'

2. Change the code to type the Theme:

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    margin: theme.spacing(6, 0, 3),
  },
  lightBulb: {
    verticalAlign: 'middle',
    marginRight: theme.spacing(1),
  },
}));

I didn't reproduce it as it was literally a cloned copy straight from the demo example on GitHub mentioned above. Thanks!

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

[nareshbhatia]

@emmtqg you are right. The example was created with alpha.7 and the break happened in alpha.8. Looks like this was missed. You want to submit a PR?

[emmtqg]

@nareshbhatia 👍

[oliviertassinari]

@emmtqg Thank you for reporting the problem! What do you think of this change?

--- a/examples/create-react-app-with-typescript-next/src/App.tsx
+++ b/examples/create-react-app-with-typescript-next/src/App.tsx
@@ -5,10 +5,6 @@ import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 import ProTip from './ProTip';

-function MyBox(props: any) {
-  return <Box {...props} />;
-}
-
 function MadeWithLove() {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
@@ -24,13 +20,13 @@ function MadeWithLove() {
 export default function App() {
   return (
     <Container maxWidth="sm">
-      <MyBox my={4}>
+      <Box my={4}>
         <Typography variant="h4" component="h1" gutterBottom>
           Create React App v4-alpha example with TypeScript
         </Typography>
         <ProTip />
         <MadeWithLove />
-      </MyBox>
+      </Box>
     </Container>
   );
 }
diff --git a/examples/create-react-app-with-typescript-next/src/ProTip.tsx b/examples/create-react-app-with-typescript-next/src/ProTip.tsx
index 51c0ad5f8..ad6556974 100644
--- a/examples/create-react-app-with-typescript-next/src/ProTip.tsx
+++ b/examples/create-react-app-with-typescript-next/src/ProTip.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
 import Typography from '@material-ui/core/Typography';

-function LightBulbIcon(props: any) {
+function LightBulbIcon(props: SvgIconProps) {
   return (
     <SvgIcon {...props}>
       <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
@@ -12,15 +12,17 @@ function LightBulbIcon(props: any) {
   );
 }

-const useStyles = makeStyles(theme => ({
-  root: {
-    margin: theme.spacing(6, 0, 3),
-  },
-  lightBulb: {
-    verticalAlign: 'middle',
-    marginRight: theme.spacing(1),
-  },
-}));
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      margin: theme.spacing(6, 0, 3),
+    },
+    lightBulb: {
+      verticalAlign: 'middle',
+      marginRight: theme.spacing(1),
+    },
+  }),
+);

 export default function ProTip() {
   const classes = useStyles();

cc @merceyz

[emmtqg]

@oliviertassinari Looks great. I added another commit to combine theme and the styles import before I read your update and I've already PR'd the ProTip.tsx. It's covered under your fix though, so however you guys want to dispensate the PR is fine!

[eps1lon]

Theme related issue should be fixed with #15549.