ReactJs: Material-UI table - changing padding

Question

For this fullstack app I moved into the original devs seem to have implemented some component to create the tables for the app's webpage

Problem is the padding on all the cells is quite large. Opening the rendered page in chrome and using chrome developer tools I can see

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

It seems like MuiTableCell isn't directly implemented in the code (hence I'll only see it in the rendered DOM and not in the code) . Seems like it mostly implements material-ui and material-table.

I have a little front end experience but I'm not familiar with what to do next to modify the padding.

Specifically, from playing around with the chrome developer tools, I want to set the right padding (set at 24px) down to 0px so that the rendered DOM uses this

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

Any advice?

Some imports from @Material-UI i think might be relevant are: ToolBar, Appbar, FormControl, InputField, TextField, ViewColumn, and TablePagination

And imported from material-table are' MaterialTable, and MTableToolbar

In intellij I did a blind search and found that the SizeSmall property seems to come from TableCell (part of material-ui)

Answer 1

That CSS is the work of small value for size prop.

One of the ways to override it is to use makeStyles and override .MuiTableCell-sizeSmall

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

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

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

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

Answer 2

The top answer is deprecated, see: https://mui.com/system/styled/

Here is how you modify a table cell in MUI, here I remove the default padding for example.

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

You can then use the custom, or the original Cell component in your table.

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

          <TableCell>Normal cell.</TableCell>

          <StyledTableCell>Custom style here.</StyledTableCell>

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

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

Answer 3

You can achieve this customization by using the sx props in the Table component. You can reference the Material-UI documentation for more information on overriding nested component styles. Here's the modified code:

<TableContainer>
  <Table
    sx={{
      '& .MuiTableCell-sizeMedium': {
        padding: '10px 16px',
      },
    }}
  >
    {/* ... */}
  </Table>
</TableContainer>

By following this approach, you'll be able to adjust the padding for cells with the MuiTableCell-sizeMedium class within your Table component.