How to add curson style "not-allowed" to Material UI datagrid disabled row?

Viewed 673

I've a conditional disabled row in material ui data grid where user cannot select or perform actions on it. I want to show cursor: "not-allowed" on this row. How can we add styling to that row? As we don't have any parameter in rows specifying that it's a disabled row.

      <DataGrid
        rowHeight={75}
        components={{
          NoRowsOverlay: CustomNoRowsOverlay,
        }}
        onSelectionModelChange={currentlySelected}
        selectionModel={[...selected]}
        columns={columns}
        rows={rows}
        autoHeight
        disableSelectionOnClick={disableSelectionOnClick}
        {...props}
        checkboxSelection={role === ROLES.ADMIN}
        disableColumnMenu
        isRowSelectable={(params) =>
          !(params?.row?.id === currentUserID)
        }
      />

and This is what disabled row and normal row look like in browser inspect element. First one is disabled row here. enter image description here

CSS implementation for root class, in which the datagrid is wrapped.

root: {
  '& .MuiDataGrid-columnsContainer': {
    backgroundColor: theme.palette.secondary.main,
    color: theme.palette.text.light,
    lineHeight: '62px !important',
    maxHeight: '62px !important',
    minHeight: '62px !important',

    '& .MuiCheckbox-root': {
      color: theme.palette.checkbox.secondary,
    },
  },
  '& .MuiDataGrid-cell, & .MuiDataGrid-columnHeader': {
    outline: 'none !important',
  },
  '& .MuiDataGrid-window': {
    backgroundColor: colors.bgColor.secondary,
  },
  '& .MuiDataGrid-columnSeparator': { display: 'none' },
  '
  '& .MuiCheckbox-root': {
    color: theme.palette.checkbox.main,
  },
  '& .MuiDataGrid-sortIcon': {
    color: theme.palette.iconColor.default,
  },
  '& .MuiCheckbox-colorPrimary.Mui-disabled': {
    color: 'rgba(0, 0, 0, 0.26)',
  },
},
1 Answers

Apply your own custom css styles and import it to your component :

import './custom.css'
.MuiCheckbox-colorPrimary.Mui-disabled {
  cursor: not-allowed !important;
}
Related