reactjs - Material UI makeStyles 在我导入时破坏了我的组件样式

Question

所以我在一个反应​​项目中使用 next@material-ui 。问题是当将我的makeStyle钩子导入导航栏时，它会破坏我在应用程序其余部分上的 CSS。这是我的项目结构：

索引.js

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <React.Fragment>
          <CssBaseline />
          <App />
        </React.Fragment>
      </ThemeProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

应用程序.js

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar /> // <-- I'm trying to import makeStyles into this component
        <Switch>
          <PrivateRoute exact path="/" component={Home} />
          <PrivateRoute exact path="/new" component={CreatePost} />
          <PrivateRoute exact path="/about" component={AboutMe} />
          <PrivateRoute exact path="/post/:id" component={Post} />
          <PrivateRoute exact path="/t/:id" component={TagPage} />
        </Switch>
      </Router>
    </div>
  );
}

导航栏.jsx

 import useStyles from '../../styles/layout/navbar.styles';

const Navbar = (props) => {
   const classes = useStyles();
   ...

它打破了我所有的css ex：

EG brefore 进口

EG导入后

导航栏样式.js

import { makeStyles } from '@material-ui/core';

import { blueGrey, indigo } from '@material-ui/core/colors';

const useStyles = makeStyles((theme) => ({
  navBar: {
    backgroundColor: theme.palette.background.paper,
    color: blueGrey[900],
    borderBottom: '1px solid #e2e2e2',
  },
}));

export default useStyles;

你们可以看到它把所有东西都挤在一起了，我该如何解决这个问题？是我如何构建我的项目的问题吗？我不明白。非常感谢你们的时间！