CODEWITHSUNDEEP
javascriptmaterial-uimaterial-table
CaptainObv
CaptainObv

Reputation: 422

ReactJs: Material-UI table - changing padding

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)

Upvotes: 7

Views: 22683

Answers (4)

Richard
Richard

Reputation: 51

you could also extend your mui-theme to align table styles globally to your design needs using "Themed Components" Feature.

you can use classic style definitions like this in your theme definition:

const getTheme = () =>
  createTheme({
    palette: { ...paletteConfig },
    typography: { ...typoConfig },
    // themed components
    components: {
      MuiTableCell: {
        styleOverrides: {
          sizeSmall: {
            padding: '2px 4px',
          },
          // this changes the styles of the default table cells
          sizeMedium: {
            padding: '4px 8px',
          },
          // feeling brave, you can apply it even for any table mui cell (careful!)
          root: {
            padding: 0,
          },
        },
      },
    },
  })

Full Table element Documentation: TableCell API

See MUI - how to customize

Upvotes: 0

Mahdi Cheraghi
Mahdi Cheraghi

Reputation: 156

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.

Upvotes: 1

ViktorMS
ViktorMS

Reputation: 1341

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>

Upvotes: 4

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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">
        ...

Upvotes: 7

Related Questions