Material ui 卡片响应宽度

我的组件如下所示：

<Card>
    <CardMedia>
        <img src="http://images.memes.com/character/meme/evil-toddler"/>
    </CardMedia>
</Card>

我注意到图像使用了几乎100%的页面宽度，这在我的情况下是不可取的

我想做的是根据屏幕的DPI/分辨率，使用CSS的@media之类的东西来定义图像的宽度（或者如果可能的话定义卡片）

例如，如果DPI>720dp，则卡应占据屏幕的60%，否则为90%。差不多吧

---

我尝试使用自定义CSS，但它不起作用，因为库使用内联CSS，它会覆盖我的属性。

您可以覆盖卡本身上的样式。要使用屏幕分辨率执行此操作，可以使用

window.screen.availWidth

获取宽度。以下是一个例子：

从“React”导入React；
从“物料界面/卡片”导入{Card，CardMedia}；
/**
*以百分比的形式呈现具有给定宽度的卡。
*@param{String}widthAsPercent
*@returns{XML}
*/
让renderCardWithWidth=（widthAsPercent）=>{
返回
;
};
导出默认类响应卡扩展React.Component{
render（）{
让宽度=window.screen.availWidth；
如果（宽度>720）{
返回renderCardWithWidth（'60%”）；
}否则{
返回renderCardWithWidth（'90%”）；
}
}
}