스타일
Motile UI의 색상 커스터마이징 시스템을 이해하고 프로젝트에 맞게 스타일을 적용하는 방법을 알아봅니다.
개요
Motile UI는 CSS 변수를 통해 유연하고 강력한 색상 커스터마이징 시스템을 제공합니다. 전역 테마 색상부터 개별 컴포넌트 색상까지, 네 단계의 우선순위 시스템으로 원하는 스타일을 정확하게 제어할 수 있습니다.
유연한 커스터마이징
전역 설정부터 개별 컴포넌트까지 다양한 레벨에서 색상을 제어할 수 있습니다.
간편한 적용
CSS 변수만으로 복잡한 설정 없이 즉시 스타일을 변경할 수 있습니다.
명확한 우선순위
4단계의 명확한 우선순위 시스템으로 예측 가능한 스타일링이 가능합니다.
우선순위
4단계의 명확한 우선순위 시스템으로 예측 가능한 스타일링이 가능합니다.
1
개별 컴포넌트 색상
color prop컴포넌트에 color prop을 전달하여 적용하는 색상입니다. 가장 높은 우선순위를 가집니다.
↓
2
컴포넌트 타입 전역 색상
--motile-ui-btn특정 타입의 모든 컴포넌트에 적용되는 색상입니다.
↓
3
전역 테마 색상
--motile-theme모든 컴포넌트에 적용되는 기본 테마 색상입니다.
↓
4
기본 색상
#3b82f6아무 색상도 지정하지 않았을 때 사용되는 기본 색상입니다.
전역 테마 색상
전역 테마 색상은 모든 컴포넌트에 기본적으로 적용됩니다. :root에 --motile-theme 변수를 설정하면 프로젝트 전체의 기본 색상을 한 번에 변경할 수 있습니다.
Badge
1:root {
2 --motile-theme: #10b981; /* 모든 컴포넌트에 적용되는 전역 테마 색상 */
3}참고: 이 방법은 프로젝트 전체에 일관된 브랜드 색상을 적용할 때 유용합니다.
컴포넌트 타입 전역 색상
특정 타입의 모든 컴포넌트에 동일한 색상을 적용할 수 있습니다. 전역 테마 색상보다 우선순위가 높습니다.
Badge
--motile-ui-badgeButton
--motile-ui-btnCheckbox
--motile-ui-checkboxDock
--motile-ui-dockInput
--motile-ui-inputPopover
--motile-ui-popoverSwitch
--motile-ui-switchTextarea
--motile-ui-textareaTooltip
--motile-ui-tooltip1:root {
2 --motile-ui-badge: #8b5cf6;
3 --motile-ui-btn: #ef4444;
4 --motile-ui-checkbox: #f59e0b;
5 --motile-ui-dock: #10b981;
6 --motile-ui-input: #06b6d4;
7 --motile-ui-popover: #ec4899;
8 --motile-ui-switch: #f97316;
9 --motile-ui-textarea: #8b5cf6;
10 --motile-ui-tooltip: #6366f1;
11}개별 컴포넌트 색상
각 컴포넌트에 color prop을 전달하여 개별적으로 다른 색상을 적용할 수 있습니다. 가장 높은 우선순위를 가지므로 다른 모든 설정을 덮어씁니다.
1<Button color="#ef4444" variant="primary" size="medium">
2 Red Button
3</Button>
4
5<Button color="#8b5cf6" variant="primary" size="medium">
6 Purple Button
7</Button>
8
9<Button color="#f59e0b" variant="primary" size="medium">
10 Orange Button
11</Button>
12
13<Button color="#10b981" variant="primary" size="medium">
14 Green Button
15</Button>참고: 특정 컴포넌트만 강조하거나 다른 색상을 사용하고 싶을 때 유용합니다. color prop으로 간편하게 색상을 지정할 수 있습니다.