material-uiでカードを表示

ひとまずスタイルを用意します。

const useStyles = (theme: Theme) => {
    return makeStyles({
        card: {
            maxWidth:400
        },
        content: {
            marginTop:theme.spacing(1)
        }
    })
}

CardHeaderにヘッダー部分を、
CardContentにCardの詳細を入れます。

const CardSample = () => {
    let theme = useTheme()
    let styles = useStyles(theme)()
    return (
        <Card className={styles.card}>
	   <CardHeader title="Hoge氏"
                subheader="住所不定"
            avatar={
                <Avatar>
                    <PersonIcon></PersonIcon>
                </Avatar>
            }>

            </CardHeader>
            <CardContent>
                <Typography variant="h4">
                    タイトル
                </Typography>
                <Typography variant="subtitle1">
                    何らかの記述
                </Typography>
                <Typography className={styles.content}>
                    様々な詳細な記述を色々と書いたり消したり追加したりとにかく色々な記述。
                </Typography>
            </CardContent>
        </Card>
    )
}

export default CardSample