๋ฐ˜์‘ํ˜•

mui spacing ๊ธฐ์ค€ 1

[React] Material-UI (mui) theme.spacing(1) ๋‹จ์œ„ ์˜๋ฏธ + ํ”ฝ์…€

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์ด๋ฒˆ์— MUI ๊ธฐ๋ฐ˜ ํšŒ์‚ฌ ํ™ˆํŽ˜์ด์ง€ ๊ฐœ๋ฐœ ์—…๋ฌด๋ฅผ ์ง€์›ํ•˜์—ฌ ๋งก๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. mui ๋ฅผ ์‚ฌ์šฉํ•˜๋‹ค๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ์†Œ์Šค์ฝ”๋“œ๋ฅผ ๋งŽ์ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. theme.spacing(1) ์ฒ˜์Œ์—๋Š” 2px์ธ๊ฐ€ ์‹ถ์—ˆ๋Š”๋ฐ, 2px์ด ์•„๋‹ˆ๋”๋ผ๊ณ ์š”. theme.spacing(2) ์˜๋ฏธ Material-UI (mui) ์—์„œ 1์€ theme.spacing(1)๊ณผ ๊ฐ™์€ ์˜๋ฏธ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค. ๋ณดํ†ต theme.spacing()์€ ํ…Œ๋งˆ ์„ค์ •์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ, ๊ธฐ๋ณธ์ ์œผ๋กœ 8px์„ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. 1์€ ๊ธฐ๋ณธ์ ์œผ๋กœ 8px์„ ๋‚˜ํƒ€๋‚ด๋ฉฐ, 2๋Š” 16px, 3์€ 24px, ... ์™€ ๊ฐ™์ด 8px ๊ฐ„๊ฒฉ์œผ๋กœ ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ํ”ฝ์…€ ์ปค์Šคํ…€์ด ๋ถˆ๊ฐ€๋Šฅํ•œ๊ฐ€? ์ปค์Šคํ…€๋„ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. createTheme() ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค...

Framework/React 2023.05.08
๋ฐ˜์‘ํ˜•