質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Q&A

解決済

1回答

2110閲覧

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

masa112m

総合スコア21

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

0グッド

0クリップ

投稿2020/06/30 03:18

編集2020/06/30 04:05

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 );

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/06/30 03:51

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

回答1

0

ベストアンサー

こんにちは
以下の2点

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

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

diff

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

投稿2020/07/02 03:42

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jun68ykt

2020/07/07 14:12

@masa112mさん 上記の回答で、ご質問は解決しましたでしょうか? 不明点があり解決していないのでしたら、コメントからご質問頂ければと思います。解決していましたら、このご質問を解決済みにして頂きたくお願いいたします。
masa112m

2020/07/08 06:25

確認が遅くなりすいません。うまくいきました。ありがとうございました。
jun68ykt

2020/07/08 09:11

どういたしまして???? > うまくいきました。 とのことでよかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問