React 18.2.0搭配Material UI v4中makeStyles不生效问题求助

问题原因 #

你的代码里.App容器仅设置了backgroundColor: 'black'，但该容器默认未占满整个视口高度，同时浏览器默认的body样式（比如默认margin、背景色）也会导致黑色背景无法完整显示。

修复方案 #

1. 调整容器样式，确保占满视口

修改makeStyles中的样式，给.App添加高度、宽度属性，同时可选全局覆盖body默认样式：

import './App.css';
import { BrowserRouter, Route, Routes} from 'react-router-dom';
import Header from './components/Header';
import Homepage from './Pages/Homepage';
import CoinPage from './Pages/CoinPage';
import { makeStyles } from '@material-ui/core';

// 将useStyles定义移到组件外部（Material UI推荐写法）
const useStyles = makeStyles(() => ({
  App: {
    backgroundColor: 'black',
    minHeight: '100vh', // 强制容器占满视口高度
    width: '100%',
    margin: 0,
    padding: 0,
  },
  // 全局样式：覆盖body的默认margin和背景色
  '@global': {
    body: {
      margin: 0,
      padding: 0,
      backgroundColor: 'black',
    },
  },
}));

function App() {
  const classes = useStyles();
  return (
    <BrowserRouter>
      <div className={classes.App}>
        <Header/>
        <Routes>
          <Route path='/' element={<Homepage />} />
          <Route path='/coins/:id' element={<CoinPage/>}/>
        </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App;

2. 排查全局样式冲突

打开App.css，确认里面没有设置body或父元素的背景色、margin等样式，避免覆盖你设置的黑色背景。

3. 检查子组件样式

验证Header、Homepage等子组件是否设置了独立的背景色，如果子组件有白色背景，会覆盖父容器的黑色，需要同步修改这些子组件的背景色为黑色或透明。

内容的提问来源于stack exchange，提问作者prem jadwani