React中如何使用Material UI实现两个图表并排居中显示？

你当前的Grid配置仅在屏幕宽度≥600px（MUI默认sm断点阈值）时才会让两个子项各占一半宽度，屏幕宽度小于该值时，Grid子项默认占满12份整宽，就会呈现上下堆叠的效果。除此之外还有两个高频问题会导致屏幕宽度足够时依然堆叠：

• Grid容器本身没有设置正确的宽度与flex布局属性，被父元素限制宽度后不足以容纳两个并排的子项
• 内部的Nifty50、Sensex图表组件默认强制撑满整行宽度，把同排的Grid子项挤到下一行

如果需要所有屏幕尺寸下两个图表都保持并排，给Grid子项加上xs={6}配置（xs是最小尺寸断点，配置后覆盖所有屏幕宽度规则），同时补充容器居中、子项居中、图表宽度自适应的属性即可：

<Grid 
  container 
  spacing={2} 
  sx={{ width: '100%', margin: '0 auto' }}
>
  <Grid item xs={6} sx={{ display: 'flex', justifyContent: 'center' }}> 
    <Nifty50 style={{ maxWidth: '100%', height: 'auto' }} />
  </Grid>
  <Grid item xs={6} sx={{ display: 'flex', justifyContent: 'center' }}> 
    <Sensex style={{ maxWidth: '100%', height: 'auto' }} />
  </Grid>
</Grid>

• 如果你需要保留响应式规则：小屏（宽度<600px）上下堆叠、大屏并排展示，把上面代码里的xs={6}换回sm={6}即可
• 想要让整个图表区块在页面中保持合适的最大宽度、不会在超大屏幕下拉伸变形，可以在Grid外层套MUI自带的Container组件：

import Container from '@mui/material/Container';

// 页面其他内容...
<Container maxWidth="lg">
  {/* 上面写好的Grid组件放在这里 */}
</Container>

• 如果修改后依然出现堆叠问题，检查项目里的全局CSS，是否有强制给所有div设置width: 100% !important、覆盖flex布局属性的规则，这类全局样式会破坏MUI Grid的默认排版逻辑。

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