Настроить таблицу материалов для пользовательского интерфейса - последний ребенок

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;
}

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

/ H

Answer 1

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

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

'&:last-child': {}

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

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