Использование точек останова Material-UI со значениями пикселей вместо sm, md, lg, xl - PullRequest
Новая
       150

Использование точек останова Material-UI со значениями пикселей вместо sm, md, lg, xl

1 голос
/ 13 июля 2020

У меня здесь код 

[theme.breakpoints.only('lg')]: {}

который работает и перемещается в нужную мне точку останова. Однако, когда я использую следующие 

[theme.breakpoints.between('1200', '1021')]: {}

, он фактически не ломается по этим точкам. Мне интересно, как использовать фактические числа в разделе точек останова, чтобы mui их уловил. Я не хочу создавать для него новую точку останова.

1 Ответ

2 голосов
/ 13 июля 2020

Функция theme.breakpoints.between поддерживает передачу чисел вместо ключей точки останова. Единственная проблема в том, что вы передаете их в неправильном порядке. Сначала вам нужно иметь меньшее значение пикселя.

В настоящее время ваш код будет генерировать следующие :

@ media (min-width: 1200px) и ( max-width: 1020.95px)

Это не будет соответствовать ни с чем, потому что невозможно, чтобы что-либо, превышающее min-width, соответствовало критериям max-width.

Если вы поменяете местами два параметра и выполните theme.breakpoints.between(1021, 1200), вместо этого вы получите следующий (который будет работать намного лучше):

@ media (min-width: 1021px) и (max -width: 1199.95px)

Также стоит понимать, что функции theme.breakpoints.x - это просто удобные методы для создания строк медиа-запросов . Он также отлично работает в стилях JSS, чтобы напрямую указать медиа-запрос, например, в следующем примере: 

import React from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";

const useStyles = makeStyles({
  myCustomClass: {
    "@media (min-width:600px) and (max-width:1199.95px)": {
      backgroundColor: "green"
    },
    "@media (max-width:599.95px)": {
      backgroundColor: "blue"
    },
    "@media (max-width:900px)": {
      color: "yellow"
    }
  }
});
export default function App() {
  const theme = useTheme();
  const classes = useStyles();
  return (
    <div className={classes.myCustomClass}>
      theme.breakpoints.between("1021", "1200"):{" "}
      {theme.breakpoints.between("1021", "1200")}
      <br />
      theme.breakpoints.between("sm", "md"):{" "}
      {theme.breakpoints.between("sm", "md")}
      <br />
      theme.breakpoints.only("md"): {theme.breakpoints.only("md")}
    </div>
  );
}

Изменить точки останова

...