material-uiでCardHeaderにTypographyを適用させたいです

material-uiでCardHeaderの中にTypographyを書いたのですが、表示されませんでした。CardHeaderにTypographyを適用させることはできますか？
以下renderの中身です。

typescript
1    return (
2      <div>
3        <Card elevation={1} style={{ maxWidth: "400px" }}>
4          <CardHeader>
5            <Typography variant="h5">title</Typography>
6          </CardHeader>
7          <CardContent>
8            aaa
9            <link
10              href="https://fonts.googleapis.com/css?family=M+PLUS+1p"
11              rel="stylesheet"
12            ></link>
13          </CardContent>
14          <CardContent>
15            bbb
16          </CardContent>
17        </Card>
18      </div>
19    );

m.ts10806

2020/06/30 03:51

タイトルになにも要件がなく、タグを繰り返しているだけです。要件を記載してください

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは
以下の２点

表示したい文字列は、prop title で渡す。
使用するTypographyの props を prop titleTypographyProps で渡す。

を修正し、下記のようにしてみると、いかがでしょうか？

diff
1- <CardHeader>
2-   <Typography variant="h5">title</Typography>
3- </CardHeader>
4+ <CardHeader title="title" titleTypographyProps={{ variant: "h5" }} />