步骤条

以明确的当前状态与错误状态展示顺序或非线性步骤。

本指南覆盖默认 Emotion 环境的 Material UI Core；扩展包与额外示例按清单单独标注。

使用场景与业务边界

流程完成与校验由宿主负责；activeStep 不是自动流程引擎。

原生组成与范围

MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper

保持 Material UI 原生组合与类型，不替换为 JGuang／Base UI／Radix 同名 API。示例条目不是额外组件。

原生安装与初始化

npm install @mui/material@9.4.0 @emotion/react@11.14.0 @emotion/styled@11.14.1

采用原生 npm 包与 Emotion，不提供虚构的 JGuang UI Registry 地址。将示例放在原生 ThemeProvider 内，按项目选择 CssBaseline 或 ScopedCssBaseline。先检查 React、现有 Provider、锁文件与 SSR 配置；不要覆盖用户文件或忽略 peer 冲突。本批实际验收 React 19.2.8；React 18 及以下须匹配 react-is。完整初始化规则见随附的双语 setup 文档。

关键原生参数

仅解释本指南选出的关键参数，不是平铺的通用 API。原生继承来源、slot 结构、可空值与泛型仍按固定源码保留。

可运行原生示例

下列机器键只选择示例入口，不会作为通用 variant 属性传入每个组件。原生示例 JSX 与数据保持上游原文；JGuang 编写的验收示例明确标注。

• 顺序步骤 · HorizontalLinearStepper · 上游原生示例
• 非顺序步骤 · HorizontalNonLinearStepper · 上游原生示例
• 标签在下方 · HorizontalLinearAlternativeLabelStepper · 上游原生示例
• 错误步骤 · HorizontalStepperWithError · 上游原生示例
• 自定义横向步骤条 · CustomizedSteppers · 上游原生示例
• 纵向步骤条 · VerticalLinearStepper · 上游原生示例
• 标签在下方 · VerticalLinearAlternativeLabelStepper · 上游原生示例
• 文字步骤 · TextMobileStepper · 上游原生示例
• 圆点步骤 · DotsMobileStepper · 上游原生示例
• 进度步骤 · ProgressMobileStepper · 上游原生示例

真实使用示例

固定版本的未修改原生示例；复制时同时保留所需的局部辅助文件。

import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];

