I am trying to customize the appearance of rows numbered from-to of x on a Material-Table, using the following code:
import MaterialTable from 'material-table'
import { TablePagination, withStyles } from '@material-ui/core'
const StyledPagination = withStyles({
caption: {
'&.MuiTypography-caption': {
fontSize: '1.5rem !important'
},
fontSize: '1.5rem !important'
}
})(TablePagination)
<MaterialTable
**Other Props Here**
components={{
Pagination: props => (
<StyledPagination
{...props}
labelRowsPerPage={<div>{props.labelRowsPerPage}</div>}
labelDisplayedRows={row => (
<div>{props.labelDisplayedRows(row)}</div>
)}
/>
)
}}
/>
I believe that both CSS selectors should be unnecessary, but none of them seem to work properly. It appears that material-table is overriding them since the computed font size shows as 0.75rem .MuiTypography-caption. I have also tried styling via the root rather than caption without any success.
Although I managed to style the dropdown selector for the number of rows displayed, I expected similar results here. Initially, I followed this approach but it did not yield the desired outcome either.