如何为卡片制作可重复使用的组件以及如何使用 material-ui 的新 makeStyles？

Question

在demo.js中，我想使用Card及其CardHeader并将措辞放在CardContent中。 此外，我还将在其他文件中使用CardComponent 。 如何使CardComponent可重用？

示例代码： https://codesandbox.io/s/basiccard-material-demo-forked-kkshx?file=/demo.js

下面是demo.js的代码：

import * as React from "react";

import CardComponent from "./CardComponent";

export default function BasicCard() {
  return (
    <>
      <h1>Hello</h1>
      <CardComponent />
    </>
  );
}

以下是CardComponent的代码：

import React from "react";

import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { CardHeader } from "@mui/material";

const CardComponent = () => {
  const CardStyle = {
    maxWidth: 500,
    margin: "0 auto",
    marginBottom: "1rem",
    marginTop: "1rem"
  };
  return (
    <Card sx={{ minWidth: 275 }} elevation={5} style={CardStyle}>
      <CardHeader title="Card Header Title here" />
      <CardContent>//content here</CardContent>
    </Card>
  );
};

export default CardComponent;

我在这个组件下还有另一个问题。 来自 material-ui4 的 mui5 有点令人困惑，因为我不能再使用makeStyles了。 我尝试在代码和 bx 示例中添加它，但是，它会说找不到依赖项：

import { makeStyles } from '@mui/styles';

因此，我选择了 const CardStyle 。 关于如何实现更新版本的makeStyles的任何帮助？ 另外，我是否需要从 material-ui 安装其他依赖项才能使其工作？ 下面是package.json file 。

也在： https://www.reddit.com/r/reactjs/comments/sgqhh3/how_do_i_make_a_reusable_component_for_the_cards/

Answer 1

您可以将道具添加到您的子卡片组件中使其可重复使用。 您可以添加任意数量的道具，使用相同的图案制作不同的卡片。

要将 styles 提供给 mui v5 中的组件，您必须使用样式。 您必须从 @mui/material/styles 导入它

这是新卡片组件的完整代码

import React from "react";
import {styled} from "@mui/material/styles"
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import { CardHeader } from "@mui/material";

const StyledCard = styled((props) => (
  <Card
      {...props}
  />
))(({ theme }) => ({
  maxWidth: 500,
    margin: "0 auto",
    marginBottom: "1rem",
    marginTop: "1rem"
}));


const CardComponent = (props) => {
  const {title,content}=props

  return (
    <StyledCard sx={{ minWidth: 275 }} elevation={5}>
      <CardHeader title={title} />
      <CardContent>{content}</CardContent>
    </StyledCard>
  );
};

export default CardComponent;

这里是整个代码框。