自定义Chakra UI步进器步骤间距不均问题求助

我想要实现步进器步骤的均匀分布，但使用Flexbox始终无法生效，查文档和AI工具都没解决问题。

相关主题文件代码如下：

export const stepperTheme = defineStyleConfig({
  baseStyle: {
    step: {
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      position: "relative",
    },

    separator: {
      position: "absolute",
      top: "20px",
      left: "50%",
      height: "2px",
      bgColor: "grey.600",
      zIndex: "-1",
    },

    indicator: {
      zIndex: "1",
      width: "40px",
      height: "40px",

      "&[data-status=complete]": {
        bgColor: "cyan.600",
        borderColor: "cyan.600",
        borderWidth: "3px",
      },

      "&[data-status=active]": {
        bgColor: "cyan.600",
        borderColor: "cyan.600",
        outline: "2.5px solid white",
        outlineOffset: "-4px",
      },

      "&[data-status=incomplete]": {
        bgColor: "white",
        borderColor: "grey.600",
        borderWidth: "2px",
      },
    },
  },
});

问题分析与解决方法 #

你当前的核心问题是仅给单个step设置了Flex布局，但未给承载所有步骤的根容器配置Flex——单个step的Flex仅能控制自身内部元素的排列，无法实现多个步骤在容器内的均匀分布。

具体修改方案： #

1. 给步进器根容器添加Flex配置
   在baseStyle中新增root样式（对应Chakra UI Stepper组件的根容器），设置Flex布局并分配空间：

   export const stepperTheme = defineStyleConfig({
     baseStyle: {
       root: {
         display: "flex",
         justifyContent: "space-between", // 让步骤在容器内均匀分布
         width: "100%", // 确保容器占满可用宽度
       },
       step: {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
         position: "relative",
         flex: "1", // 让每个step占据相等宽度，避免内容长短导致分布不均
       },
       // 其余样式保持不变
     },
   });
   

2. 调整分隔线定位
   原分隔线的left:50%会在均匀布局后出现位置偏差，修改为：

   separator: {
     position: "absolute",
     top: "20px",
     left: "100%", // 从当前step右侧开始延伸
     width: "100%", // 覆盖到下一个step的左侧
     height: "2px",
     bgColor: "grey.600",
     zIndex: "-1",
   },
   

   注意：最后一个步骤的分隔线需要隐藏，可通过&:last-child .separator { display: none }或组件层面控制不渲染最后一条分隔线。

关键逻辑： #

• 根容器的display:flex + justify-content:space-between是实现步骤均匀分布的核心，会自动分配步骤间的空白空间。
• 给每个step设置flex:1，确保所有步骤宽度一致，避免因内容差异导致布局失衡。

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