using props in makeStyle throwing error Property 'height' does not exist on type '{}'

Question

I have the react component as below with material styles and Typescript

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

const useStyles = makeStyles({
  media: {
    height: props => props.height,
    ['@media (max-width:780px)']: { // eslint-disable-line no-useless-computed-key
      height: **props => props.minHeight**
    }
  },
});

interface ImageObject{
  image: string;
  title: string;
}

interface ImageCarouselProps {
  height: number;
  minHeight: number;
  pictures: ImageObject[];
}

export const ImageCarousel = (props: ImageCarouselProps) => {
  const classes = useStyles(props);
};

When I compile this I am getting the error Property 'height' does not exist on type '{}'. and Property 'minHeight' does not exist on type '{}' for accessing the height propery inside the makeStyles.

how can I fix this error ?

Answer 1

Needed a little modification and it works fine in my test. Basically add type to props:

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

interface ImageObject{
  image: string;
  title: string;
}

interface ImageCarouselProps {
  height: number;
  minHeight: number;
  // pictures: ImageObject[];
}

const useStyles = makeStyles({
  media: {
    height: (props: ImageCarouselProps) => props.height,
    ['@media (max-width:780px)']: { // eslint-disable-line no-useless-computed-key
      height: (props: ImageCarouselProps) => props.minHeight,
    }
  },
});

export default (props: ImageCarouselProps) => {
  const classes = useStyles(props);
  return <div className={classes.media}>test this div</div>
};

You probably won't have issues with the rest of the implementation - make sure to pass all the props when using the component and add the style class. Cheers!

P.S. I've commented the pictures prop in the interface, for the test to work.