Material UI에서 응답 웹 사이트 만들기

개시하다
이번에는 Material UI에서 응답 웹 사이트를 만드는 방법에 대해 설명합니다.
머티리얼 UI에는 스펀지 머리핀(위)에서 스타일링하는 방법이 몇 가지 있기 때문에 소개해드리고 싶어요.
카탈로그

media query 사용 방법

useMedia Query 사용 방법

theme의breakpoint를 설정하고 사용하는 방법

media query 사용 방법
평소 CSS 사용 등에 익숙하지만 머티리얼 UI에서는 meadiaquery를 사용할 수 있다고 생각합니다.

<Box component="span" sx={{
    fontSize: "1rem",
    "@media screen and (min-width:600px)": {
        width: ".8rem",
    },
}} >
    dammy text
</Box>

와 평소에 사용할 때의 차이는''(단질 석영) 또는''(더블 따옴표)로 둘러싸야 한다는 것이다.
습관이 되었기 때문에, 이 작법은 아마도 가장 쓰기 쉬운 것일 것이다.
useMedia Query 사용 방법
다음 useMedia Query 는 Material UI 만의 기능입니다.
이것은 React에서 사용하는 물건으로 진짜와 가짜로 결과를 되돌려줍니다.
행동에 있어서useState와 같은 행동을 상상할 수 있다.

import { useMediaQuery } from "@mui/material";
import Link from "next/link";

const navBar = () => {
    const matches: boolean = useMediaQuery("(min-width:577px)");
    {matches ? (
        <Box component="div">
            <Link href="/" passHref>
                <Button color="secondary">ボタン</Button>
            </Link>
        </Box>
    ) : (
        <Box></Box>
    )}

상기 설정은 화면 폭이 577px 이상이면 진실이고 576px 이하면 가짜이며 matches가 진실인 경우 가짜인 경우 단추를 꺼내 구분한다.
또한 Material UI의 레드포인트를 사용하여 기록할 수도 있습니다.

const matches: boolean = useMediaQuery(() => theme.breakpoints.up("sm"));

하지만 이렇게 하려면 요소를 2층, 3층으로 써야 하기 때문에 보기 어렵고 읽는 데도 시간이 더 걸리기 때문에 특별한 이유가 없으면 사용하지 말아야 한다.
theme의breakpoint를 설정하고 사용하는 방법
the breakpoints를 사용하는 방법은 앞서 설명한 Material UI의 theme를 사용하는 방법입니다.
theme에 관해서는 아래에서 소개하고, 가능하면 참조하세요.
https://zenn.dev/tns_00/articles/zenn-material-ui-basics#theme
Material UI에 breakPoint를 설정하여 스펀지 위에 스타일링할 수 있습니다.
초기 값

xs: 0

sm: 600

md: 900

lg: 1200

xl: 1536

아래와 같이 좋아하는 위치에서breakpoint를 칠 수 있습니다.

import { createTheme } from "@mui/material/styles";

let theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 768,
      lg: 1025,
      xl: 1536,
    },
  },

breakPoint를 실제로 사용하는 방법은 다음과 같이 sx속성에서 사용한다.
이번 가로 600px 이상은 Block, 599px 이하는 none로 표시하지 않는 구분이 진행되고 있습니다.

      <Box
        component="div"
        sx={{
          display: { xs: "none", sm: "block" },
        }}
      >
        <Link href="/" passHref>
          <Button color="secondary">ボタン</Button>
        </Link>
      </Box>

Material UI를 사용할 때 이 방법이 가장 쉽습니다.
복수 실시의 관점에서도 통일이 가능해 오류가 발생하기 쉽지 않다.
총결산
이번에는 머티리얼 UI에 스펀지로 스타일링하는 방법을 소개했다.
개인이 쉽게 읽고 쉽게 공통되는 관점에서 출발하다
theme의breakpoint를 설정하고 사용하는 방법
Material UI를 사용하는 것이 좋습니다.
Material UI에는 또 여러 가지 흥미로운 요소가 있으니 다시 한 번 소개해 주시기 바랍니다.
여기까지 읽어주셔서 감사합니다.