title: Material-Table: styling is overiding all custom and Material UI styling and icons not rendering
body: <p>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...</p>
  
  <p>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). </p>
  
  <p>ICONS: The icons in the table won't render - they just appear as large cut-off text. </p>
  
  <p>Styling and icons on other pages without the table are not affected.</p>
  
  <p>Anybody have a solve? Thanks in advance.</p>
  
  <p>For icons, I tried reinstalling the library and importing. Also tried putting 
  html method. Snippet of the Material Table code is below.</p>
  
  <pre><code>&lt;MaterialTable
    title="Editable Example"
    columns={state.columns}
    data={state.data}
    actions={[
      {
        icon: 'edit',
        tooltip: 'Edit Study',
        onClick: (event, rowData) =&gt; alert("Do you want to edit " + rowData.name + "?") 
      },
      rowData =&gt; ({
        icon: 'clear',
        tooltip: 'Delete User',
        onClick: (event, rowData) =&gt; alert("You want to delete " + rowData.name), 
        disabled: rowData.birthYear &lt; 2000
      })
    ]}
    editable={{
      onRowAdd: newData =&gt;
        new Promise(resolve =&gt; {
          setTimeout(() =&gt; {
            resolve();
            const data = [...state.data];
            data.push(newData);
            setState({ ...state, data });
          }, 600);
        }),
      onRowDelete: oldData =&gt;
        new Promise(resolve =&gt; {
          setTimeout(() =&gt; {
            resolve();
            const data = [...state.data];
            data.splice(data.indexOf(oldData), 1);
            setState({ ...state, data });
          }, 600);
        }),
    }}
  /&gt;
  </code></pre>