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

【问题标题】：Trouble styling TablePagination to-from on material-table麻烦在材料表上设置 TablePagination to-from
【发布时间】：2021-06-11 19:08:34
【问题描述】：

我正在尝试在 Material-Table 上设置 from-to of x 行数的样式，通过

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>
              )}
            />
          )
        }}
/>

我觉得这两个 CSS 选择器应该是多余的，但两者都不起作用。我觉得材料表正在覆盖它们，因为计算的字体大小是0.75rem .MuiTypography-caption。还尝试通过根而不是标题进行样式设置，在那里也没有区别。

我已经能够为要显示的行数设置下拉选择器的样式，这似乎同样适用于此。最初是使用this 方法开始的，但也不起作用。

【问题讨论】：

标签： css reactjs material-ui material-table

【解决方案1】：

最终用MuiThemeProvider 解决了这个问题，我不认为普通的ThemeProvider 与Material-table 一起工作

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

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

那么，

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

不过，这将使用类 MuiTypography-caption 设置任何样式

【讨论】：