麻烦在材料表上设置 TablePagination to-from

Question

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.

Answer 1

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