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 component of a page - everything works but...

STYLING: all custom and built-in styling in the page is lost in all the Material UI components (ie. AppBar buttons have no padding/spacing between, custom font styling is messed up).

ICONS: The icons in the table won't render - they just appear as large cut-off text.

Styling and icons on other pages without the table are not affected.

Anybody have a solve? Thanks in advance.

For icons, I tried reinstalling the library and importing. Also tried putting html method. Snippet of the Material Table code is below.

<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);
      }),
  }}
/>

Sodality

Is github.com/mbrn/material-table the library you are using? If so, it's package.json has Material-UI as a dependency rather than a peer dependency. This could cause you to have two versions of Material-UI at once which would be a possible source of your issues. – Reconsider

Relevant GitHub issue: github.com/mbrn/material-table/issues/472 – Reconsider

Thanks a lot @RyanCogswell. That's definitely the issue. I'm under time constraint for the project so I ended up just redoing it with regular material ui - I'm not experienced enough to quickly fix the dependency issue (not a coder by training, so I only pick up coding when we're under time crunch). I have same material ui version as material table --> 4.0.1. If anyone could direct me to some resources to solve, that'd be appreciated! - otherwise I will research later. – Sodality

@RyanCogswell how would one sort out having two versions of Material-UI at once? I'm using @material-ui/[email protected] and see in the package-lock.json file that "material-table" "version": "1.40.1" has both @material-ui/core": "^4.0.1 and then as a dependency @material-ui/core": {"version": "4.2.1",... My SO post #57204904 – Chondrule

I downgraded my material-ui/core and icons to 4.0.1, the same as the dependency listed for material-table and that fixed it. – Chondrule

Answer 1

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

Waynewayolle

Answer 2

There is a possibility that you are using Material-UI v5, which is not fully compatible with the material-table version you are using, which is why it is overriding your Material-UI styles.

To use the version of material-table that supports Material-UI v5, install the material-table core using this command.

npm install @material-table/core@next

or

yarn add @material-table/core@next

Check this link: material-table with @material-ui v5

Tenerife

Answer 3

In my situation, I'm using @material-ui/[email protected], and material-table is using 4.2.1.

You can get the log after installed material-table

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]

so I upgrade material ui to @material-ui/[email protected] by yarn add @material-ui/[email protected]. and then it works.

Brockwell