Блог

Я пытаюсь from-to of x ввести номер строк в таблицу материалов с помощью

 import MaterialTable from 'material-table'
import { TablePagination, withStyles } from '@material-ui/core'

const StyledPagination = withStyles({
    caption: {
      'amp;.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 должны быть избыточными, но ни один из них не работает. Я чувствую, что material-table переопределяет их, как и вычисленный размер шрифта 0.75rem .MuiTypography-caption . Также предприняли попытку стилизации через корень, а не через заголовок, и там тоже нет никакой разницы.

Я смог настроить раскрывающийся селектор для количества отображаемых строк, что, похоже, должно относиться и к этому. Изначально начинали с этого подхода, который тоже не сработал.

В итоге я решил эту проблему с 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-подпись