reactjs 进度条组件未显示在组/堆栈中

mcvgt66p 于 2022-12-26 发布在 React

关注(0)|答案(1)|浏览(144)

每当我尝试将进度条放置在组/堆栈中时，它不会显示在网页上。只有当我将它放置在组/堆栈之外时，它才能工作。以下是代码和结果：

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 value={50} />
      </Group>
    </>
  );
}

export default Skill;

放置在组/堆栈中时：Result
当放置在组/堆栈外部时：Result
有人知道为什么会这样吗？

reactjs

来源：https://stackoverflow.com/questions/74906211/progress-bar-component-not-showing-up-within-group-stack

1条答案

按热度按时间

7fhtutme1#

这可能是因为Progress在Group或Stack中时没有指定的父容器宽度。
要在Group中使用，请尝试使用sx prop将flex:"1"添加到Progress，这将占用Group中的剩余空间：

<Group>
  <ThemeIcon size={50} radius={25} variant="outline">
    {props.icon}
  </ThemeIcon>
  <Stack align="center" spacing={5}>
    <Text>{props.name}</Text>
  </Stack>
  <Progress value={20} sx={{ flex: "1" }} />
</Group>

要在Stack中使用，请尝试添加alignSelf: "stretch"以获得类似结果：

<Group>
  <ThemeIcon size={50} radius={25} variant="outline">
    {props.icon}
  </ThemeIcon>
  <Stack align="center" spacing={5}>
    <Text>{props.name}</Text>
    <Progress value={20} sx={{ alignSelf: "stretch" }} />
  </Stack>
</Group>

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs 进度条组件未显示在组/堆栈中

1条答案

相关问题

热门标签

最新问答