Как стилизовать (добавить css) таблицу материалов (React)?

Question

Я искал несколько дней и ничего не могу найти. Я использую таблицу материалов в React, но не могу понять, как добавить css в заголовки (столбцы таблицы) и содержимое [например, изменение размера шрифта, ширины и создание строк таблицы с полосатым фоном].

Может кто-нибудь сказать мне, как я могу это сделать?

Для справки, у меня есть текущая таблица материалов, и я хочу сделать строки чередующимися и изменить внешний вид заголовков (имен столбцов)

<MaterialTable
    title="Title"
    columns={this.state.columns}
    data={newDataTable}
    options={{
      selection: true
    }}
    options={{
      search: false,
      sorting: true
    }}
    actions={[
      {
        icon: () => <Checkbox />,
        tooltip: 'checkbox'
      },
      {
        icon: () => <InfoIcon />,
        tooltip: 'info',
        onClick: (event, item) => {
          this.setState({
            isOpen: true,
            selectedItem: item
          });
        }
      }
    ]}
  />
</div>

Редактировать: Также не могу понять, как изменить содержимое строк. Как, например, я хочу добавить значок перед каждым элементом, соответствующим его данным. В настоящее время я просто использую массив js для отображения данных stati c, но не могу его отредактировать.

Answer 1

Просто определите стили в свойстве columns:

this.setState({
    columns: {[
        {
            title: 'Name', field: 'name',
            cellStyle: {
              backgroundColor: '#039be5',
              color: '#FFF'
            },
            headerStyle: {
              backgroundColor: '#039be5',
            }
          },
          // Other columns
    ]}
});

См. https://material-table.com/# / docs / features / styling