Progress组件在Group/Stack内不显示的问题求助

问题原因 #

你遇到的问题是因为Mantine的Group组件默认采用flex布局，子元素默认会被自动压缩以适配容器空间。Progress组件在没有指定宽度的情况下，会被Group的flex布局挤压到几乎不可见的宽度，所以看起来像是没显示。

修复方案 #

给Progress组件明确设置宽度，让它在Group的布局中占据足够的空间，比如设置w="100%"（占满剩余空间）或者固定宽度：

修改后的代码：

import { Stack, ThemeIcon, Text, Progress, Group, Button } from "@mantine/core";

interface SkillProps {
  name: string;
  icon: JSX.Element;
}

function Skill(props: SkillProps) {
  return (
    <>
      <Group>
        <ThemeIcon size={50} radius={25} variant="outline">
          {props.icon}
        </ThemeIcon>

        <Stack align="center" spacing={5}>
          <Text>{props.name}</Text>
        </Stack>

        {/* 给Progress设置宽度，占满Group剩余空间 */}
        <Progress value={50} w="100%" />
      </Group>
    </>
  );
}

export default Skill;

如果你希望Progress只占固定宽度，也可以写w={200}这样的固定值，根据布局需求调整即可。

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