mui는 매우 인터렉티브하고 동적인 스타일링을 제공해준다. 자체 emotion의 styled와 sx props, 그리고 bootstrap에서 본듯한 breakpoint 등이 반응형 스타일링까지 제공해줌으로써 스타일링의 지평이 확 열린 느낌을 받았다.
하지만 컴포넌트 하나만의 스타일링으론 페이지 전체의 느낌을 잡아주기 어렵다. Theming은 그러한 페이지 전체의 느낌을 잡아주기 위해 스타일링의 일관성을 부여해준다. 통일한 간격, 색체, 애니메이션/트렌지션 등이 그러하다.
mui theming은 생각보다 더욱이 편리한 접근성을 제공해주었다. 스타일에 color: 'text.primary' 라고만 입력해도 테마의
const theme = {
palette: {
text: {
primary: Colors.blue[300]
}
}
}에서 main의 색이 자동으로 부여된다. ThemeProvider의 useTheme를 통해 color: {theme.palette.text.primary} 까지 갈 필요 없이 속성에 맞는 문자열만 입력하면 되는 것이다.
다크/라이트 모드도 제공해주어서 흑백 전환이 생각보다 정말 많이 쉬웠다. 무색은 반전해서, 단색은 자동으로 명암을 낮춰서 제공해주기 때문이다.
일관화는 색체에만 국한되지 않았다. 테마는 transition의 일관된 duration, easing이나 간격, 컴포넌트 기본 스타일링, MUI 컴포넌트 variants props 확장, 반응형 중단점, 밀도, 레이어(zIndex), 타이포그래피 등 다양한 분야에서 스타일링의 일관성을 관장해준다.
이때 정말 놀라운건 variants props다. 기본적으로 제공되는 MUI 버튼의 variants는 outlined, contained, standard인데, 여기에 dashed라는 이름의 새로운 variants를 테마에 추가하면 저 3개의 variants 뿐만이 아니라 dashed 또한 사용할 수 있다. 정말 놀라운 접근성이다.
MUI 테마는 그냥 방치해두기엔 너무나도 매력적이고 흥미롭다. 그러므로 MUI의 기존 스타일링에 일관성을 부여하기 위한 대규모 패치를 하며 가끔 글을 올리겠다.
