๐Ÿ“‹ ์ฝ์„ ๊ฑฐ๋ฆฌ-3

imimยท2022๋…„ 4์›” 13์ผ
0

์ฝ์„๊ฑฐ๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
3/7

MUI + tailwind

material ui์™€ tailwind

How to use Tailwind CSS and Material-UI together

I love Material-UI components, but I donโ€™t like to write a React useStyles custom hook using Material-UI makeStyles() function everytime I need a little bit of CSS, which basically means in all my components files.
Material-UI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ข‹์•„ํ•˜์ง€๋งŒ, ๊ธฐ๋ณธ์ ์œผ๋กœ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ ํŒŒ์ผ์—์„œ CSS๊ฐ€ ์•ฝ๊ฐ„ ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค Material-UI makeStyles() function์„ ์‚ฌ์šฉํ•˜์—ฌ React useStyles ์ปค์Šคํ…€ hook๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์€ ์ข‹์•„ํ•˜์ง€ ์•Š๋Š”๋‹ค.

On the other hand, I love Tailwind-UI for its CSS-in-HTML solution (I invented that term I think, some people call it a utility-first CSS framework).
๋‚˜๋Š” Tailwind-UI์˜ CSS-in-HTML ์†”๋ฃจ์…˜์„ ์„ ํ˜ธํ•œ๋‹ค. (์–ด๋–ค ์‚ฌ๋žŒ๋“ค์€ ์ด๊ฒƒ์„ utility-first CSS ํ”„๋ ˆ์ž„์›Œํฌ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.)

The problem is that syncing both Material-UI theme with Tailwind CSS theme may not seems that easy. After a little bit of time, I managed to do it. If you are interesseting, you can see how in this GitHub repo: https://github.com/damien-monni/material-ui-tailwind
๋ฌธ์ œ๋Š” Material-UI ํ…Œ๋งˆ๋ฅผ Tailwind CSS ํ…Œ๋งˆ์™€ ๋™๊ธฐํ™”ํ•˜๋Š” ๊ฒƒ์ด ์‰ฝ์ง€ ์•Š์•„ ๋ณด์ธ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ์•ฝ๊ฐ„์˜ ์‹œ๊ฐ„์ด ๋“ค์—ฌ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ด GitHub repo์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

Material-UI๋ฅผ Tailwind.css๋กœ ๊ต์ฒด


next.js๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์ฃผ์š” ๊ธฐ๋Šฅ | ๊ธฐ์–ต๋ณด๋‹ค ๊ธฐ๋ก์„

Vue.js Scoped CSS ์ฒ˜๋Ÿผ ๊ฐ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ์Šคํƒ€์ผ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

_app.tsx ์—์„œ global.css ๋ฅผ import ํ•  ์ˆ˜ ์žˆ๋‹ค.

style ์ปดํฌ๋„ŒํŠธ๋ฅผ import ํ•  ์ˆ˜ ์žˆ๋‹ค.

next.js์—์„œ material-ui ์‚ฌ์šฉํ•˜๊ธฐ

next.js์—์„œ material-ui์™€ styled-components ์‚ฌ์šฉํ•˜๊ธฐ


mui github

Next.js with TypeScript example | mui github

The project uses Next.js, which is a framework for server-rendered React apps.
It includes @mui/material and its peer dependencies, including emotion, the default style engine in MUI v5. If you prefer, you can use styled-components instead.

์ด ํ”„๋กœ์ ํŠธ๋Š” ์„œ๋ฒ„ ๋ Œ๋”๋ง React ์•ฑ์˜ ํ”„๋ ˆ์ž„์›Œํฌ์ธ Next.js๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
@mui/material๊ณผ MUI v5์˜ ๊ธฐ๋ณธ ์Šคํƒ€์ผ ์—”์ง„์ธ ์ด๋ชจ์…˜์„ ํฌํ•จํ•œ ํ”ผ์–ด ์˜์กด์„ฑ์„ ํฌํ•จํ•œ๋‹ค.
styled-components๋ฅผ ๋Œ€์‹  ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.


Built-In CSS Support | next.js


styled components

styled components github


Next.js + Tailwind CSS Example | next.js github

Styled Components ์‚ฌ์šฉ๋ฒ• | DaleSeo๐Ÿ‘

Styled Components & TypeScript

๋„ฅ์ŠคํŠธ JS๋ฅผ ๋ฐฐ์›Œ๋ณด์ž 3ํŽธ - ์ตœ์ ํ™”๋œ ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ

CSS in JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ Typesafeํ•˜๊ฒŒ Theme ๊ด€๋ฆฌํ•˜๊ธฐ


Styled-component #3 with typescript


0๊ฐœ์˜ ๋Œ“๊ธ€