Material UI Stepper强制Grid变为column布局问题求助

问题原因 #

Material UI的StepContent组件默认应用了flex-direction: column的样式，且该样式优先级高于Grid组件的direction="row"配置，导致Grid被迫纵向排列。

解决方案 #

方案1：通过sx属性强制指定Grid的flex方向 #

直接在Grid容器上添加sx属性，用!important提升样式优先级，确保横向排列生效：

<Stepper activeStep={0} orientation="vertical">
  <Step>
    <StepLabel>"Label"</StepLabel>
    <StepContent>
        <Grid container direction="row" sx={{ flexDirection: 'row !important' }}>
          <Grid item md={5} xs={8}><MyComponent /></Grid>
          <Grid item md={3.5} xs={8}><MyComponent /></Grid>
          <Grid item md={3.5} xs={8}><MyComponent /></Grid>
        </Grid>
    </StepContent>
  </Step>
</Stepper>

方案2：自定义StepContent样式覆盖默认布局 #

用styled工具创建自定义StepContent组件，针对性修改内部flex规则：

import { styled } from '@mui/material/styles';
import StepContent from '@mui/material/StepContent';

const CustomStepContent = styled(StepContent)(({ theme }) => ({
  '& .MuiGrid-container': {
    flexDirection: 'row !important',
  },
}));

// 使用自定义组件替换原StepContent
<Stepper activeStep={0} orientation="vertical">
  <Step>
    <StepLabel>"Label"</StepLabel>
    <CustomStepContent>
        <Grid container direction="row">
          <Grid item md={5} xs={8}><MyComponent /></Grid>
          <Grid item md={3.5} xs={8}><MyComponent /></Grid>
          <Grid item md={3.5} xs={8}><MyComponent /></Grid>
        </Grid>
    </CustomStepContent>
  </Step>
</Stepper>

方案3：直接添加内联样式 #

通过style属性直接设置Grid的flex方向，快速解决问题：

<Grid container direction="row" style={{ flexDirection: 'row' }}>
  <Grid item md={5} xs={8}><MyComponent /></Grid>
  <Grid item md={3.5} xs={8}><MyComponent /></Grid>
  <Grid item md={3.5} xs={8}><MyComponent /></Grid>
</Grid>

补充说明 #

Stack组件虽支持双向布局，但缺少Grid的响应式占比配置能力，无法满足元素占比需求，因此仍需通过Grid配合样式调整实现目标效果。

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