Доступ к точкам останова MaterialUI внутри CSS - PullRequest
Новая
       18

Доступ к точкам останова MaterialUI внутри CSS

0 голосов
/ 26 мая 2018

В рамках проекта create-реакции-приложения я использую material-ui 1.x и создаю собственную тему с пользовательскими точками останова, как таковые. 

import {  createMuiTheme } from '@material-ui/core/styles';
let customTheme = createMuiTheme({
  breakpoints:{
    values:{
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920
    }
  }
});
export default customTheme;

Можно ли ссылаться на эти точки остановавнутри .css файлаНапример, у меня есть компонент макета, который использует медиа-запросы ... 

...
@media screen
 and (max-width: 850px) and (min-width: 640px){  /* <--- HERE   */
    .layout-content {
        grid-template-columns: 1fr 200px 200px 200px 1fr;
        grid-template-rows: 64px 
                        auto
                        1fr
                        auto;
        grid-template-areas: "h h h h h"
                             ". l m m ."
                             ". r m m ."
                             "f f f f f";
    }
}
...

Можно ли получить значения для этих медиа-запросов CSS из объекта темы materail-ui?

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

OK.Это привело к небольшому погружению с моей стороны.Реагирующий материал-пользовательский интерфейс (https://material -ui.com ) включает CSS-in-JS, поэтому, если вы решите работать с этим фреймворком, действительно имеет смысл пойти по этому пути, что означает преобразование моего CSSв JSS, а затем доступ к объекту темы material-ui, чтобы получить точки прерывания медиа.Тот же самый фрагмент CSS теперь выглядит следующим образом 

 [theme.breakpoints.only('sm')]:{
    layoutContent: {
      gridTemplateColumns: '1fr 200px 200px 200px 1fr',
      gridTemplateRows:`64px
                        auto
                        1fr
                        auto`,
      gridTemplateAreas: `"h h h h h"
                          ". l m m ."
                          ". r m m ."
                          "f f f f f"`,
    }
  },

Обратите внимание, что теперь это JSON, а не CSS.

0 голосов
/ 26 мая 2018

Если вы ориентируетесь только на современные браузеры, вы можете использовать пользовательские переменные CSS.Установите их в Javascript 

for (key in breakpoints.values) {
    document.body.style.setProperty(
        "--theme-breakpoint-" + key,
        breakpoint.values[key] + "px"
    );
}

, а затем ссылайтесь на них в CSS 

.some-class {
    min-width: var(--theme-breakpoint-sm);
}

Вы не можете использовать пользовательские свойства в медиа-запросах, поэтому в приведенном выше конкретном примере вы быпридется реструктурировать свой CSS.Трудно сказать, возможно ли это без понимания всего макета и стиля.

...