Reactjs 在TS中将道具传递给makeStyle

如何将

post.main image

传递到

backgroundImage

样式

这是我的密码

import React from 'react';
import { Post } from '../interfaces';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

type Props = {
  post: Post;
}

const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
  createStyles({
    root: {
      maxWidth: '100%',
      backgroundImage: ({ post }) => post.mainImage
    },
    date: {
      margin: theme.spacing(1),
      marginLeft: theme.spacing(2)
    },
    heroimage: {
      maxWidth: '100%',
      height: 'auto',
      objectFit: 'cover'
    }
  })
);

export default function HeroPost({ post }: Props) {
  const classes = useStyles({ post });
  return (
    <Container className={classes.root}>
      <img alt={post.title} src={post.mainImage} className={classes.heroimage} />
    </Container>
  );
}

从“React”导入React；
从“../interfaces”导入{Post}；
从'@material ui/core/styles'导入{makeStyles，createStyles，Theme}；
从“@material ui/core/Container”导入容器；
类型道具={
岗位：岗位；
}
const useStyles=makeStyles（（主题：主题）=>
创建样式({
根目录：{
maxWidth:“100%”，
背景图片：（{post}）=>post.mainImage
},
日期：{
边距：主题。间距（1），
marginLeft：主题。间距（2）
},
英雄法师：{
maxWidth:“100%”，
高度：“自动”，
objectFit:“封面”
}
})
);
导出默认函数HeroPost（{post}:Props）{
const classes=useStyles（{post}）；
返回(
);
}

---

下面的代码从linter处顺利通过。但是仍然无法获取前面的

backgroundImage

值。

您可以为调用

makeStyles

提供类型变量（请注意，第一个必须是主题类型，第二个必须是道具类型）：

类型道具={
岗位：岗位；
};
const useStyles=makeStyles（主题=>
创建样式({
根目录：{
maxWidth:“100%”，
backgroundImage:（{post}）=>`url（${post.mainImage}”）`
},
// ...
})
);
导出默认函数HeroPost（{post}:Props）{
const classes=useStyles（{post}）；
返回(
// ...
);
}

您可以像这样访问道具

backgroundImage:props=>props.backgroundImageProp

---

试试这个：useStyles是一个钩子，它可以在参数中获取道具并返回useStyles方法

const useStyles = (props: Props) => {
       const {post} = props;
    
       return makeStyles(theme => ({
           root: {
              maxWidth: '100%',
              backgroundImage: post.mainImage
           },
      }))
    } 

---

使用Typescript尝试以下操作：

   const useStyles = makeStyles(theme => ({
           root: ({mainImage}: {mainImage: string}) => ({
                 ...
                 backgroundImage: mainImage
           })        
    })
        
    const component: React.FC => {
        const classes = useStyles({mainImage})
         return ...
    }

---

您需要将道具及其类型直接传递到您想要访问它的位置。这应该行得通

type BgProps = {
  mainImage: string;
}

const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
  createStyles({
    root: {
      maxWidth: '100%',
      backgroundImage: (props: BgProps) => props.mainImage
    },
    date: {
      margin: theme.spacing(1),
      marginLeft: theme.spacing(2)
    }
  })
);

BgProps类型={
主图像：字符串；
}
const useStyles=makeStyles（（主题：主题）=>
创建样式({
根目录：{
maxWidth:“100%”，
背景图片：（props:BgProps）=>props.mainImage
},
日期：{
边距：主题。间距（1），
marginLeft：主题。间距（2）
}
})
);

这不起作用。必须与TypeScript有关。我知道这个黑客行为，但正如上面提到的@Yatrix，可以通过JS，但无法找到TypeScript的解决方案。修改了我的答案-这应该可以解决TS问题。它仍然不起作用。我使用断点检查

post

是否在

backgroundImage:（{post}=>post.mainImage

上定义。不幸的是，它=未定义。您是否将

post

或

{post}

传递给

useStyles

？您应该创建一个最小的可复制示例（最好是打开）

type BgProps = {
  mainImage: string;
}

const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
  createStyles({
    root: {
      maxWidth: '100%',
      backgroundImage: (props: BgProps) => props.mainImage
    },
    date: {
      margin: theme.spacing(1),
      marginLeft: theme.spacing(2)
    }
  })
);