Блог

Для этого приложения fullstack я перешел в исходные разработчики, похоже, внедрили какой-то компонент для создания таблиц для веб-страницы приложения

Проблема в том, что заполнение всех ячеек довольно велико. Открывая отображаемую страницу в Chrome и используя инструменты разработчика Chrome, я вижу

 .MuiTableCell-sizeSmall{
    padding: 6px 24px 6px 16px;
}
  

Похоже, что MuiTableCell напрямую не реализован в коде (следовательно, я увижу его только в отображаемом DOM, а не в коде) . Похоже, что в основном он реализует material-ui и material-table.

У меня есть небольшой опыт работы с интерфейсом, но я не знаком с тем, что делать дальше, чтобы изменить заполнение.

В частности, играя с инструментами разработчика Chrome, я хочу установить правильное заполнение (с разрешением 24 пикселя) до 0 пикселей, чтобы отображаемый DOM использовал это

 .MuiTableCell-sizeSmall{
    padding: 6px 0px 6px 16px;
}
  

Любой совет?

Некоторые импортные файлы из @Material-UI, которые, я думаю, могут иметь отношение к делу: панель инструментов, панель приложений, FormControl, InputField, TextField, ViewColumn и TablePagination

И импортированные из material-table являются ‘ MaterialTable и MTableToolbar

В intellij я выполнил слепой поиск и обнаружил, что свойство SizeSmall, похоже, происходит из TableCell (часть material-ui)

Этот CSS — это работа small value for size prop.

Один из способов переопределить его — использовать makeStyles и переопределять .MuiTableCell-sizeSmall

 import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customTable: {
    "amp; .MuiTableCell-sizeSmall": {
      padding: "6px 0px 6px 16px" // <-- arbitrary value
    }
  },
});

function YourComponent() {
  const classes = useStyles();

  return (
    ...
      <Table classes={{root: classes.customTable}} size="small">
        ...
  

Верхний ответ устарел, см.: https://mui.com/system/styled /

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

 const StyledTableCell = styled(TableCell)({
  padding: 0,
})
  

Затем вы можете использовать пользовательский или исходный компонент ячейки в своей таблице.

 <TableContainer>
  <Table>
    <TableBody>
        <TableRow>

          <TableCell>Normal cell.</TableCell>

          <StyledTableCell>Custom style here.</StyledTableCell>

          <TableCell align="right">Great.</TableCell>

        </TableRow>
    </TableBody>
  </Table>
</TableContainer>