Как использовать точки останова CSS в пользовательском интерфейсе материала

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

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

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

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

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

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

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

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

Теперь давайте посмотрим, как мы можем добиться того же, используя Material UI.

useMediaQuery

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

Начнем с простого медиа-запроса.

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”) 

Это создает точку останова на основе помощников, настроенных пользовательским интерфейсом материала.

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

Итак, все, что находится вверх или больше, чем sm, то есть 600px, затем визуализирует текст.

Существуют и другие методы достижения этого, описанные на веб-сайте Material UI.

Использование точек останова в 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 используется для создания стилей, которые мы можем использовать в нашем компоненте. Сначала мы устанавливаем корневое имя класса и назначаем его className компонента 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>
  );
};

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

Вы можете проверить все свойства, которые вы можете использовать в компоненте Box, здесь:

Использование пакета styled-components

Есть много способов использовать CSS в React. В этом примере будет рассмотрено, как использовать 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 компонента со стилем и создадим его с помощью вспомогательной функции точек останова пользовательского интерфейса материала.

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

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

Заключение

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

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