Targeting Detailed Expand Row table

[ryjogo]

Hi all, i'm having a hard time targeting mui styles in general, i feel i missing something here.. the idea is to be rid of the padding on the detailed expand row, but not much seems to work. Isn't the general idea that one can target the mrt components this way?

        displayColumnDefOptions={{
          'mrt-row-expand': {
            padding: "none",
            muiTableProps: {
              padding: "none"
            },
            muiTableBodyProps: {
              padding: "none",
            },
            muiTableHeadCellProps: {
              padding: "none",
            },
            muiTableBodyCellProps: {
              padding: "none"
            },
          },
        }}

[KevinVandy]

You have to put styles in the sx prop for each of those. Pay attention to the ts hints and you should be good.

[ryjogo]

Am i even targeting the correct element here?

i tried with:

      displayColumnDefOptions={{
        'mrt-row-expand': {
          muiTableProps: {
            sx: {
              padding: '0',
            },
          },
          muiTableBodyProps: {
            sx: {
              padding: '0',
            },
          },
          muiTableHeadCellProps: {
            sx: {
              padding: '0',
            },
          },
          muiTableBodyCellProps: {
            sx: {
              padding: '0',
            },
          },
        },
      }}

[KevinVandy]

Styling with the sx prop uses styled components emotion api under the hood, so you can use all the styled component conventions. Read more here in the MRT docs https://www.material-react-table.com/docs/guides/customize-components#styling-material-ui-components

[KevinVandy]

Though this thread has given me the idea to make the detail panel CSS a little easier to target. I'm going to add some built in classNames to differentiate them from other rows.

[KevinVandy]

There alrady is the muiTableDetailPanelProps prop which is probably what you are looking for if all you want to do is remove some padding

[ryjogo]

yeah that does the trick - thanks