Question

我有以下带有材料样式和Typescript的react组件

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

编译时，我得到错误类型“ {}”上不存在属性“ height” 。并且在访问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>
};

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

P.S。我在界面中评论了图片道具，以便测试正常工作。

Answer 2

对于将样式分离到另一个文件中的人来说，这对我来说效果最好：

const classes: Record<string, string> = useStyles({ valueVariable: value });

然后可以在 .style.ts 文件中使用：

classname:{
  color: (prop: { valueVariable: number }) => prop.valueVariable,
},

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

2 个答案: