卡片的响应宽度答案

【问题标题】：Responsive width for Card卡片的响应宽度
【发布时间】：2017-02-04 08:58:34
【问题描述】：

我的组件如下所示：

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

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

我想做的是定义图像的宽度（或Card，如果可能的话）取决于屏幕的 DPI / 分辨率，使用 CSS 的 @media 之类的东西。

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

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

【问题讨论】：

标签： reactjs material-ui

【解决方案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%');
    }
  }
}

【讨论】：

【解决方案2】：

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

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

现场演示

【讨论】：