[MUI Table 커스텀하기] React, Styled-Componet, Material-UI, TypeScript에서 테이블 커스텀하기

https://www.korbit.co.kr/

위 사진은 가상화폐 거래소 코빗에 있는 테이블이다. 

회사에서 프로젝트를 하면서 이런식으로 테이블을 그려내야했는데

테이블을 내가 원하는 레이아웃으로 커스텀하기에 꽤 복잡했기에.. 그 부분에 대해 블로깅을 해보려고 한다.

 

우선 나는 css는 Styled-Componet로 스타일을 주고 있고 css라이브러리로는 material ui를 쓴다.

Styled-Componet는 material ui를 쉽게 overloading 할 수 있어서 내가 좋아하는 조합이다 : )

https://mui.com/

MUI: The React component library you always wanted

https://styled-components.com/

styled-components

---

1. Styled-Componet용 material ui install 하기

npm install @mui/material @emotion/react @emotion/styled

 

2. tsconfig.json 세팅하기

만약 타입스크립트를 쓰고 있다면 tsconfig.json에도 설정을 해줘야한다.

 {
   "compilerOptions": {
+    "paths": {
+      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
+    }
   },
 }

 

3. App.tsx 세팅하기

Styled-Component에서 material ui를 overload해서 자유롭게 쓰려면 
StyledEngineProvide로 감싸주어야한다.

import { StyledEngineProvider } from "@mui/styled-engine";

function App() {
  const isDark = useRecoilValue(isHeaderDarkAtom);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <GlobalStyle />
        <Router />
        <ReactQueryDevtools initialIsOpen />
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

 

4. Module not found: Can't resolve @emotion/react 에러가 뜬다면..

npm install @emotion/react
npm install @emotion/core
npm install @emotion/styled

emotion을 다운로드 해주면 된다.

 

5. MUI Table 커스텀하기 

https://mui.com/material-ui/react-table/

React Table component - Material UI

mui에서 원하는 테이블 레이아웃을 가져온다.

=> overloading 해준다.

const MyTableContainer = styled(TableContainer)`
  > table {

  	> thead {
       > tr {
       	 > th {
         }
       }
    }
    
    > tbody {
      > tr {
      	> th {
          > td {
          }
        }
      }
    }  
    
  }
  `;

이런식으로 MyTableContainer에 mui의 TableContainer를 오버로딩해주고

nesting을 사용하여 커스텀해주면 잘 적용된다 : )