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

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/#/docz-examples-10-example-component-overriding

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

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