# material ui

60개의 포스트
post-thumbnail

[에러 일지] Failed prop type: Invalid prop `children` supplied to `ForwardRef(Dialog)`, expected a ReactNode.

Failed prop type: Invalid prop children supplied to ForwardRef(Dialog), expected a ReactNode.Uncaught Error: Objects are not valid as a React child (f

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

[Next.js] 커뮤니티 검색 기능(Material-UI)

커뮤니티 내에서 글을 검색하는 기능을 만들고자 한다.

2023년 2월 22일
·
0개의 댓글
·
post-thumbnail

❗️ Material-UI 설치 Error

Material-UI 설치 Error 해결 방법

2023년 2월 21일
·
0개의 댓글
·
post-thumbnail

[MUI] - Stepper 예제 응용하기

Mui 공식문서에 있는 Stepper 예제를 진행중인 프로젝트요구사항에 맞도록 변경하기

2023년 2월 8일
·
0개의 댓글
·

nextjs에서 link 컴포넌트를 UI 컴포넌트와 조합하여 사용하는 방법

nextjs에서는 다른 페이지로의 이동을 Link 태그를 이용하여 진행하는데,UI 컴포넌트와 함께 사용하면 UI 컴포넌트가 무시되고 링크로만 표현되거나 hydration 에러가 발생하였다.nextjs에서 제공하는 링크태그로 UI 컴포넌트를 감싼 다음, passHref와

2023년 1월 17일
·
0개의 댓글
·
post-thumbnail

material-ui : image List 적용에러

Material-ui : Image List 적용시 발생했던 문제를 포스팅합니다.TypeError: Cannot read property 'map' of undefined맨아래 문제 해결만 봐도 됩니다.data.json에서 배열 안 객체 안 백체 안에 img 목록들을

2022년 11월 16일
·
0개의 댓글
·

Material Design을 활용한 디자인 시스템 제작

디자인 시스템의 필요성과 디자인 프로그램을 활용하여 json 파일 업는방법에 대한 부분은 아래쪽 링크를 통해 한번 읽어 보시길 권합니다. -> 디자인 시스템의 필요성 이글은 CSS-in-JS 방식으로의 Material UI를 활용하여 Design system을 구축한

2022년 10월 19일
·
0개의 댓글
·

material ui 적용

Githttps://github.com/hyoseong1994/material-uihttps://mui.com/material-ui/getting-started/installation/

2022년 8월 19일
·
0개의 댓글
·
post-thumbnail

Mui 오픈소스에 컨트리뷰팅 하게 된 썰

최근에 MUI에 컨트리뷰팅을 완료하게 되었다.

2022년 7월 24일
·
0개의 댓글
·
post-thumbnail

라이브러리 사용하기

ant-Design, Material-UI Ant-Design과 Material-UI는 디자이너의 도움 없이 개발자가 스스로 디자인된 컴포넌트를 만들 수 있도록 도와주는 UI 프레임워크입니다. 만약 조금 더 간편하고 예쁘게 만들고 싶으면 적용해보세요! ant-Design 사이트 Material-ui 사이트 1. 다양한 아이콘들 2. 색다른 체크박...

2022년 7월 6일
·
0개의 댓글
·

CRA(TypeScript), ESLint, Prettier, Styled-Components, Material UI

CRA(TypeScript) > npx create-react-app@latest 'Project Name' --template typescript ESLint VSCode Extension ESLint 설치 npm ESLint, 패키지 설치 > npx instal

2022년 5월 24일
·
0개의 댓글
·
post-thumbnail

(Next.js) Next 앱에서 material ui와 styled-component를 적용하기

Next.js에서 mui와 styled-components 적용하기 좌충우돌 스토리

2022년 4월 25일
·
1개의 댓글
·
post-thumbnail

[Next + TypeScript] 넥스트 프로젝트에 Material UI + styled-components 적용하기 (emotion 씁시다)

나는 개인적으로 여러 UI 라이브러리 중에 Material UI (이하 MUI)를 선호하고 있다. 개인적으로 ant design 이나 부트스트랩보다 디자인이 깔끔하고 사용하기도 편한 것 같다그리고 MUI 와 함께 사용하는 것이 styled-components다.먼저 N

2022년 3월 29일
·
0개의 댓글
·
post-thumbnail

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. 해결하기

Material UI 를 사용하면서 생각보다 이런 warning 을 종종 마주한다.코드 자체가 동작하지 않는 심각한 에러는 아니지만 콘솔창에 이 경고로 범벅이 되면 굉장히 거슬린다.처음에는 분명 애를 먹었지만 혹여나 이 경고에 헤매시는 분이 계실까봐 내가 해결한 팁을

2022년 3월 26일
·
0개의 댓글
·

next.js에서 material-ui 사용하기

nextjs에서 mui(material-ui)를 적용하는 방법에 대해 알아보겠습니다. 이 이후에는 다음은 styled-components와 mui를 동시에 사용하는 방법 (opens new window), 마지막에는 글로벌 style를 이용하여 다크모드 만드는 방법까지

2022년 3월 24일
·
0개의 댓글
·
post-thumbnail

MUI 페이지네이션 적용 방법

구글에서 지원하는 material ui (이하 mui)에는 다양한 UI 라이브러리들이 존재합니다. 저의 경우에는 Modal, Dialog, Pagination, Skeleton 등을 주로 잘 사용하고 있습니다.그 중에서 Pagination에 대해 말하고자 합니다.페이지

2022년 3월 17일
·
0개의 댓글
·
post-thumbnail

Material-UI에서 Style을 적용하는 방법

변명 중에서도 가장 어리석고 못난 변명은 "시간이 없어서"라는 변명이다. -에디슨- 잠깐의 2021년 회고 블로그를 작성하기전에 현재의 내가 느끼고 있는 것들의 대해서 잠시 얘기를 해보겠다. 나는 2달전에 부트캠프를 들어와서 현재 기업협업을 나와있다. 부트캠프에 다

2022년 1월 5일
·
0개의 댓글
·
post-thumbnail

MUI DataGrid Migration from v4

MUI 버전을 4에서 5로 Migration하면서 다른 페이지는 정상 작동하는데, DataGrid가 로드되면 해당 페이지의 style broken 현상 발생.정확한 원인은 잘 모르겠으나, DataGrid 버전 문제였던 것 같다.기존 @mui/x-data-grid 패키지

2021년 12월 20일
·
0개의 댓글
·
post-thumbnail

MUI Migration from v4 TreeItem Error

Error Message: Unknown event handler property에러 발생 코드StyledTreeItem은 MUI의 TreeItem 컴포넌트에 스타일을 입힌 컴포넌트.v5로 migration하고 나니 에러 발생.정확한 에러 원인은 모르겠지만, v4 버전

2021년 12월 16일
·
0개의 댓글
·