heightが効かない

Question

Material UIを利用してimageにheight(=140)を指定しておりますが、効きません。
下記のようなイメージです。
https://next--material-ui.netlify.app/ja/components/image-list/#woven-image-list

            <ImageListItem
              key={idx}
              sx={{
                width: 120,
                height: 140,
                '&.MuiImageListItem-img': {
                  width: 120,
                  height: 140,
                },
              }}>
                <img src={image} width="120" height="140" loading="lazy" />
                <img src={image} width="120" height="140" loading="lazy" />
                <img src={image} width="120" height="140" loading="lazy" />
            </ImageListItem>

開発者ツールで確認したところ、height autoのチェックを消すと
changesに以下のように表示されました。（＋width, height指定は効いていませんでしたが、望ましい表示になりました。）

.css-3sjlvs-MuiImageListItem-root 
.MuiImageListItem-img {
height: auto;
}

※imgタグはどちらも効いておらず、widthも100%になっていました。
.css-3sjlvsが何を指しているのか検索して分からず（擬似要素？）
imgの高さ指定が解決できておりません。

どのようにheight autoを消すべきか、なぜheight指定が効かないのでしょうか。
解決のお力添えいただけますと幸いです。
よろしくお願い致します。

Comments

[thyda.eiqau]

指定したスタイルが期待通りに適用されないのは詳細度の問題だと思いますが、 "imageにheight(=100)を指定しております" の具体的なCSSのコードをご提示いただかない限りは改善案を出すのは困難に思います。それを適用したい先のHTMLのコードも必要です。

[Lhankor_Mhy]

「height autoのチェックを消す」と、height: 100px は効いたのでしょうか？
それとも、それでも効かなかったのでしょうか？

[Lhankor_Mhy]

また、「下記のようなイメージ」とありますが、ご提示のリンク先は作例がたくさんあるページのようでした。どの例が「下記のようなイメージ」に当たるのでしょうか？

[miyu_]

thyda.eiqauさん
Lhankor_Mhyさん
ご回答いただきありがとうございます。

取り急ぎ、Lhankor_Mhyさんから頂いた件に関して、
①確認したところ、効いていませんでした。height autoを解除するだけでも良いことが分かりました。
②こちら#woven-image-listに遷移されるようにリンクを貼っておりますので、遷移先で出るものが該当します。

[miyu_]

thyda.eiqauさん

コードの方補足させて頂きました。
お手隙でご確認いただけますと幸いです。
よろしくお願い致します。

[Lhankor_Mhy]

「height(=100)」 とおっしゃる部分は、
height: '140',
のことだと考えていいですか？

また、その場合は、140と100を間違えていたので効いていないように見えただけ、ということはないでしょうか？

[miyu_]

失礼致しました。
heightは140になります。

[Lhankor_Mhy]

ご提示のリンク先では 140 と数値ですが、これを '140' と文字列にした意図を教えていただけますか？

[miyu_]

大変失礼致しました。
こちら、文字列でもエラーが出ていなかっため気づかなかったのですが、140の間違いです。
修正致しましたので再度ご確認いただけますと幸いです。

[Lhankor_Mhy]

ご修正ありがとうございます。

Answer 1

img要素にheightを当てるのであれば、

'&.MuiImageListItem-img': {
ではなくて、
'.MuiImageListItem-img': {
ではないかな、と思いました。

Comments

[miyu_]

こちら試したところ解決しました！
root属性に対する指定も不要で、下記修正で反映致しました。
sx={{
'.MuiImageListItem-img': {
width: 120,
height: 140,
}
また、imgに対する指定も不要でした。
独力では解決できず、お力添え頂き大変感謝しております。

&は下記のようにstyledの仕様で用いる？ようでした。
https://mui.com/components/switches/#customization

改めて、教えて頂きありがとうございました。

[Lhankor_Mhy]

お役に立てたようで何よりです

ご提示のページに書かれているように
'& .MuiImageListItem-img': {
と子孫結合子を入れる形でもいいのだろうと思います。