Customize the CSS for MaterialUI's TablePagination's MenuItem

Question

Having trouble figuring out how to override CSS for the child component MenuItem within TablePagination? Check out this link for more information: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TablePagination/TablePagination.js

This is how I am using the component:

<TablePagination 
    colSpan={2}
    count={2} 
    rowsPerPage={2} 
    classes={{
        root: classes.root, caption: classes.caption 
    }} />

I'm struggling to pass styles to the MenuItem. Any suggestions?

It appears that a new version of material-ui has addressed this issue. You can find more details here: https://github.com/mui-org/material-ui/pull/11200/files. But what should I do if I cannot upgrade?

Thank you!

Answer 1

Answer №1

After some experimentation, I discovered a clever workaround. To achieve this, I created a SelectProps object:

selectProps = {
    MenuProps: {
        classes: {
            paper: "bar"
        }
    }
};

Subsequently, I integrated it into the TablePagination component like so:

<TablePagination SelectProps={this.selectProps} />

This assigns the CSS class "bar" to the parent element of the select component. From there, I was able to easily override the styling for "bar".

Answer 2

After some experimentation, I discovered a clever workaround. To achieve this, I created a SelectProps object:

selectProps = {
    MenuProps: {
        classes: {
            paper: "bar"
        }
    }
};

Subsequently, I integrated it into the TablePagination component like so:

<TablePagination SelectProps={this.selectProps} />

This assigns the CSS class "bar" to the parent element of the select component. From there, I was able to easily override the styling for "bar".