Запросы мультимедиа в компонентах Material-ui

Я использую компоненты Material-ui в проекте ReactJs, по какой-то причине мне нужно настроить некоторые компоненты, чтобы они реагировали в соответствии с шириной экрана.

Я добавил media query и передал его как атрибут стиля в компонентах, но не работал, какую-либо идею?

Я использую такой код

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}

<Drawer
  .....
  containerStyle = {drawerStyle}
 >
 </Drawer>

Код работает только в Интернете, а на мобильных устройствах нет никакого эффекта. даже код CSS не применяется, я проверил в dev. приставка. Я использую версию материала-ui 0.18.7.

Любая помощь будет оценена по достоинству.

PS: В соответствии с требованием мне нужно внести некоторые изменения в соответствии с размером экрана с помощью CSS.

Ответы

Ответ 1

Используя атрибут точки прерывания темы, вы можете использовать те же точки прерывания, которые использовались для компонентов Grid и Hidden непосредственно в вашем компоненте.

API

theme.breakpoints.up(key) => media query

аргументы

key (String | Number): ключ точки останова (xs, sm и т.д.) или число ширины экрана в пикселях.

Возвращает медиа-запрос: строка медиа-запроса, готовая для использования с JSS.

Примеры

const styles = theme => ({
  root: {
    backgroundColor: 'blue',
    [theme.breakpoints.up('md')]: {
      backgroundColor: 'red',
    },
  },
});

Ответ 2

Итак, вот что вы можете сделать (быстрый взлом). Материал UI будет жаловаться на то, что вы делаете ненужный расчет.

const styles = {
  drawerWidth: {
    width: '50%',
    ['@media (min-width:780px)']: { // eslint-disable-line no-useless-computed-key
      width: '80%'
    }
  }
}

Ответ 3

Я решил эту проблему, выполнив что-то вроде этого:

const dropzoneStyles = 
window.screen.availWidth < 780 ? 
{ 'width': '150px', 'height': '150px', 'border': 'none', 'borderRadius': '50%' }
: { 'width': '200px', 'height': '200px', 'border': 'none', 'borderRadius': '50%' };

а затем добавляет его как атрибут в элементе интерфейса материала:

<Dropzone style={dropzoneStyles} onDrop={this.handleDrop.bind(this)}>

Таким образом, ключ заключается в том, чтобы узнать окно экрана, используя window.screen.availWidth. И вы будете делать это в функции render(). Надеюсь, это поможет!

Ответ 4

В свойстве style в React вы можете определять только свойства, которые вы можете определить в обычном DOM-элементе (например, вы не можете включать запросы к мультимедиа)

То, как вы можете включить медиа-запросы для этого компонента, будет передавать имя класса в компонент Drawer

<Drawer containerClassName="someClass" />

А затем в файле CSS вы делаете что-то вроде этого

@media(min-width: 780px){
  .someClass {
    width: 50%!important;
  }
}

Ответ 5

У вас есть опечатка в медиа-запросе. Вы должны использовать следующий синтаксис, и он будет работать как положено:

const drawerWidth = {
  width: '50%',
  '@media (min-width: 780px)' : {
    width: '80%'
  }
}

вместо

const drawerWidth = {
  width: '50%',
  '@media(minWidth: 780px)' : {
    width: '80%'
  }
}