卡片的响应宽度

Question

我的组件如下所示：

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

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

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

例如，如果 DPI > 720dp，则卡片应占据屏幕的 60%，否则为 90%。诸如此类。

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

Answer 1

您可以覆盖卡片本身的样式。要使用屏幕分辨率执行此操作，您可以使用 window.screen.availWidth 获取宽度。这是一个例子：

import React from 'react';
import {Card, CardMedia} from 'material-ui/Card';

/**
 * Render the card with the given width as a percent.
 * @param {String} widthAsPercent
 * @returns {XML}
 */
let renderCardWithWidth = (widthAsPercent) => {
  return <Card style={{width:widthAsPercent}}>
    <CardMedia>
      <img src='http://images.memes.com/character/meme/evil-toddler'/>
    </CardMedia>
  </Card>;
};

export default class ResponsiveCard extends React.Component {
  render() {
    let width = window.screen.availWidth;
    if (width > 720) {
      return renderCardWithWidth('60%');
    } else {
      return renderCardWithWidth('90%');
    }
  }
}

Answer 2

在 MUI v5 中，您可以使用 sx 属性并传递一个 responsive width，其中值根据当前断点而变化：

<Card
  sx={{
    width: {
      sx: 1.0, // 100%
      sm: 250,
      md: 350,
    },
  }}
>

卡片的响应宽度

Responsive width for Card

reactjs

material-ui

现场演示