๐Ÿ’ป My Work/๐ŸŽจ Material Design

[Material Design] Material-UI(MUI)๋กœ react & styled component ์‚ฌ์šฉํ•˜๊ธฐ <๊ธฐ๋ณธ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉํ•˜๊ธฐ>

Jaeseo Kim 2022. 9. 11. 21:55

https://mui.com/material-ui/getting-started/overview/

์ปดํฌ๋„ŒํŠธ๋“ค์€ ์™ผ์ชฝ ์‚ฌ์ด๋“œ๋ฐ”์—์„œ Components์— ์žˆ์Šต๋‹ˆ๋‹ค. ๐ŸŽ†

00. ์ปดํฌ๋„ŒํŠธ ์‚ฌ์šฉํ•˜๊ธฐ


์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฒ„ํŠผ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ Button ์œผ๋กœ ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค.

https://mui.com/material-ui/react-button/

 

React Button component - Material UI

Buttons allow users to take actions, and make choices, with a single tap.

mui.com

๊ฐ ๋ฒ„ํŠผ๋“ค์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š”์ง€์— ๋Œ€ํ•ด ์†Œ๊ฐœ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

ํ˜„์žฌ๋Š” ํ•ต์‹ฌ์ ์ธ ๋ถ€๋ถ„๋งŒ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ฝ”๋“œ๋กœ ๋ณด์—ฌ์ฃผ๊ณ  ์žˆ์ง€๋งŒ, ๋” ์ž์„ธํ•˜๊ฒŒ ๋ณด๊ธฐ ์œ„ํ•ด์„ 

ํ•ด๋‹น <> (Show the full source) ๋ฅผ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค.

JavaScript / TypeScript ๋‘˜ ์ค‘ ์ž์‹ ์˜ ํ”„๋กœ์ ํŠธ์— ๋งž๋Š” ์–ธ์–ด๋ฅผ ์ฐธ๊ณ 

์ฝ”๋“œ ๋ธ”๋Ÿญ์ด ํŽผ์ณ์ง€๋ฉฐ ์ฝ”๋“œ๋ฅผ ์ฐธ๊ณ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๐Ÿค—