Trouble styling TablePagination to-from on material-table

user_13800591 0
Viewed 212

I am attempting to style the from-to of x rows number on a Material-Table, via

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 feel like those two css selectors should be redundant, but neither is working. I feel like material-table is overriding them as the computed font size is 0.75rem .MuiTypography-caption. Have also attempted styling via the root rather than caption with no difference there either.

I have been able to style the dropdown selector for number of rows to display, which seems like the same should apply to this. Originally started with this approach, which also did not work.

material-table material-ui reactjs css
1 Answers

Ended up solving this with MuiThemeProvider, I dont think the normal ThemeProvider is working with Material-table

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'

const theme = createMuiTheme({
  overrides: {
        MuiTypography: {
          caption: {
            fontSize: '1.5rem'
          }
  }
})

then,

<MuiThemeProvider theme={theme}>
        <MaterialTable />
</MuiThemeProvider>

Although, this will style anything with class MuiTypography-caption

user_138005910
Related