CODEWITHSUNDEEP
reactjsmaterial-ui
Giuseppe Fantoni
Giuseppe Fantoni

Reputation: 333

Change color label TablePagination Material UI

I have that table with that label for pagination.

enter image description here

(1-10 de 15)

And I use the TablePagination from Material UI.

import TablePagination from '@mui/material/TablePagination';

I would like to know how I change this label's color.

Upvotes: 0

Views: 1863

Answers (1)

Prashant Jangam
Prashant Jangam

Reputation: 2838

you can open the chrome dev tools and inspect/check the CSS rule used for particular component then use that rule name in SX props and overwrite it with your own css properties. You can also check the API page for that component for all CSS rules used in the component.

for your case check following code,

<TablePagination
...
  sx={{
    ".MuiTablePagination-displayedRows": {
      color: "red",
    },
    ".MuiTablePagination-selectLabel": {
      color: "green",
    },
  }}
/>

Edit TablePagination Material Demo (forked)

Upvotes: 2

Related Questions