# material ui

52개의 포스트
post-thumbnail

React 고객 관리 시스템

React와 Node.js를 활용한 고객 관리 시스템

4일 전
·
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일
·
0개의 댓글
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개의 댓글
post-thumbnail

Migration MUI v4 to v5 makeStyles 사용하기

MUI 공식 문서를 보고 Migration 과정을 실행했으나 세부 코드는 바뀌지 않음makeStyles는 사용할 수는 있지만, lagacy라고 표현하며 다른 방법을 권함.하지만 하나 하나 바꾸기에는 너무 많고 힘들다는 판단.아래 사진은 makeStyles 코드를 v5에

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

Material UI Migration from v4 to v5

\[https&#x3A;//mui.com/guides/migration-v4/Update React & TypeScript versionThe minimum supported version of React was increased from v16.8.0 to v17.0

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

Material UI Select, TextField 오류 해결

Material UI의 TextField에 MenuItem을 사용할 때, 메뉴 아이템들이 텍스트필드 아래로 보여져야 하는데, 텍스트 필드를 가리면서 아이템이 출력됨.Material UI 버전 문제였다. 기존 v4에서는 material-ui/core에서 라이브러리를 가져

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

Material UI 도입 관련 글 참조 시리즈 모음

https&#x3A;//medium.com/@jihochoi1123/react%EC%99%80-electronjs%EB%A1%9C-%EB%8D%B0%EC%8A%A4%ED%81%AC%ED%86%B1-%EC%95%B1-%EB%A7%8C%EB%93%A4%EC%96%B4%EB

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

Material ui v4 -> MUI v5 변경사항 참조

https&#x3A;//hoontae24.github.io/19

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

WEB Material Design & Material UI : 개발 레퍼런스

https&#x3A;//jiguin-hankun.tistory.com/52

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

React MUI(Material UI) Dynamic Textfield

Dynamic Textfield 사용자가 원하는 대로 컴포넌트를 추가하고, 삭제할 수 있도록 구현하고자 한다. add, remove button 추가 컴포넌트를 원하는 만큼 추가하고 제거할 수 있도록 하는 버튼을 추가한다. add, remove 함수 추가 실행 화

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

React MUI(Material UI) Tabs custom style 적용

Tabs Style 적용 tabs backgroud color 설정 AppBar 컴포넌트에 style 설정 tabs의 indicator color 설정 Tabs에 TabIndicatorProps style 설정 클릭된 탭 글자 색상 변경 useStyles에서 cus

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

React MUI(Material UI) Datagrid Filter Operator 원하는 것만 사용하기

Material UI에서 Datagrid 컴포넌트의 필터를 사용하려고 하니 필터의 operator가 너무 많았다. 아래 사진은 기존에 있는 필터의 목록. 여기에서 is after과 is before 필터만 남기도록 하려고 한다.여기에서 주목할 라이브러리는 getGrid

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