(21.08.04) Material-ui Default theme의 type

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

🦄import {Theme} from "@material-ui/core/styles🦄

 

 

 

Default Theme

---

material-ui는 Theme Object를 통한 스타일링을 가능하게 한다. 이 Theme라는 것은 일일이 사용자가 withTheme을 이용해서 직접 만들 수 도 있지만, 기본적으로 Default 값을 제공한다.

 

얘는 사실 makeStyles()를 호출할 때 첫번째 parameter로 들어가고 있다. 얘를 가져다 쓰려면 params에 임시변수를 넣어주고, theme에 맞는 속성 값들을 꺼내쓰면 되는데, 이 속성 값들이라는게 무지무지 길고 복잡하고 어려운 영어로 범벅이 되어있다. 보나마나 오타로 인한 에러가 다량으로 발생하게 될 것이라는 게 예상되므로, 이 Default Theme의 타입을 불러와서 써주자.

 

 

import { makeStyles, Theme } from "@material-ui/core/styles";

... 중략

const useStyles = makeStyles((theme: Theme) => ({

  editBtn: {
    "& span": {
      fontSize: "1rem",
    },
    [theme.breakpoints.between("xs", "sm")]: {
      width: "120px",
      height: "48px",
    },
    [theme.breakpoints.between("sm", "md")]: {
      width: "148px",
      height: "64px",
    },
    [theme.breakpoints.between("md", "lg")]: {
      width: "164px",
      height: "82px",
    },
  },

 

 

theme의 타입을 import한 Theme로 지정해주면 자동으로 오타 체크도 해주고 아주 편하다.

추가로, makeStyles를 사용하면서 nest된 css를 지정하고 싶으면 "& span"과 같이 scss에서 쓰는 문법을 유사하게 적용하면 된다. 클래스 이름까지 적용되는 것으로 아는데, 아직 시험해볼 기회가 없었다. 되지 않을까??? 안되면 내용 보완해서 다시 글 작성해보겠습니다

 

요즘 material-ui로 프로젝트를 하다보니 포스팅도 죄다 material-ui와 관련된 것이다. 좀 다른 내용도 포스팅 하고 싶은데..빨리 플젝 끝났으면 좋겠다!!