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

问题

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

回答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.

来源：https://stackoverflow.com/questions/56794892/material-table-styling-is-overiding-all-custom-and-material-ui-styling-and-icon

标签

css

reactjs

icons

material-ui

material-table