Material-UI: The key `caption` provided to the classes prop is not implemented in ForwardRef(TablePagination)

user_15044859 0
Viewed 3543

I added simple DataGrid to my component

<div className='Employees'>
      <Button onClick={queryEmployees}>Employees</Button>
      <DataGrid rows={rows} columns={columns} autoHeight={true}/>
      ...
</div>

and I get this error in console

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

I don't understand this error, nor what causes it and I have no idea how to debug it.

material-ui reactjs
3 Answers

I also get the same error.

"material-table": "^1.69.2",
"@material-ui/core": "^5.0.0-alpha.24",
"@material-ui/data-grid": "^4.0.0-alpha.21",

But I don't get any issue with the below versions.

"@material-ui/core": "^4.11.0",
"material-table": "^1.69.2",
"@material-ui/data-grid": "^4.0.0-alpha.18",

Update:

DataGrid comes under lab click here for more information.

Kindly check the currently available document version and your @material/core version to fix the issue.

user_84378770

Somewhere in your code, you're using the caption in one of the components to override its styling. This happens when you for example pass a class list that contains extra attributes, not supported by the component.

Looking at the error, this seems to be happening with the TablePagination component.

const useStyles = makeStyles(() => {
    root: {},
    caption: { color: "red" },
}
   
const MyComponent = () => {           
   classes = useStyles();
   return <TablePagination classes={classes} {...restProps} />
}

caption isn't supported by this Material UI Component. Therefore, a Typescript error is thrown. Search your code and remove this additional attribute to solve the problem.

You can find here the possible attributes that you can use. https://material-ui.com/api/table-pagination/

user_50695050

The problem is now gone after I updated material ui dependencies. I managed to get data-grid working with core v5 but I think I had to install styles for it to work. This is what I have now installed and it's working fine.

(note: you probably don't need all of these, but I will leave it here, maybe it will help someone):

"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^5.0.0-beta.1",
"@material-ui/data-grid": "^4.0.0-alpha.33",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/pickers": "^3.3.10",
"@material-ui/styles": "^4.11.4",
user_150448590
Related