Material-UI Data Grid 컴포넌트에서 셀 테두리를 제거하는 방법

제목: Material-UI의 Data Grid 컴포넌트에서 셀 테두리 제거하는 방법

이 튜토리얼에서는 Material-UI의 Data Grid 컴포넌트에서 셀 테두리를 제거하는 방법에 대해 알아보겠습니다. Data Grid는 Material-UI에서 제공되는 강력한 테이블 컴포넌트이지만, 기본적으로 셀을 클릭하면 테두리가 나타나기 때문에 일부 사용자는 이를 원하지 않을 수 있습니다. 이 테두리를 제거하고 더 깔끔한 테이블 모양을 얻는 방법을 안내하겠습니다.

단계 1: 문제 파악하기

해결책을 진행하기 전에 문제를 이해해 봅시다. Data Grid 컴포넌트를 사용할 때, 각 셀은 클릭하면 테두리가 표시됩니다. 이 동작은 Material-UI의 기본 스타일링이며, 원하는 디자인과 일치하지 않을 수 있습니다.

단계 2: 해결책 적용하기

셀 테두리를 제거하기 위해 기본 스타일링을 간단한 CSS 규칙으로 덮어씌울 수 있습니다. 다음 코드를 CSS 파일에 추가하세요:

.MuiDataGrid-root .MuiDataGrid-cell:focus-within {
  outline: none !important;
}

위 코드는 Data Grid 컴포넌트 내에서 포커스를 받는 셀을 대상으로 하며, 클릭 시 테두리 효과를 생성하는 아웃라인을 제거합니다.

단계 3: 해결책 적용하기

이제 문제를 파악하고 해결책을 찾았으므로, React 컴포넌트 내에서 이를 적용해 봅시다. 위 CSS 규칙이 포함된 CSS 파일을 임포트하는지 확인하세요.

{`
import React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import './styles.css'; // CSS 파일 임포트

const MyTable = () => {
  const rows = [...]; // 테이블 행 정의
  const columns = [...]; // 테이블 열 정의

  const handleCellClick = (params) => {
    // 셀 클릭 이벤트 처리
  };

  return (
    <div>
      <DataGrid
        disableSelectionOnClick
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5, 10, 15]}
        checkboxSelection
        onCellClick={handleCellClick}
      />
    </div>
  );
};

export default MyTable;
`}

CSS 파일이 임포트되었는지 확인하고, CSS 규칙의 클래스 이름이 CSS 파일의 클래스 이름과 일치하는지 확인하세요.

결론

이 튜토리얼의 단계를 따라가면 Material-UI의 Data Grid 컴포넌트에서 셀 테두리를 성공적으로 제거할 수 있습니다. 기본 CSS 스타일링을 덮어씌움으로써 더 깔끔하고 사용자 정의된 테이블 모양을 얻을 수 있습니다. 필요한 CSS 파일을 임포트하고, Data Grid 컴포넌트 내의 셀을 대상으로 하는 제공된 CSS 규칙을 적용하는 것을 잊지 마세요.

스타일링을 즐기세요!

참고 자료 : 

reactjs