반응형 프론트엔드/Material UI7 [MUI] material-ui 'createSvgIcon' is not exported from '@material-ui/core/utils' 미친 에러다. 어떻게 해야되는지 몰라서 수정하는데 한참이 걸렸다. 아래 해결책중에 뭐가 해결을 해줬는지는 모르겠지만 잘 해결이 됐다. 첫번째 방법 yarn remove @mui/~~ 를 다 한다. 다시 yarn add @mui/~~ 해준다. 두번째 방법 yarn upgrade 명령어 실행 세번째 방법 yarn cache clean 명령어 실행 node_modules 파일 삭제 yarn.lock 파일 삭제 yarn install 실시 https://stackoverflow.com/questions/61147548/material-ui-createsvgicon-is-not-exported-from-material-ui-core-utils material-ui 'createSvgIcon' is not expo.. 2022. 12. 10. [MUI] 그리드 컬럼 헤더 높이 조정 그리드 컬럼 그룹이 일부만 존재하는데도 공간(높이)를 너무 많이 차지해서 높이를 줄여주고 싶었다. renderHeaderGroup 속성을 통해 높이를 변경해 봤는데 내부 content의 높이만 변경되지 MUI에서 관리하는 컨테이너 높이는 수정되지 않음 DataGrid에 속성을 찾아보니까 density라는게 있음 compact로 설정하니까 어느정도 만족스럽다. 기존에 한줄일떄도 컬럼 헤더가 너무 큰 느낌이 있었음 근데 좀... 이상한게 footer는 같이 안줄어든다. 그래서 클래스 덮어써서 높이 줄여줌 footer는 Selected Rows 나오고 페이징 나오는 부분을 말함 https://mui.com/x/api/data-grid/data-grid/#density DataGrid API - MUI X AP.. 2022. 12. 5. [MUI] 그리드 컬럼 헤더에 두줄 띄우는 방법 DataGrid 컴포넌트에 컬럼 그룹을 지정하는 기능이 있다. 그룹과 children 관계로 선언하는것으로 보인다. 그룹에 그룹을 children으로 넣음으로써 여러줄 넣기도 가능 columnGroupingModel https://mui.com/x/react-data-grid/column-groups/ Data Grid - Column groups - MUI X Group your columns. mui.com 2022. 12. 5. [MUI] DataGrid의 ScrollTo 기능 그리드에 데이터를 추가했을때 추가된 행으로 스크롤을 이동시키고 싶다. 애석하게도 ScrollTo 기능은 Pro 버전부터 지원한다. 직접 구현할 방법이 있을지 찾아봐야 되겠다. https://mui.com/x/react-data-grid/scrolling/#scrolling-to-specific-cells Data Grid - Scrolling - MUI X This section presents how to programmatically control the scroll. mui.com 동작 방식을 확인해봤는데 아무래도 직접 구현은 어려울것 같다. 이놈들이 내부적으로 Render 할 데이터를 그때그때 만들어 넣는걸로 보인다. 그러면 scrollTo를 먹일수가 없으니... 2022. 11. 30. [MUI] 그리드 타입 지정 DataGrid 컴포넌트는 입력할때 타입을 안지정해주면 string으로 값이 바껴버린다. 기본적으로 CellEditCommit 이벤트의 params에 들어있는 value 값이 문자열로 넘어온다. 또 공백이 들어가면 변수의 타입이 string으로 변환됨 타입 검사하는건 매우 귀찮기 때문에 컬럼 타입은 필수적으로 지정해줘야 함. // MUI에서 지원하는 타입 목록 // 'string' : 문자 // 'number' : 숫자 // 'date' : 날짜 // 'dateTime' : 날짜 + 시간 // 'boolean' : 불리언 // 'singleSelect' : 단일 선택 콤보박스 // 'actions' : 동작. 아마 클릭하면 어떤 동작(함수)을 실행하는 컬럼인거같다. export declare type G.. 2022. 11. 30. Dialog 다이얼로그는 모달 형태로 뜨는 팝업창이다. 다이얼로그 사용 방법은 아래 사이트의 샘플 코드를 통해서 확인하면 된다. https://mui.com/material-ui/react-dialog/ React Dialog component - Material UI Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. mui.com 내가 구현하고자 했던 부분은 프로그램에서 뜨는 다이얼로그 스타일 표준을 정해서 공통 코드화 하는것이었다. 고려되어야 할 요소 빈 공간 클릭이나 esc 키 입력 시 다이얼로그 창이 꺼질지 여부 선택 타이틀 변경 내용 변경 - 내용 .. 2022. 11. 25. 이전 1 2 다음 반응형
