Material UI + Next.js + TypeScript

Last updated 2022-12-29

• MUI GitHub repo에 있다 - Next.js with TypeScript example
• MUI 5의 기본 style engine은 Emotion
• MUI vs. MUI Base
  • 일단 나는 그냥 MUI사용하면 된다.
  • MUI Base는 default style이 제공되지 않는다.
• The sx prop 에서 sx는 무엇의 줄임말 일까?
  • ‘S’tyle e’X’tension?
  • CSS의 superset을 제공 (valid CSS + theme-aware properties)
    • 예) <Box sx={{ bgcolor: 'background.paper' }}>
  • 단위없는 숫자값은 sensible하게 해석된다
    • {{ width: 1/2 }} : 50%
    • {{ width: 20 }}: 20px
    • {{ margin: 2 }}: theme.spacing값(기본: 8px)의 2배
• 약어 이해 (이렇게 모아보면 이해되지만 갑자기 my: 4가 나오면 이해가 안됨)
  • pt: 2 : padding top
  • my: 4 : margin y-axis : margin-top과 margin-bottm

• JavaScript
• Spacing