Применяя конкретную тему для реагирования материала-таблицы

Question

Я пытаюсь интегрировать таблицу материалов реакции ( https://github.com/mbrn/material-table) с моим проектом.

1. Я хочу обновить стиль / тему.

Я использовал что-то вроде.

<MaterialTable options={{
                        rowStyle: x => {
                            if ( x.id % 2 ) {
                            return { backgroundColor: "#f2f2f2" }
                            }
                        },
                        'headerStyle' : {
                            backgroundColor: 'red',
                            color: theme.palette.common.white
                        }
                        }}
    columns={columns}
    data={data}
    title="New Table"
/>

Однако я хочу иметь общий стиль и тему, как

const CustomTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

По сути, я хочу иметь что-то вроде CustomMaterialTable, которое является не чем иным, как моей темой / стилем.

2. Чередование строк таблицы. В приведенном выше фрагменте кода я использовал логику для создания полосатых строк.

if ( x.id % 2 ) {
    return { backgroundColor: "#f2f2f2" }
}

Поскольку моя таблица будет иметь сортировку, я хочу, чтобы она была с автоматически сгенерированным идентификатором строки, а не с x.id (где x - мои данные).

3. Я хочу использовать RTL и текст на нескольких языках в зависимости от выбора языка (динамический).

Answer 1

1. Вы можете переопределить компоненты. Посмотрите на пример: https://mbrn.github.io/material-table/

2. Ты можешь попробовать x.tableData.id вместо x.id, пожалуйста?

3. Вы должны использовать материал-тему с указанием направления (ltr или rtl): https://material-ui.com/customization/themes/

Answer 2

вы можете использовать makeStyles UI материала для изменения темы таблицы материалов. В этом примере, когда я меняю внешний вид таблицы материалов, я реализовал полосатые строки, используя

      '&:nth-child(even)': {
      backgroundColor: '#FAF7FA',
 },

потому что при использовании rowStyle и после изменения сортировки таблицы удаленные строки остаются прикрепленными к своим основным полям.

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

      export const useClasses = makeStyles(({ palette }) => ({
  root: {
    borderTopRightRadius: '12px',
    borderTopLeftRadius: '12px',
    boxShadow: '0px 5px 40px rgb(0 0 0 / 10%)',
    fontFamily: 'Montserrat',
    overflow: 'hidden',
    '& .MuiPaper-root ': {
      boxShadow: 'none',
    },
    '& .MuiTable-root': {
      color: palette.text.textPrimary,
      '& .MuiTableHead-root': {
        '& .MuiTableRow-head': {
          '& .MuiTableCell-head': {
            background: 'rgba(90, 0, 90, 0.09)',
            color: palette.text.textPrimary,
          },
        },
      },
      '& .MuiTableRow-root': {
        '&:nth-child(even)': {
          backgroundColor: '#FAF7FA',
        },
      },
    },
  },
}));