MUI DataGrid in SPFX solutions
I used Material UI DataGrid (@mui/x-data-grid": "^7.12.1") in SharePoint spfx webpart solution. Obviously, that wasn’t a good decision, but too much was already done.
The difficulties are:
1. The usage of SharePoint theme colors. It’s not impossible, but hard. Get ready for hard CSS implementations. If you use CSS classes, almost always you have to use !important.
.spDataGrid {
color: "[theme: themePrimary, default: #f5f3f3]" !important;
}
Common properties of DataGrid are not applied or do not work properly. For example, I set ‘editable: false’ to all the cells, but when you click a cell, it is selected.
disableColumnSelector,
isCellEditable={(params) => false }
onCellClick={(params, event) => {
event.stopPropagation(); // Prevent cell selection
}}
All these properties should disable the editing mode, but the selected cell was just like ready for the editing mode. I didn’t want that. To disable the editing mode I used this ‘crutch’. In the styles of the DataGrid I disabled the outline.
sx={{
width: 'auto',
"& .MuiDataGrid-columnHeaderTitle": {
whiteSpace: "normal",
lineHeight: "normal",
alignSelf: 'center',
},
'& .MuiDataGrid-cell:focus': {
outline: 'none',
},
'& .MuiDataGrid-cell.Mui-selected': {
backgroundColor: 'inherit',
},
'& .MuiDataGrid-cell': {
userSelect: 'none',
},
}}
There are also other difficulties, for example, the color of the Icon for a Boolean column. I also had to overwrite it with 'renderCell' property, but that was less obvious, than the editable cells.