Mantine SimpleGrid组件内容显示为行而非列的问题求助

可能的原因及解决步骤： #

• 未导入Mantine全局样式
  Mantine组件依赖全局CSS实现布局逻辑，若未导入全局样式，SimpleGrid的网格规则会失效。在index.tsx顶部添加全局样式导入：

  import '@mantine/core/styles.css';
  

• 版本不匹配（误装v7）
  若实际安装的是Mantine v7，却用v6写法会导致布局异常——v7中SimpleGrid的列数属性从cols改为columns，默认行为也有调整。先确认版本：

  npm list @mantine/core
  

  若为v7，要么修改代码适配v7，要么降级到v6：

  npm install @mantine/core@6 @mantine/hooks@6
  

• 父容器宽度受限
  检查#root元素样式，若它的宽度被设为固定窄值或未占满可用空间，SimpleGrid会因空间不足自动换行成单列。给#root添加基础样式：

  #root {
    width: 100%;
    min-height: 100vh;
  }
  

• 强制子元素最小宽度
  给SimpleGrid的子元素设置最小宽度，避免因内容过窄触发自动换行：

  <SimpleGrid cols={3} minWidth={200}>
    <div style={{ minWidth: '100%' }}>1</div>
    <div style={{ minWidth: '100%' }}>2</div>
    {/* 其余子元素同理 */}
  </SimpleGrid>
  

修改后的完整示例代码： #

import React from 'react';
import ReactDOM from 'react-dom/client';
import '@mantine/core/styles.css'; // 新增全局样式导入
import { MantineProvider, SimpleGrid } from '@mantine/core';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <MantineProvider>
      <SimpleGrid cols={3}>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
      </SimpleGrid>
    </MantineProvider>
  </React.StrictMode>
);

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