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

当我编译它时，我收到错误属性"高度"在类型"{}"上不存在。 属性">minHeight"在类型"{}"上不存在，用于访问makeStyles内部的高度属性。

如何修复此错误？

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

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

附言我已经在界面中评论了图片道具，以便测试正常工作。

Answer 2

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

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

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

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