Zenn
🚀

【MUI Data Grid v5】スタイルの変更・早引き

2023/08/15に公開
React
datagrid
mui
tech

この記事について

この記事は、UIフレームワークであるMUIのDataGridのスタイル(CSS)を変更する方法を目的別に一覧にしたものです。

  • 筆者の備忘録としての側面が大きいため、DataGridのスタイルの変更について全てを網羅しているわけではなく、情報の偏りがあります。
  • 参考元リンクを掲載している場合もあります。

ヘッダー

ヘッダー行

ヘッダーのセパレーターを無効にする

'& .MuiDataGrid-columnSeparator': {
  visibility: 'hidden',
},

https://stackoverflow.com/questions/67626153/


ヘッダーセル

ヘッダーセルが選択されたときのアウトラインを無効にする

'& .MuiDataGrid-columnHeader:focus': {
  outline: 'none',
}


ヘッダーセルの縦横幅を最大に

'& .MuiDataGrid-columnHeaderTitleContainerContent': {
  width: '100%',
  height: '100%',
},


ボディ

ボディ全体

ボディの左右にボーダーを設定する

'& .MuiDataGrid-virtualScroller': {
  borderRight: '1px solid rgba(224, 224, 224, 1)',
  borderLeft: '1px solid rgba(224, 224, 224, 1)',
},

色は場合により変更して良し。
sx={{border: 'none'}}と組み合わせると、ヘッダーとフッターにはボーダー無しでボディにだけボーダーを設定できる


セル

セルが選択されたときのアウトラインを無効にする

'& .MuiDataGrid-cell:focus': {
  outline: 'none',
},

https://github.com/mui/mui-x/issues/2754


Discussion