Card コンポーネントは、主に以下の方法でサイズを変更できます。

• sxプロパティを使用する
• インラインスタイルを使用する

sxプロパティを使用する

MUI v5以降では、sxプロパティを使用してスタイルを直接指定することができます。

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

function SxStyledCard() {
  return (
    <Card sx={{ width: 300, height: 400 }}>
      <CardHeader title="タイトル"></CardHeader>
      <CardContent>
        <Typography variant="body2" color="text.secondary">
          ここに内容が入ります。
        </Typography>
      </CardContent>
    </Card>
  );
}

export default SxStyledCard;

インラインスタイルを使用する

Reactの標準的なインラインスタイルを使用して、スタイルを指定することも可能です。

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

function InlineStyledCard() {
  return (
    <Card style={{ width: 300, height: 200 }}>
      <CardHeader title="タイトル"></CardHeader>
      <CardContent>
        <Typography variant="body2" color="text.secondary">
          ここに内容が入ります。
        </Typography>
      </CardContent>
    </Card>
  );
}

export default InlineStyledCard;