Отзывчивой ширина карты

Question

Моего компонента выглядит следующим образом:

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

Я заметил, что изображение использует почти 100% ширину страницы, что нежелательно в моей ситуации.

То, что я хотел бы сделать, это определить ширину изображения (или карты, если это возможно) в зависимости от DPI/разрешение экрана, используя что-то вроде 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%'); 
    } 
    } 
}