Material-Table: styling is overiding all custom and Material UI styling and icons not rendering

Question

I\'m trying to use Material-Table component - it\'s perfect for a table that I\'m buildling (add, edit, delete and search rows). I\'ve installed and used it as a child compo

Answer 1

In my situation, I'm using @material-ui/core@4.0.0-beta, and material-table is using 4.2.1.

You can get the log after installed material-table

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

so I upgrade material ui to @material-ui/core@4.2.1 by yarn add @material-ui/core@4.2.1. and then it works.

Answer 2

to fix icons not showing you have to add :

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}
  ...
/>

official docs : https://github.com/mbrn/material-table