1

I'm using material ui for a react app. I'm also using material table. My nav bar just uses the default styling that material ui provides. This has been working fine. However when I add material table to the page, the nav bar goes from blue to white! I'm not sure how to resolve this. The code is below:

class ProfilePage extends React.Component {

  render() {

    const rows = [
      { title: "Time", field: "time" },
      { title: "Type", field: "type" },
      { title: "Feature", field: "feature" },
      { title: "Weight", field: "weight" }
    ];

    const {Profile, error, match } = this.props;
    const features = Profile;
    const userId = `ID: ${match.params.userId}`;

    if (error || Object.entries(tasteProfile).length === 0) {
      toastr.error(error);
      featureTable = <h2>Couldn't find profiles for that id</h2>;
    }

    return (
      <div>
        <NavBar />
        <Typography id="userId" variant="h6" color="inherit">
          {userId}
        </Typography>
        <Paper> 
        <div>
      <MaterialTable
        title="Profiles"
        columns={rows}
        data={features["features"]}
        >
        </MaterialTable>
    </div>
        </Paper>
      </div>
    );
  }
}

Grateful for any help!

Nespony
  • 1,253
  • 4
  • 24
  • 42
  • I have the same issue I believe: https://stackoverflow.com/questions/57204404/adding-component-with-material-table-changes-material-ui-appbar-style I came across https://stackoverflow.com/questions/56794892/material-table-styling-is-overiding-all-custom-and-material-ui-styling-and-icon and will try to sort out the two different `material-ui/core` versions – tw1742 Jul 25 '19 at 15:30

2 Answers2

1

Try using the same versions of material-ui/core and material-ui/icons that material-table uses as seen in the package-lock.json file. I was able to fix my AppBar CSS style issue by downgrading these to the same version.

npm uninstall @material-ui/core
npm uninstall @material-ui/icons

npm install @material-ui/core@4.0.1
npm install @material-ui/icons@4.0.1
tw1742
  • 1,424
  • 4
  • 18
  • 37
0

Have you tried including the Material table stylesheet before the Material UI kit one?