Next.js page.js中Material UI Grid组件报错无法正常使用的问题

你的问题出在Grid组件的item属性使用错误：MUI Grid的item是布尔类型属性，仅需声明该属性即可标记当前元素为容器的子项，不需要传递字符串或数字值（比如你写的item="1"、item="2"）。这种错误赋值会导致组件渲染异常，触发你看到的运行时错误。

修正后的代码如下：

import LatestNews from '@/components/ui/LatestNews/LatestNews';
import { Grid } from '@mui/material';

const HomePage = () => {
  return (
    <>
      <Grid container spacing={2}>
        <Grid item xs={8}>
          <LatestNews/>
        </Grid>
        <Grid item xs={4}>
          sideBar
        </Grid>
      </Grid>
    </>
  );
};

export default HomePage;

修改后，Grid组件就能正常渲染，实现你需要的双列布局：左侧内容占8份宽度，右侧侧边栏占4份，符合报纸网页的排版需求。

内容的提问来源于stack exchange，提问作者Sakin Malik