Pass props to classes when using Typescript with Material-UI useStyles

Question

I'm converting a project from js to Typescript, and in one component I pass props to the material-ui theme to change it based on input.

Relevant sections of the react functional component are included below:

import React from 'react';
import {makeStyles} from "@material-ui/core/styles";
// @ts-ignore
import {SketchPicker} from 'react-color';
import InputAdornment from "@material-ui/core/InputAdornment";


const useStyles = makeStyles(theme => ({
    colorSwatch: props => ({
        width: theme.spacing(5),
        height: 30,
        border: '1px solid black',
        borderRadius: theme.spacing(0.25),
        backgroundColor: props.embedColor,
    }),
}));


export default function FormFragmentEmbed(props: any) {
    const { register, errors } = props.form;
    const { defaultValues } = props;

    const [colorPicker, setColorPicker] = React.useState<string>(defaultValues.embedColor);

    const classes = useStyles({
        embedColor: watchColor,
    });


    return (    
                <TextField
                    name={'embedColor'}
                    label={'Embed Color'}
                    defaultValue={colorPicker}
                    error={errors.embedColor !== undefined}
                    inputRef={register({})}
                    InputProps={{
                        endAdornment: <InputAdornment position="end"><Box className={classes.colorSwatch}/></InputAdornment>
                    }}
               />
}

But the line where I define backgroundColor in makeStyles gives me an error

TS2339: Property 'embedColor' does not exist on type '{}'.

How do I fix that error?

Also semi-related, as you can see I added a linting line to ignore the import for SketchPicker because TS was spitting out an error when I tried to import that. What would be the proper way to import that so it wouldn't cause an error?

Mohit Mohit · Accepted Answer · 2020-06-23T05:51:08

Try using this syntax,

const useStyles = makeStyles({
colorSwatch: props => ({
    width: theme.spacing(5),
    height: 30,
    border: '1px solid black',
    borderRadius: theme.spacing(0.25),
    backgroundColor: props.embedColor,
  }),
});

    export default function FormFragmentEmbed(props: any) {
    const { register, errors } = props.form;
    const { defaultValues } = props;

    const [colorPicker, setColorPicker] = React.useState<string>(defaultValues.embedColor);

    const classes = useStyles(defaultValues);


    return (    
                <TextField
                    name={'embedColor'}
                    label={'Embed Color'}
                    defaultValue={colorPicker}
                    error={errors.embedColor !== undefined}
                    inputRef={register({})}
                    InputProps={{
                        endAdornment: <InputAdornment position="end"><Box className={classes.colorSwatch}/></InputAdornment>
                    }}
               />
}

Now your code should work fine I guess. Official documentation link to use props with makeStyles and useStyles.

Pass props to classes when using Typescript with Material-UI useStyles

1 Answers