Question

我试图通过

设置材质表上的 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 方法开始，这也不起作用。

Answer 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 设置任何样式

材料表上的表分页样式问题

1 个答案: