css - Material-UI根据断点改变IMG

Question

我很熟悉使用断点来更改高度、宽度、字体大小等样式，但我找不到根据屏幕大小更改图像的示例。

具体来说，我想根据屏幕尺寸用新图像替换图像。我的假设是我希望将图像设置为它自己的组件来启动...

import  React from "react";

export default function ResponsiveLogo() {

  return(
    <div>
      <img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder" 
       alt="logo placeholder"/>
    </div>
  )

}

我相信我应该使用 useMediaQuery 来处理这个问题，但我不确定语法。因为我在寻找一个在一个断点处执行此操作的示例之前没有使用过 useMediaQuery，所以我知道如何继续。

举个例子，假设我们想要为小于 Material-UI 的“sm”断点 (600px) 的任何屏幕更改图像，并且我们想要交换此图像:“https://dummyimage.com/200x200/4169e1/fff.png&text= Logo +占位符"

感谢任何指导!

Answer 1

我找到了一种使用 MUI 组件在 MUIv5 上执行此操作的简单方法，但您必须为图像元素使用 MUI Box 组件，这样您才能访问 sx 属性。 (他们在官方文档中使用 Box 作为图像示例，所以我认为无论如何都推荐它)

想法是，不是使用“src”属性设置图像源，而是通过 sx 属性中的“content”CSS 属性设置它。这样在设置图片url的时候就可以方便的访问MUI主题断点了:

import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";

<Box
    component="img"
    sx={{
        content: {
            xs: `url(${SmallLogo})`, //img src from xs up to md
            md: `url(${BigLogo})`,  //img src from md and up
        }
    }}
    alt="Logo"
/>