在 TS 中将 props 传递给 makeStyle答案

【问题标题】：Passing props to the makeStyle in TS在 TS 中将 props 传递给 makeStyle
【发布时间】：2020-12-24 19:18:16
【问题描述】：

如何将post.mainImage 传递给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>
  );
}

下面的代码通过 linter 没有问题。但是还是取不到前面的backgroundImage值。

【问题讨论】：

您应该创建一个最小的可重现示例（最好在 codesandbox 上）

标签： reactjs typescript material-ui next.js

【解决方案1】：

您可以为makeStyles 的调用提供类型变量（注意第一个必须是主题类型，第二个必须是道具类型）：

type Props = {
  post: Post;
};

const useStyles = makeStyles<Theme, Props>(theme =>
  createStyles({
    root: {
      maxWidth: '100%',
      backgroundImage: ({ post }) => `url("${post.mainImage}")`
    },
    // ...
  })
);

export default function HeroPost({ post }: Props) {
  const classes = useStyles({ post });

  return (
    // ...
  );
}

【讨论】：

我知道这个 hack 但正如上面提到的@Yatrix，可以通过 JS 但找不到 TypeScript 的解决方案。
修改了我的答案 - 这应该可以解决 TS 问题。
还是不行。我使用断点检查post 是否在backgroundImage: ({ post }) => post.mainImage 上定义。不幸的是它=未定义。
你是通过post或{ post }到useStyles吗？
CodeSandbox demo

【解决方案2】：

您需要在要访问的地方直接传递带有其类型的道具。这应该可以正常工作。

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

【讨论】：

【解决方案3】：

试试这个：useStyles 是一个钩子，它可以接受参数中的道具并返回方法 useStyles。

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

【讨论】：

【解决方案4】：

你像这样访问道具，

backgroundImage: props => props.backgroundImageProp

https://material-ui.com/styles/api/#returns-3

【讨论】：

这不起作用。必须与 TypeScript 相关。

【解决方案5】：

使用 Typescript 试试这个：

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

【讨论】：