如何為卡片制作可重復使用的組件以及如何使用 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;

這里是整個代碼框。