index.js:1 Material-UI: The key `selectLabel` provided to the classes prop is not implemented in ForwardRef(TablePagination)

Question

New to react and getting spammed with the same error in console after adding the following component.

Full Error:

Material-UI: The key selectLabel provided to the classes prop is not implemented in ForwardRef(TablePagination). You can only override one of the following: root,toolbar,spacer,caption,selectRoot,select,selectIcon,input,menuItem,actions

I could not find a selectLabel anywhere in my project.

import React, {useState, useEffect} from 'react'
import {DataGrid} from '@material-ui/data-grid'

const columns = [
  {field: '_id', headerName: 'ID'},
  {field: 'value', headerName: 'value', width: 300},
  {field: 'date', headerName: 'date', width: 600}
]

const ReadoutGrid = () => {

  const [tableData, setTableData] = useState([])

 useEffect(() => {
    fetch("http://127.0.0.1:5000/readouts")
    .then((data) => data.json())
    .then((data) => setTableData(data))
 })

  return (
    <div style={{height: 700, width: '100%'}}>
      <DataGrid 
        
        getRowId={(row) => row._id}
        rows={tableData}
        columns={columns}
        pageSize={12}
        checkboxSelection
      />
    </div>
  )
}

export default ReadoutGrid

Answer 1

If you couldn't find selectLabel anywhere in your app, that error is probably triggered by some library that has not been designed to work with mui v4.12.

In this case there is not much you can do, apart from:

• finding what library triggered that error -> then updating it
• downgrading to 4.11 as pointed out in another answer

However, if you manage to find selectLabel in some of your code makeStyles:

const useStyles = makeStyles(() => ({
  root: {
     // ..
  },
  someComponentYouWantedToStyle: {
     // ...
  },
}));

then to get rid of warning you can split that style declaration in two:

const useStyles = makeStyles(() => ({
  root: {
     // ..
  },
}));

const useSomeComponentYouWantedToStyleStyles = makeStyles(() => ({
  root: {
     // ...
  },
}));

This warning shows when selectLabel is used together with mui keys somewhere, then selectLabel is treated as a foreign key that does not exist on correct classes for some element, and here the warning is shown.