Замените или добавьте имена классов пользовательского интерфейса материалов в имена классов компонентов таблицы данных React

Question

Мне бы хотелось, чтобы в моей таблице данных React были классы Material Ui, чтобы она могла лучше работать с остальной частью моего приложения. В документации было упомянуто, что вы можете переопределить css со стилизованными компонентами, но мне не удалось это сделать, и я не нашел пример.

Я хотел бы добавить имена классов Mui к именам классов rtd для пример:

<div class="rdt_TableCell"/>

должно быть

<div class="rdt_TableCell MuiTableCell"/>

ссылка на упомянутую функцию:

https://www.npmjs.com/package/react-data-table-component#css -определение

немного базовой c песочницы, с которой можно поиграть:

https://codesandbox.io/s/react-data-table-materialui-9iebe

Answer 1

Библиотека компонента р-таблицы-данных в настоящее время не предоставляет способа настройки имени класса ячейки . Когда речь идет о переопределении CSS с использованием стилевых компонентов, это означает такой подход, как следующий:

const StyledDataTable = styled(DataTable)`
  & .rdt_TableCell {
    background-color: lightblue;
  }
`;

Это позволяет настроить CSS свойств, связанных с классом rdt_TableCell, но не дает простого способа использовать стили Material-UI TableCell , кроме как путем их копирования.