Точки останова CSS в Material UI

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

В этой статье мы обсудим, как применять точки останова CSS в Material UI.

Вот Github-репозиторий, которым можно воспользоваться, если есть желание сразу же погрузиться в код. Прежде чем начинать работу, можете изучить файл Readme: https://github.com/EntryLevelDeveloperTraining/material-ui-breakpoints

Что такое точка останова CSS?

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

Как использовать точку останова в CSS?

@media only screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}

В этом примере точка останова определяется через медиа-запрос. Он устанавливает точку останова, сообщая, что этот CSS будет применяться только в случае, если экран имеет максимальную ширину 600 пикселей или меньше. Когда размер экрана составит 600 пикселей или меньше, фон будет зеленым. Когда размер экрана больше, зеленый фон применен не будет.

Теперь давайте посмотрим, как мы можем достичь того же самого с помощью Material UI.

useMediaQuery 

useMediaQuery  —  это React-хук Material UI, доступный к использованию в компоненте. Будучи приведенным в действие, он вызовет повторный рендеринг и тем самым даст вам контроль над тем, хотите ли вы показать или скрыть компоненты, и многое другое.

Давайте начнем с простого медиа-запроса:

const SimpleMediaQuery = () => {
  const matches = useMediaQuery("(min-width:600px)");
  
  if (matches) {
    return (
      <Paper elevation={5}>
        <Box p={5}>SimpleMediaQuery breakpoint has a min width of 600px</Box>
      </Paper>
    );
  }  return <></>;
};

Или, используя React-хук:

const matches = useMediaQuery("(min-width:600px)");

Здесь происходит проверка: имеет ли точка останова минимальную ширину 600 пикселей. Если да, то есть если экран имеет размер не менее 600 пикселей или больше, то отобразится текст. Если не совпадает, то ничего не отобразится.

Теперь для той же самой цели давайте воспользуемся помощником точки останова:

const BreakpointHelper = () => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up("sm"));
  
  if (matches) {
    return (
      <Paper elevation={5}>
        <Box p={5}>
          BreakpointHelper will render everything up from 'sm' which is 600px
        </Box>
      </Paper>
    );
  }
  return <></>;
};

Итак, объявим помощник точки останова:

theme.breakpoints.up(“sm”)

Это создание точки останова на основе настроек помощников в Material UI.

xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px

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

Существуют и другие методы достижения этой цели. С ними можно ознакомиться на сайте Material UI.: https://material-ui.com/components/use-media-query/

Точки останова в makeStyles

const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.down("sm")]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up("md")]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up("lg")]: {
      backgroundColor: "green",
    },
  },
}));

const MakeStylesExample = () => {
  const classes = useStyles();
  return (
    <Paper elevation={5} className={classes.root}>
      <Box p={5}>The background color will change based on screen width</Box>
    </Paper>
  );
};

В этом примере для создания стилей в компоненте применяется функция makeStyles. Сначала мы устанавливаем имя корневого класса root и присваиваем его имени класса компонента Paper:

<Paper elevation={5} className={classes.root}>

Затем придаем корень makeStyles имени класса Paper:

[theme.breakpoints.down("sm")]: {
  backgroundColor: theme.palette.secondary.main,
}

Когда точка останова будет достигнута, то, посредством помощников точки останова, она применит этот CSS к элементу и изменит цвет фона.

Компонент Box

Компонент Box в Material UI  —  лучшее изобретение современности. Вы можете легко стилизовать компоненты без чрезмерного количества CSS. Также можно применять помощники точек останова, чтобы показать или скрыть определенные элементы:

const BoxExamples = () => {
  return (
    <Paper elevation={5}>
      <Box p={5} display={{ xs: "block", sm: "none", md: "block" }}>
        This will hide on `sm` but show as a `block` on `xs` and `md`
      </Box>
    </Paper>
  );
};

This will hide on `sm` but show as a `block` on `xs` and `md`- не комментарий?

В компоненте Box много свойств, которые позволяют воспользоваться сокращенными помощниками точек останова. В этом примере мы сообщаем, что для дисплея, когда точка останова для xs будет достигнута, он станет блочным элементом. Когда точка останова для sm будет достигнута, то она не будет отображаться, имея отображение none.

Все свойства, доступные для компонента Box, можно просмотреть здесь: https://material-ui.com/system/basics/#all-inclusive

Пакет styled-components

Есть много способов применить CSS в React. В этом примере мы рассмотрим, как использовать интерфейс Material UI со стилизованными компонентами:

import { compose, spacing, palette, breakpoints } from "@material-ui/system";
import styled from "styled-components";

const Box = styled.div`
  ${breakpoints(compose(spacing, palette))}
`;

const BoxExamples = () => {
  return (
    <Paper elevation={5}>
      <Box p={{ xs: 5, sm: 10 }}>This uses a styled-components Box</Box>
    </Paper>
  );
};

Это создаст стилизованный компонент элемента div с помощью помощника функции точек останова Material UI:

const Box = styled.div`
  ${breakpoints(compose(spacing, palette))}
`;

Это позволит стилизованному компоненту использовать наши помощники точек останова. Теперь мы можем сказать, что на дисплее при достижении точки останова xs будет отображаться отступ 5, а при достижении точки останова sm—  отступ 10.

Заключение

В Material UI встроено много магии точек останова, так что вполне реально получить адаптивный интерфейс, не кодируя много пользовательского CSS. Мы рассмотрели хуки и помощники Material UI, которые можно применить в компонентах, и проверили, как пользоваться стилизованными компонентами с помощью помощников точек останова Material UI.

Есть и другие пакеты, с которыми можно достичь тех же результатов. А какой ваш любимый пакет для точек останова CSS?

Читайте также:

• ТОП 5 советов, как улучшить свои UI навыки
• UX или UI  -  на что уделить внимание?
• 10 распространенных ошибок UI-дизайнеров

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи: Andrew Bliss, “How to Use CSS Breakpoints in Material UI”