📋 읽을 거리-3

Bora Im·2022년 4월 13일

읽을거리

목록 보기

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를 대신 사용할 수도 있다.