Material-UI Grid设置columns=16未生效，为何仍按12列渲染？

你使用的Material-UI v4.12.3版本中，Grid组件并不支持直接通过columns属性修改默认列数——这个特性是在MUI v5（即@mui/material）中才新增的。v4的Grid系统默认12列是硬编码实现的，直接在Grid container上传递columns={16}不会生效，所以你的两个xs=8的item会因为总宽度超过12列（8+8=16>12）而被堆叠换行。

在Material-UI v4中，要修改Grid的列数，需要通过自定义主题覆盖Grid的样式规则，具体步骤如下：

1. 安装依赖（若未安装） #

首先确保你安装了@material-ui/styles，v4的主题定制依赖这个包：

npm install @material-ui/styles
# 或使用yarn
yarn add @material-ui/styles

2. 自定义主题并覆盖Grid样式 #

通过createMuiTheme创建自定义主题，修改Grid的宽度计算逻辑，使其基于16列布局：

import React from "react";
import { Grid } from '@material-ui/core';
import { createMuiTheme, ThemeProvider } from '@material-ui/styles';

// 定制16列的Grid主题
const customTheme = createMuiTheme({
  overrides: {
    MuiGrid: {
      item: {
        // 基础列宽：1/16
        '@media (min-width:0px)': {
          flexBasis: 'calc(100% / 16)',
          maxWidth: 'calc(100% / 16)',
        },
        // 覆盖xs=8的宽度：8/16=50%
        '&.MuiGrid-xs-8': {
          flexBasis: '50%',
          maxWidth: '50%',
        },
        // 若需要支持其他断点（sm/md/lg/xl），可按需添加对应规则
        '@media (min-width:600px)': {
          '&.MuiGrid-sm-4': {
            flexBasis: 'calc(4 / 16 * 100%)',
            maxWidth: 'calc(4 / 16 * 100%)',
          },
        },
      },
    },
  },
});

function AboutPage(props) {
    return (
        <ThemeProvider theme={customTheme}>
            <Grid container spacing={2}>
                <Grid item xs={8}>
                    <h1>xs=8</h1>
                </Grid>
                <Grid item xs={8}>
                    <h1>xs=8</h1>
                </Grid>
            </Grid>
        </ThemeProvider>
    );
}

export default AboutPage;

说明 #

• 移除了无效的columns={16}属性，改用ThemeProvider包裹组件应用自定义主题。
• 通过覆盖MuiGrid-item的样式，重新定义了不同断点下的列宽计算方式，确保基于16列布局。
• 如果需要支持更多断点（如sm、md等），只需在overrides中添加对应媒体查询和类名的样式规则即可。

内容的提问来源于stack exchange，提问作者Evan Hessler