export default function HorizontalLinearStepper() {
  const [activeStep, setActiveStep] = React.useState(0);
  const [skipped, setSkipped] = React.useState(new Set<number>());

  const isStepOptional = React.useCallback((step: number) => {
    return step === 1;
  }, []);

  const isStepSkipped = (step: number) => {
    return skipped.has(step);
  };

  const handleNext = () => {
    let newSkipped = skipped;
    if (isStepSkipped(activeStep)) {
      newSkipped = new Set(newSkipped.values());
      newSkipped.delete(activeStep);
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped(newSkipped);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleSkip = () => {
    if (!isStepOptional(activeStep)) {
      // You probably want to guard against something like this,
      // it should never occur unless someone's actively trying to break something.
      throw new Error("You can't skip a step that isn't optional.");
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped((prevSkipped) => {
      const newSkipped = new Set(prevSkipped.values());
      newSkipped.add(activeStep);
      return newSkipped;
    });
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  const previousActiveStepRef = React.useRef(activeStep);
  const resetButtonRef = React.useRef<HTMLButtonElement>(null);
  const nextButtonRef = React.useRef<HTMLButtonElement>(null);

  // Manage focus when the active step changes.
  React.useEffect(() => {
    const previousActiveStep = previousActiveStepRef.current;
    previousActiveStepRef.current = activeStep;

    if (activeStep === steps.length) {
      // If the user has completed all steps and hits "Finish", focus the "Reset" button.
      resetButtonRef.current!.focus();
      return;
    }
    if (activeStep === 0 && previousActiveStep === steps.length) {
      // If the user has completed all steps and hits "Reset", focus the "Next" button.
      nextButtonRef.current!.focus();
      return;
    }
    if (isStepOptional(previousActiveStep) && !isStepOptional(activeStep)) {
      // If the user hits "Skip" and the next step is not optional, focus the "Next" button.
      nextButtonRef.current!.focus();
    }
  }, [activeStep, isStepOptional]);

  return (
    <Box sx={{ width: '100%' }}>
      <Stepper activeStep={activeStep}>
        {steps.map((label, index) => {
          const stepProps: { completed?: boolean } = {};
          const labelProps: {
            optional?: React.ReactNode;
          } = {};
          if (isStepOptional(index)) {
            labelProps.optional = (
              <Typography variant="caption">Optional</Typography>
            );
          }
          if (isStepSkipped(index)) {
            stepProps.completed = false;
          }
          return (
            <Step key={label} {...stepProps}>
              <StepLabel {...labelProps}>{label}</StepLabel>
            </Step>
          );
        })}
      </Stepper>
      {activeStep === steps.length ? (
        <React.Fragment>
          <Typography sx={{ mt: 2, mb: 1 }}>
            All steps completed - you&apos;re finished
          </Typography>
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
            <Box sx={{ flex: '1 1 auto' }} />
            <Button onClick={handleReset} ref={resetButtonRef}>
              Reset
            </Button>
          </Box>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
            <Button
              color="inherit"
              disabled={activeStep === 0}
              onClick={handleBack}
              sx={{ mr: 1 }}
            >
              Back
            </Button>
            <Box sx={{ flex: '1 1 auto' }} />
            {isStepOptional(activeStep) && (
              <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
                Skip
              </Button>
            )}
            <Button onClick={handleNext} ref={nextButtonRef}>
              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
            </Button>
          </Box>
        </React.Fragment>
      )}
    </Box>
  );
}

示例依赖边界

react, @mui/material/Box, @mui/material/Stepper, @mui/material/Step, @mui/material/StepLabel, @mui/material/Button, @mui/material/Typography, @mui/material/StepButton, @mui/material/styles, @mui/material/Stack, @mui/icons-material/Check, @mui/icons-material/Settings, @mui/icons-material/GroupAdd, @mui/icons-material/VideoLabel, @mui/material/StepConnector, @mui/material/StepIcon, @mui/material/StepContent, @mui/material/Paper, @mui/material/MobileStepper, @mui/icons-material/KeyboardArrowLeft, @mui/icons-material/KeyboardArrowRight

直接导入 Icons／System／Utils 的示例需要匹配 9.4.0 包。局部数据与辅助文件属于示例闭包，不是额外组件。远程图片和模拟操作不提供后端。

固定上游 API 元数据参考

以下表格保留上游元数据，不是重新推断的通用类型体系。条件泛型、继承属性与回调细节以以下源码声明为准。主题默认配置可能覆盖元数据默认值。

MobileStepper

import MobileStepper from '@mui/material/MobileStepper';
import { MobileStepper } from '@mui/material';

原生继承: Paper. 父级与 DOM 属性未被伪造为本组件新属性。

Step

import Step from '@mui/material/Step';
import { Step } from '@mui/material';

StepButton

import StepButton from '@mui/material/StepButton';
import { StepButton } from '@mui/material';

原生继承: ButtonBase. 父级与 DOM 属性未被伪造为本组件新属性。

StepConnector

import StepConnector from '@mui/material/StepConnector';
import { StepConnector } from '@mui/material';

StepContent

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

StepIcon

import StepIcon from '@mui/material/StepIcon';
import { StepIcon } from '@mui/material';

原生继承: SvgIcon. 父级与 DOM 属性未被伪造为本组件新属性。

StepLabel

import StepLabel from '@mui/material/StepLabel';
import { StepLabel } from '@mui/material';

Stepper

import Stepper from '@mui/material/Stepper';
import { Stepper } from '@mui/material';

原生源码声明

声明与 import 从固定源码提取，不平铺联合类型或外部继承。英文注释／类型属于原始源码参考，不代表上游正文已全文翻译。共享类型仍位于原生包中。

vendor/src/MobileStepper/MobileStepper.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { PaperProps } from '../Paper';

import { LinearProgressProps } from '../LinearProgress';

import { MobileStepperClasses } from './mobileStepperClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

export interface MobileStepperSlots {
  /**
   * The component that renders the root slot.
   * @default Paper
   */
  root: React.ElementType;
  /**
   * The component that renders the progress slot.
   * @default LinearProgress
   */
  progress: React.ElementType;
  /**
   * The component that renders the dots slot.
   * @default 'div'
   */
  dots: React.ElementType;
  /**
   * The component that renders the dot slot.
   * @default 'div'
   */
  dot: React.ElementType;
}

export interface MobileStepperRootSlotPropsOverrides {}

export interface MobileStepperProgressSlotPropsOverrides {}

export interface MobileStepperDotsSlotPropsOverrides {}

export interface MobileStepperDotSlotPropsOverrides {}

export type MobileStepperSlotsAndSlotProps = CreateSlotsAndSlotProps<
  MobileStepperSlots,
  {
    /**
     * Props forwarded to the root slot.
     * By default, the available props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
     */
    root: SlotProps<
      React.ElementType<PaperProps>,
      MobileStepperRootSlotPropsOverrides,
      MobileStepperOwnerState
    >;
    /**
     * Props forwarded to the progress slot.
     * By default, the available props are based on the [LinearProgress](https://mui.com/material-ui/api/linear-progress/#props) component.
     */
    progress: SlotProps<
      React.ElementType<LinearProgressProps>,
      MobileStepperProgressSlotPropsOverrides,
      MobileStepperOwnerState
    >;
    /**
     * Props forwarded to the dots slot.
     * By default, the available props are based on the div element.
     */
    dots: SlotProps<'div', MobileStepperDotsSlotPropsOverrides, MobileStepperOwnerState>;
    /**
     * Props forwarded to the dot slot.
     * By default, the available props are based on the div element.
     */
    dot: SlotProps<'div', MobileStepperDotSlotPropsOverrides, MobileStepperOwnerState>;
  }
>;

export interface MobileStepperProps
  extends StandardProps<PaperProps, 'children' | 'variant'>, MobileStepperSlotsAndSlotProps {
  /**
   * Set the active step (zero based index).
   * Defines which dot is highlighted when the variant is 'dots'.
   * @default 0
   */
  activeStep?: number | undefined;
  /**
   * A back button element. For instance, it can be a `Button` or an `IconButton`.
   */
  backButton: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<MobileStepperClasses> | undefined;
  /**
   * A next button element. For instance, it can be a `Button` or an `IconButton`.
   */
  nextButton: React.ReactNode;
  /**
   * Set the positioning type.
   * @default 'bottom'
   */
  position?: 'bottom' | 'top' | 'static' | undefined;
  /**
   * The total steps.
   */
  steps: number;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * The variant to use.
   * @default 'dots'
   */
  variant?: 'text' | 'dots' | 'progress' | undefined;
}

export interface MobileStepperOwnerState extends Omit<MobileStepperProps, 'slots' | 'slotProps'> {}

export default function MobileStepper(props: MobileStepperProps): React.JSX.Element;

vendor/src/Step/Step.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { Theme } from '../styles';

import { StepClasses } from './stepClasses';

export interface StepOwnProps {
  /**
   * Sets the step as active. Is passed to child components.
   */
  active?: boolean | undefined;
  /**
   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<StepClasses> | undefined;
  /**
   * Mark the step as completed. Is passed to child components.
   */
  completed?: boolean | undefined;
  /**
   * If `true`, the step is disabled, will also disable the button if
   * `StepButton` is a child of `Step`. Is passed to child components.
   */
  disabled?: boolean | undefined;
  /**
   * Expand the step.
   * @default false
   */
  expanded?: boolean | undefined;
  /**
   * The position of the step.
   * The prop defaults to the value inherited from the parent Stepper component.
   */
  index?: number | undefined;
  /**
   * If `true`, the Step is displayed as rendered last.
   * The prop defaults to the value inherited from the parent Stepper component.
   */
  last?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface StepTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
> {
  props: AdditionalProps & StepOwnProps;
  defaultComponent: RootComponent;
}

export type StepProps<
  RootComponent extends React.ElementType = StepTypeMap['defaultComponent'],
  AdditionalProps = { component?: React.ElementType | undefined },
> = OverrideProps<StepTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};

export type StepClasskey = keyof NonNullable<StepProps['classes']>;

declare const Step: OverridableComponent<StepTypeMap>;

vendor/src/StepButton/StepButton.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';

import { OverrideProps } from '../OverridableComponent';

import { Theme } from '../styles';

import { StepButtonClasses } from './stepButtonClasses';

export interface StepButtonOwnProps {
  /**
   * Can be a `StepLabel` or a node to place inside `StepLabel` as children.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<StepButtonClasses> | undefined;
  /**
   * The icon displayed by the step label.
   */
  icon?: React.ReactNode;
  /**
   * The optional node to display.
   */
  optional?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export type StepButtonTypeMap<
  AdditionalProps,
  RootComponent extends React.ElementType,
> = ExtendButtonBaseTypeMap<{
  props: AdditionalProps & StepButtonOwnProps;
  defaultComponent: RootComponent;

  ignoredProps: 'disabled';
}>;

declare const StepButton: ExtendButtonBase<
  StepButtonTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>
>;

export type StepButtonClasskey = keyof NonNullable<StepButtonProps['classes']>;

export type StepButtonProps<
  RootComponent extends React.ElementType = ButtonBaseTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<StepButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};

vendor/src/StepConnector/StepConnector.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { StepConnectorClasses } from './stepConnectorClasses';

export type StepConnectorIcon = React.ReactElement<unknown> | string | number;

export interface StepConnectorProps extends StandardProps<
  React.HTMLAttributes<HTMLDivElement>,
  'children'
> {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<StepConnectorClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classes']>;

export default function StepConnector(props: StepConnectorProps): React.JSX.Element;

vendor/src/StepContent/StepContent.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { CollapseProps } from '../Collapse';

import { TransitionProps } from '../transitions/types';

import { StepContentClasses } from './stepContentClasses';

import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types';

export interface StepContentSlots {
  /**
   * The component that renders the transition slot.
   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
   * @default Collapse
   */
  transition?:
    | React.JSXElementConstructor<TransitionProps & { children: React.ReactElement<unknown, any> }>
    | undefined;
}

export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
  StepContentSlots,
  {
    /**
     * Props forwarded to the transition slot.
     * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
     */
    transition: SlotComponentProps<
      React.ElementType<CollapseProps>,
      CollapseProps,
      StepContentOwnerState
    >;
  }
>;

export interface StepContentOwnerState extends StepContentProps {}

export interface StepContentProps
  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepContentSlotsAndSlotProps {
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<StepContentClasses> | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * Adjust the duration of the content expand transition.
   * Passed as a prop to the transition component.
   *
   * Set to 'auto' to automatically calculate transition time based on height.
   * @default 'auto'
   */
  transitionDuration?: TransitionProps['timeout'] | 'auto' | undefined;
}

export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>;

export default function StepContent(props: StepContentProps): React.JSX.Element;

vendor/src/StepIcon/StepIcon.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { SvgIconOwnProps } from '../SvgIcon';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { StepIconClasses } from './stepIconClasses';

export interface StepIconProps
  // TODO v7: extend React.HTMLAttributes<SVGSVGElement> as svg is root component of StepIcon not div
  extends
    StandardProps<React.HTMLAttributes<HTMLDivElement>, 'color' | 'children'>,
    Omit<SvgIconOwnProps, 'children'> {
  /**
   * Whether this step is active.
   * @default false
   */
  active?: boolean | undefined;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<StepIconClasses> | undefined;
  /**
   * Mark the step as completed. Is passed to child components.
   * @default false
   */
  completed?: boolean | undefined;
  /**
   * If `true`, the step is marked as failed.
   * @default false
   */
  error?: boolean | undefined;
  /**
   * The label displayed in the step icon.
   */
  icon: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;

export default function StepIcon(props: StepIconProps): React.JSX.Element;

vendor/src/StepLabel/StepLabel.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { StepIconProps } from '../StepIcon';

import { StepLabelClasses } from './stepLabelClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

export interface StepLabelSlots {
  /**
   * The component that renders the root.
   * @default span
   */
  root: React.ElementType;
  /**
   * The component that renders the label.
   * @default span
   */
  label: React.ElementType;
  /**
   * The component to render in place of the [`StepIcon`](https://mui.com/material-ui/api/step-icon/).
   */
  stepIcon: React.ElementType;
}

export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
  StepLabelSlots,
  {
    /**
     * Props forwarded to the root slot.
     * By default, the available props are based on the span element.
     */
    root: SlotProps<'span', {}, StepLabelOwnerState>;
    /**
     * Props forwarded to the label slot.
     * By default, the available props are based on the span element.
     */
    label: SlotProps<'span', {}, StepLabelOwnerState>;
    /**
     * Props forwarded to the stepIcon slot.
     * By default, the available props are based on the div element.
     */
    stepIcon: SlotProps<React.ElementType<StepIconProps>, {}, StepLabelOwnerState>;
  }
>;

export interface StepLabelOwnerState extends StepLabelProps {}

export interface StepLabelProps
  extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepLabelSlotsAndSlotProps {
  /**
   * In most cases will simply be a string containing a title for the label.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<StepLabelClasses> | undefined;
  /**
   * If `true`, the step is marked as failed.
   * @default false
   */
  error?: boolean | undefined;
  /**
   * Override the default label of the step icon.
   */
  icon?: React.ReactNode;
  /**
   * The optional node to display.
   */
  optional?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export type StepLabelClasskey = keyof NonNullable<StepLabelProps['classes']>;

declare const StepLabel: ((props: StepLabelProps) => React.JSX.Element) & {
  muiName: string;
};

vendor/src/Stepper/Stepper.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { OverridableComponent, OverrideProps } from '../OverridableComponent';

import { Theme } from '../styles';

import { PaperProps } from '../Paper';

import { StepperClasses } from './stepperClasses';

export type Orientation = 'horizontal' | 'vertical';

export interface StepperOwnProps extends Pick<PaperProps, 'elevation' | 'square' | 'variant'> {
  /**
   * Set the active step (zero based index).
   * Set to -1 to disable all the steps.
   * @default 0
   */
  activeStep?: number | undefined;
  /**
   * If set to 'true' and orientation is horizontal,
   * then the step label will be positioned under the icon.
   * If set to 'true' and orientation is vertical,
   * it reverses the position of the label and content.
   * @default false
   */
  alternativeLabel?: boolean | undefined;
  /**
   * Two or more `<Step />` components.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<StepperClasses> | undefined;
  /**
   * An element to be placed between each step.
   * @default <StepConnector />
   */
  connector?: React.ReactElement<unknown, any> | null | undefined;
  /**
   * If set the `Stepper` will not assist in controlling steps for linear flow.
   * @default false
   */
  nonLinear?: boolean | undefined;
  /**
   * The component orientation (layout flow direction).
   * @default 'horizontal'
   */
  orientation?: Orientation | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export interface StepperTypeMap<
  AdditionalProps = {},
  RootComponent extends React.ElementType = 'div',
> {
  props: AdditionalProps & StepperOwnProps;
  defaultComponent: RootComponent;
}

export type StepperProps<
  RootComponent extends React.ElementType = StepperTypeMap['defaultComponent'],
  AdditionalProps = { component?: React.ElementType | undefined },
> = OverrideProps<StepperTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType | undefined;
};

export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;

declare const Stepper: OverridableComponent<StepperTypeMap>;

安装后验收

执行严格类型检查、生产构建和实际交互。检查键盘标签／焦点、原生支持的禁用／错误／只读语义、深浅色、窄屏和减少动画。按真实宿主数据检查回调，不把复制提示词当作安装完成。初始化工具还需检查服务端 HTML 与无告警水合。

来源与许可

https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e

MIT · @mui/material@9.4.0. 保留上游原始内容与许可证。上游完整原文保留于 vendor/docs，不标为全文中文化。