overriding the MuiTable-root class in material table

I have been trying to override the muitable-root class when using the material table component but havent been able to get it to work. Any idea what I'm doing wrong?

style:

const useStyles = makeStyles(theme => ({ root: { '& .MuiTable-root': { borderCollapse: 'separate' } } })) 

component call:

<MaterialTable classes = {useStyles.root} tableRef = {ref} icons = {tableIcons} title = {props.title} columns = {props.columns} data = {props.data} /> 

2 Answers

I checked the source code of material-table, and looks like it's not accepting classes for styling most of the appearance, it only affects the Footer part. Check this function and this line, that's the only place using props.classes.

If this style can be applied globally, maybe you could use material-ui's customization suggestion, here or here.

When using classes prop you need to use predefined rule name.

You can find them in CSS part of components API

As You can see for .MuiTable-root there is root rule name so You have to use it as key in you classes object.

import { makeStyles } from '@material-ui/core/styles'; const useStyles = makeStyles({ myCustomStyles: { border: "1px solid red" } }); 

const myClasses = useStyles(); <MaterialTable classes = {{ root: myClasses.myCustomStyles }} tableRef = {ref} icons = {tableIcons} title = {props.title} columns = {props.columns} data = {props.data} />