当我导入时，Material UI makeStyles 破坏了我的组件样式

如何解决当我导入时，Material UI makeStyles 破坏了我的组件样式

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

Index.js

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

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

Navbar.jsx

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

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

它破坏了我所有的 css ex:

EG 导入前

导入后的EG

navbar.styles.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;

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