Material-Table: стилизация переопределяет все пользовательские стили и пользовательский интерфейс Material, а значки не отображаются - PullRequest
Новая
       36

Material-Table: стилизация переопределяет все пользовательские стили и пользовательский интерфейс Material, а значки не отображаются

3 голосов
/ 27 июня 2019

Я пытаюсь использовать компонент Material-Table - он идеально подходит для создаваемой таблицы (добавление, редактирование, удаление и поиск строк).Я установил и использовал его как дочерний компонент страницы - все работает, но ...

STYLING: все пользовательские и встроенные стили страницы теряются во всех компонентах пользовательского интерфейса Material (т.е.Кнопки AppBar не имеют отступов / отступов, пользовательский стиль шрифта испорчен).

ЗНАЧКИ: значки в таблице не отображаются - они просто отображаются в виде обрезанного текста.

Стили и значки на других страницах без таблицы не затрагиваются.

У кого-нибудь есть решение?Заранее спасибо.

Для иконок я попробовал переустановить библиотеку и импортировать.Также попробовал поставить метод html.Ниже приведен код таблицы материалов. 

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Study',
      onClick: (event, rowData) => alert("Do you want to edit " + rowData.name + "?") 
    },
    rowData => ({
      icon: 'clear',
      tooltip: 'Delete User',
      onClick: (event, rowData) => alert("You want to delete " + rowData.name), 
      disabled: rowData.birthYear < 2000
    })
  ]}
  editable={{
    onRowAdd: newData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.push(newData);
          setState({ ...state, data });
        }, 600);
      }),
    onRowDelete: oldData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.splice(data.indexOf(oldData), 1);
          setState({ ...state, data });
        }, 600);
      }),
  }}
/>

1 Ответ

0 голосов
/ 21 июля 2019

В моей ситуации я использую @ material-ui / core @ 4.0.0-beta, а material-table использует 4.2.1.

Вы можете получить журнал после установки таблицы материалов 

info Direct dependencies
├─ @material-ui/core@4.2.1
└─ material-table@1.40.1
info All dependencies
├─ @babel/runtime-corejs2@7.5.5
├─ @date-io/date-fns@1.3.8
├─ @material-ui/core@4.2.1
├─ @material-ui/styles@4.2.1
├─ @material-ui/system@4.3.1
├─ convert-css-length@2.0.1
├─ css-box-model@1.1.3
├─ date-fns@2.0.0-beta.2
├─ debounce@1.2.0
├─ filefy@0.1.9
├─ material-table@1.40.1
├─ normalize-scroll-left@0.2.0
├─ raf-schd@4.0.2
├─ react-beautiful-dnd@11.0.3
├─ react-double-scrollbar@0.0.15
└─ use-memo-one@1.1.1

, поэтому я обновляю интерфейс материалов до @ material-ui / core @ 4.2.1 на yarn add @material-ui/core@4.2.1. и тогда это работает.

...