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

编程问答 2022-12-09

问题描述

所以我在 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 导入前

before import makeStyles

导入后的EG

after import makeStyles

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;

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

makestylesmaterial-uireactjsreactjsreactjsreactjs