teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップMaterial-UIに関する質問heightが効かない

編集履歴

質問編集履歴

5

typo

2022/02/28 04:31

投稿

miyu_
miyu_

スコア70

test CHANGED
File without changes
test CHANGED
@@ -5,11 +5,11 @@
5
5
  <ImageListItem
6
6
  key={idx}
7
7
  sx={{
8
- width: '120',
8
+ width: 120,
9
- height: '140',
9
+ height: 140,
10
10
  '&.MuiImageListItem-img': {
11
- width: '120',
11
+ width: 120,
12
- height: '140',
12
+ height: 140,
13
13
  },
14
14
  }}>
15
15
  <img src={image} width="120" height="140" loading="lazy" />
Material-UICSS3HTML5React.js

4

go

2022/02/28 02:58

投稿

miyu_
miyu_

スコア70

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- Material UIを利用してimageにheight(=100)を指定しておりますが、効きません。
1
+ Material UIを利用してimageにheight(=140)を指定しておりますが、効きません。
2
2
  下記のようなイメージです。
3
3
  https://next--material-ui.netlify.app/ja/components/image-list/#woven-image-list
4
4
  ```ここに言語を入力
Material-UICSS3HTML5React.js

3

誤字

2022/02/28 01:32

投稿

miyu_
miyu_

スコア70

test CHANGED
File without changes
test CHANGED
@@ -27,6 +27,7 @@
27
27
  height: auto;
28
28
  }
29
29
  ```
30
+ ※imgタグはどちらも効いておらず、widthも100%になっていました。
30
31
  .css-3sjlvsが何を指しているのか検索して分からず（擬似要素？）
31
32
  imgの高さ指定が解決できておりません。
32
33
 
Material-UICSS3HTML5React.js

2

誤字

2022/02/28 01:27

投稿

miyu_
miyu_

スコア70

test CHANGED
File without changes
test CHANGED
@@ -19,7 +19,7 @@
19
19
  ```
20
20
 
21
21
  開発者ツールで確認したところ、height autoのチェックを消すと
22
- changesに以下のように表示されました。
22
+ changesに以下のように表示されました。（＋width, height指定は効いていませんでしたが、望ましい表示になりました。）
23
23
 
24
24
  ```CSS
25
25
  .css-3sjlvs-MuiImageListItem-root
Material-UICSS3HTML5React.js

1

補足

2022/02/28 01:25

投稿

miyu_
miyu_

スコア70

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,22 @@
1
1
  Material UIを利用してimageにheight(=100)を指定しておりますが、効きません。
2
2
  下記のようなイメージです。
3
3
  https://next--material-ui.netlify.app/ja/components/image-list/#woven-image-list
4
+ ```ここに言語を入力
5
+ <ImageListItem
6
+ key={idx}
7
+ sx={{
8
+ width: '120',
9
+ height: '140',
10
+ '&.MuiImageListItem-img': {
11
+ width: '120',
12
+ height: '140',
13
+ },
14
+ }}>
15
+ <img src={image} width="120" height="140" loading="lazy" />
16
+ <img src={image} width="120" height="140" loading="lazy" />
17
+ <img src={image} width="120" height="140" loading="lazy" />
18
+ </ImageListItem>
19
+ ```
4
20
 
5
21
  開発者ツールで確認したところ、height autoのチェックを消すと
6
22
  changesに以下のように表示されました。
Material-UICSS3HTML5React.js