Как уменьшить Material-UI TableFooter высоту - PullRequest
Новая
       7

Как уменьшить Material-UI TableFooter высоту

0 голосов
/ 27 апреля 2019

Как уменьшить высоту компонента TableFooter? Я пытаюсь уменьшить высоту компонента TableFooter в пользовательском интерфейсе материалов, но ниже 56px, высота нижнего колонтитула не становится меньше. Однако нет никаких проблем в увеличении / увеличении.

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

const theme = createMuiTheme({
  overrides:{
      MuiTableRow: {
          root: { //for the body
              height: "100%"
          },
          head: { //for the head
              height: "100%"
          },
          footer: {
            height: '30px',
            minHeight: '20px',
            backgroundColor: 'grey'
          },
      }
  }
})

Код для моей таблицы в основном основан на демонстрации Custom Pagination с веб-сайта Material-UI, за исключением кодов, которые пытаются уменьшить размер нижнего колонтитула. 

<Paper className={classes.root}>
  <div className={classes.tableWrapper}>
    <Table className={classes.table} padding={"none"}>
      <TableHead>
        <TableRow>
          <TableCell>Dessert (100g serving)</TableCell>
          <TableCell align="right">Calories</TableCell>
          <TableCell align="right">Fat (g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
          <TableRow key={row.id}>
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            <TableCell align="right">{row.calories}</TableCell>
            <TableCell align="right">{row.fat}</TableCell>
          </TableRow>
        ))}
        {emptyRows > 0 && (
          <TableRow style={{ height: 48 * emptyRows }}>
            <TableCell colSpan={4} />
          </TableRow>
        )}
      </TableBody>
      <TableFooter className={classes.footer}>
        <TableRow className={classes.footer}>
          <TablePagination
            rowsPerPageOptions={[]}
            colSpan={3}
            count={rows.length}
            rowsPerPage={rowsPerPage}
            page={page}
            SelectProps={{
              native: true,
            }}
            onChangePage={this.handleChangePage}
            ActionsComponent={TablePaginationActionsWrapped}
            style={{ padding: 0, margin: 0 }}
          />
        </TableRow>
      </TableFooter>
    </Table>
  </div>
</Paper>

https://codesandbox.io/s/moj46v62oy?fontsize=14

Текущий вывод, размер которого не становится меньше этого. Я надеялся уменьшить расстояние между верхом и низом стрелки.

1 Ответ

0 голосов
/ 30 апреля 2019

Вы можете использовать: 

footer: {
    "& > td > div": {
      height: 30,
      minHeight: 30
    },
    backgroundColor: "grey",
    height: 30
  }

Это должно стать проще, когда выйдет v4 и будут использованы глобальные стили.

Пример: https://codesandbox.io/s/pmokwxxmvj

...