Настроить заполнение таблицы UI Table - last-child

Question

Я пытаюсь настроить заполнение таблицы Material-UI. "last-child" получает отступ 24px, который я хочу настроить. Я пытался переопределить тему и использовать классы {{root: classes.xxx}}, но не могу изменить ее. Ниже приведен код, который я использовал для переопределения темы (я также пытался переопределить MuiTableRow и MuiTableColumn):

const theme = createMuiTheme({

overrides: {
MuiTableCell: {
  root: {
    paddingTop: 4,
    paddingBottom: 4,
        '&  $lastChild': { paddingRight: '5px' },
  },
  paddingDefault: {
    padding: '40px 12px 40px 16px',
  },

  },
},
});

Это CSSS, который я пытаюсь изменить (последняя ячейка каждой строки в таблице):

.MuiTableCell-root-511:last-child {
    padding-right: 24px;
}

Надеюсь, что кто-то может протянуть руку помощи.

/ЧАС

Answer 1

Это правильный подход, у вас просто есть несколько синтаксических ошибок в вашем JSS.

Последний дочерний селектор должен быть:

'&:last-child': {}

Вот полный пример

const theme = createMuiTheme({
  overrides: {
    MuiTableCell: {
      root: {
        paddingTop: 4,
        paddingBottom: 4,
        "&:last-child": {
          paddingRight: 5
        }
      }
    }
  }
});

Answer 2

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

      const useStyles = makeStyles({
  cell: {
    '&:last-child': {
      paddingRight: 5,
    },
  },
});

Предоставьте это своему TableCell как обычно;

      <TableCell className={classes.cell}>

Это переопределит &:last-childатрибут вашей ячейки. Я обнаружил, что этот метод немного удобнее, когда я больше ничего не меняю в теме.

Answer 3

В MUI v5 вы можете использоватьsxprop и выберите последний TableCell нравится:

      <Table
  sx={{
    '& .MuiTableCell-root:last-child': {
      bgcolor: 'pink',
    },
  }}
>

Или если вы хотите использовать createTheme() переопределить глобально:

      const theme = createTheme({
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          '&:last-child': {
            backgroundColor: 'tomato',
          },
        },
      },
    },
  },
});

Живая демонстрация