material-ui typescript makeStyles() types

Question

I've been searching up how to get these type correct but I cannot find anything useful without using any, which I do not want to use.

I have this code that works and styles the component where it is used correctly:

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
    mainContainer: {
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
    },
    wrapper: {
        display: 'flex',
        borderRadius: '20px',
        maxWidth: '459px',
        justifyContent: "center",
        maxHeight: '526px',
        padding: '0px',
        border: `2px solid ${theme.palette.primary.lightPurple}`
    },
    logo: {
        marginBottom: "40px"
    },
    logInText: {
        fontWeight: "700"
    },
    signUpContainer: {
        margin: '3px',
        padding: '80px',
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(4, 0, 0),
        color: '#fff',
        fontWeight: 'bold'
    },
    link: {
        color: theme.palette.primary.orange,
    },
    label: {
        fontSize: '14px'
    },
    anzaLogo: {
        marginBottom: '30px'
    },
    loginInput: {
        height: '40px',
        alignItems: 'center',
        fontSize: '13px',
        '&::before': {
            content: '""',
            position: 'absolute',
            display: 'block',
            left: '1px',
            width: '8px',
            height: '38px',
            borderBottomLeftRadius: '3px',
            borderTopLeftRadius: '3px',
            backgroundColor: '#F29A4A'
        }

    },
    innerInput: {
        padding: '11px 12px'
    },
    labelOutlined: {
        fontSize: '14px',
        transform: "translate(20px, 15px) scale(1)",
    },
}))

giving me this INSANE typescript error:

src/components/Signup/SignupStyles.tsx:3:30 - error TS2345: Argument of type '(theme: Theme) => { mainContainer: { height: string; display: string; justifyContent: string; alignItems: string; flexDirection: "column"; }; wrapper: { display: string; borderRadius: string; ... 4 more ...; border: string; }; ... 10 more ...; labelOutlined: { ...; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "form" | "label" | "link" | "submit" | "mainContainer" | "wrapper" | "logo" | "logInText" | "signUpContainer" | "anzaLogo" | "loginInput" | "innerInput" | "labelOutlined">'.
  Type '(theme: Theme) => { mainContainer: { height: string; display: string; justifyContent: string; alignItems: string; flexDirection: "column"; }; wrapper: { display: string; borderRadius: string; ... 4 more ...; border: string; }; ... 10 more ...; labelOutlined: { ...; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "form" | "label" | "link" | "submit" | "mainContainer" | "wrapper" | "logo" | "logInText" | "signUpContainer" | "anzaLogo" | "loginInput" | "innerInput" | "labelOutlined">'.
    Call signature return types '{ mainContainer: { height: string; display: string; justifyContent: string; alignItems: string; flexDirection: "column"; }; wrapper: { display: string; borderRadius: string; maxWidth: string; justifyContent: string; maxHeight: string; padding: string; border: string; }; ... 10 more ...; labelOutlined: { ...; }; }' and 'StyleRules<{}, "form" | "label" | "link" | "submit" | "mainContainer" | "wrapper" | "logo" | "logInText" | "signUpContainer" | "anzaLogo" | "loginInput" | "innerInput" | "labelOutlined">' are incompatible.
      The types of 'logInText' are incompatible between these types.
        Type '{ fontWeight: "700"; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
          Type '{ fontWeight: "700"; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'fontWeight' are incompatible.
              Type '"700"' is not assignable to type 'FontWeightProperty | PropsFunc<{}, FontWeightProperty | undefined> | undefined'.

  3 const useStyles = makeStyles((theme) => ({
                                 ~~~~~~~~~~~~~
  4     mainContainer: {
    ~~~~~~~~~~~~~~~~~~~~
... 
 71     },
    ~~~~~~
 72 }))
    ~~

What type do I have to declare for the theme parameter? importing and using the Theme type still gives same error.

When I turn the function into just an object, it works - but I require using the theme parameter to get specific colors and other styles as you can see.

Any ideas? This should be a common thing to take place within Typescript.

Pete · Accepted Answer · 2021-04-20 17:28:32Z

3

add import:

import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';

and then:

const useStyles = makeStyles((theme: Theme) => createStyles({}))

edited Apr 20, 2021 at 17:28

answered Apr 20, 2021 at 17:23

Pete

615 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Seth Lutske · Accepted Answer · 2021-04-20 17:19:20Z

0

This has worked for me - use the typeof theme.

import myTheme from '../myTheme'

const useStyles = makeStyles((theme: typeof myTheme) => ({
  ...
}))

Your specific error is because TS doesn't like the assignment of the string "700" to fontWeight - use a number 700.

edited Apr 20, 2021 at 17:19

answered Apr 20, 2021 at 17:08

Seth Lutske

11k9 gold badges57 silver badges122 bronze badges

2 Comments

Zac Over a year ago

that does in fact fix type errors when referencing the theme parameter, however, my main issue is with the return type of the whole object.

Seth Lutske Over a year ago

I edited my answer - you need to change "700" to a number - 700

Collectives™ on Stack Overflow

material-ui typescript makeStyles() types

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related