How to remove cell border in Data Grid component of Material-Ui

Viewed 4482

I'm implementing a table with the data grid component.Data Grid - Material UI

Every cell, when clicked, receives this border, how do I remove it?

enter image description here

<DataGrid
  disableSelectionOnClick={true}
  className={classes.main}
  classes={classes.main}
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5,10,15]}
  checkboxSelection={true}
  disableColumnSelector
  disableDensitySelector
  onCellClick={click}
  disableColumnFilter
  disableColumnMenu
/>

I don't want to remove the cell, I want the border not to appear when I click on the cell

1 Answers

apply this code on css and make sure to import css on react component

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