在 makeStyle 中使用道具抛出错误属性“高度”在类型“{}”上不存在

Question

我有如下的反应组件，带有材料样式和打字稿

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);
};

当我编译这个时，我收到错误Property 'height' does not exist on type '{}'。并且用于访问 makeStyles 中的高度属性的类型“{}”上不存在属性“minHeight”。

我该如何解决这个错误？

Answer 1

需要一些修改，它在我的测试中运行良好。基本上向道具添加类型：

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>
};

您可能不会遇到其余实现的问题 - 确保在使用组件时传递所有道具并添加样式类。干杯!

PS 我已经评论了界面中的图片道具，以便测试工作。