CSS被覆盖?

时间:2019-07-12 15:04:38

标签: reactjs material-ui material-table

我正在将Material ui用于React应用。我也在用材料表。我的导航栏仅使用材质ui提供的默认样式。这一直很好。但是,当我在页面上添加材质表时,导航栏会从蓝色变为白色!我不确定如何解决此问题。代码如下:

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

感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

您是否尝试过在Material table之前加入Material UI kit样式表?

答案 1 :(得分:0)

尝试使用与材料表使用的相同版本的material-ui / core和material-ui / icons,如package-lock.json文件中所示。通过将这些应用程序降级到相同的版本,可以解决我的AppBar CSS样式问题。

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