Таблица материалов: стиль перекрывает все пользовательские стили и стили пользовательского интерфейса материалов, а также значки, которые не отображаются.

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

СТИЛИРОВАНИЕ: все настраиваемые и встроенные стили на странице теряются во всех компонентах пользовательского интерфейса материала (т. Е. Кнопки 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);
      }),
  }}
/>

reactjs icons material-ui css material-table
person ckyc    schedule 27.06.2019    source источник
comment
Используемая вами библиотека github.com/mbrn/material-table? Если это так, значит, в package.json есть Материал- Пользовательский интерфейс как зависимость, а не как одноранговая зависимость. Это может привести к тому, что у вас будет сразу две версии Material-UI, что может быть источником ваших проблем.   -  person Ryan Cogswell    schedule 27.06.2019
comment
Соответствующая проблема GitHub: github.com/mbrn/material-table/issues/472   -  person Ryan Cogswell    schedule 27.06.2019
comment
Большое спасибо @RyanCogswell. Это определенно проблема. У меня не хватает времени для проекта, поэтому я просто переделал его с обычным пользовательским интерфейсом материала - у меня недостаточно опыта, чтобы быстро исправить проблему зависимости (не программист по обучению, поэтому я беру кодирование только тогда, когда мы в условиях нехватки времени). У меня такая же версия пользовательского интерфейса материалов, что и у таблицы материалов - ›4.0.1. Если бы кто-нибудь мог направить меня к каким-либо ресурсам для решения, я был бы признателен! - иначе я исследую позже.   -  person ckyc    schedule 27.06.2019
comment
@RyanCogswell, как разобраться с двумя версиями Material-UI одновременно? Я использую @material-ui/[email protected] и вижу в файле package-lock.json, что версия таблицы материалов: 1.40.1 имеет как @material-ui/core": "^4.0.1, так и в качестве зависимости @material-ui/core": {"version": "4.2.1",... My SO post stackoverflow.com/questions/57204404/   -  person tw1742    schedule 25.07.2019
comment
Я понизил свой material-ui / core и значки до 4.0.1, так же, как зависимость, указанная для material-table, и это исправило.   -  person tw1742    schedule 25.07.2019

Ответы (2)


arrow_upward
6
arrow_downward

чтобы исправить значки, которые не отображаются, вам необходимо добавить:

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

<MaterialTable
  icons={tableIcons}
  ...
/>

официальные документы: https://github.com/mbrn/material-table

person larachiwnl    schedule 14.02.2020

arrow_upward
0
arrow_downward

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

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

info Direct dependencies
├─ @material-ui/[email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @date-io/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

поэтому я обновляю пользовательский интерфейс материала до @ material-ui / core @ 4.2.1 с помощью yarn add @material-ui/[email protected]. и тогда это работает.

person Renyuan wang    schedule 21.07.2019