Chakra UI Grid布局中侧边栏按钮文本溢出容器的问题求助

各位好，我最近在跟着React教程做一个游戏列表项目，用到了Chakra UI，不过教程是基于v2版本的，我自己装了最新的v3.16.0版本，已经根据新语法做了适配调整。

项目的主布局用了Grid组件：大屏幕下分为导航栏、侧边栏和主内容区，侧边栏里是游戏分类列表，用来作为主内容的筛选器。现在遇到一个问题：侧边栏里有个标题很长的按钮（比如“Massively Multiplayer”），我本来以为文本会自动换行，但它直接溢出了侧边栏的容器，跑到主内容区的游戏卡片下面去了。我给侧边栏的GridItem加了绿色背景，能清楚看到容器的边界，确认是按钮文本超出了这个范围。

我本来以为是按钮的CSS属性问题，也查了Chakra GitHub上类似的issue，尝试了给Button加height="auto"、textAlign="left"、whiteSpace="normal"、blockSize="auto"这些属性，甚至还试过把文本放到Text组件里加wordWrap="normal"，但都没起作用。

下面是相关代码片段：

app.tsx 中的Grid布局部分 #

<Grid
  templateAreas={{
    base: `"nav" "main"`,
    lg: `"nav nav" "aside main"`,
  }}
  templateColumns={{
    base: "1fr",
    lg: "200px 1fr",
  }}
>
  <GridItem area="nav">
    <NavBar onSearch={(searchText) => setGameQuery({ ...gameQuery, searchText })}/>
  </GridItem>
  <GridItem area="aside" hideBelow="lg" paddingX={5} backgroundColor='green'>
    <GenreList
      selectedGenre={gameQuery.genre}
      onSelectGenre={(genre) => setGameQuery({ ...gameQuery, genre })}
    />
  </GridItem>
  <GridItem area="main">
    <Box paddingLeft={10}>
      <GameHeading gameQuery={gameQuery}></GameHeading>
      <HStack gap={5}>
        <PlatformSelector
          selectedPlatform={gameQuery.platform}
          onSelectPlatform={(platform) => setGameQuery({ ...gameQuery, platform })}
        />
        <SortSelector
          sortOrder={gameQuery.sortOrder}
          onSelectSortOrder={(sortOrder) => setGameQuery({... gameQuery, sortOrder})}
        />
      </HStack>
    </Box>
    <GameGrid gameQuery={gameQuery} />
  </GridItem>
</Grid>

GenreList组件代码 #

<List.Root>
  {data.map((genre) => (
    <ListItem key={genre.id} paddingY="5px" listStyleType="none">
      <HStack>
        <Image
          boxSize="32px"
          borderRadius={8}
          src={getCroppedImageUrl(genre.image_background)}
        />
        <Button
          // height="auto"
          // textAlign="left"
          // whiteSpace="normal"
          // blockSize="auto"
          fontWeight={genre.id === selectedGenre?.id ? "bold" : "normal"}
          onClick={() => onSelectGenre(genre)}
          fontSize="lg"
          variant="ghost"
        >
          {genre.name}
          {/* <Text wordWrap="normal"></Text> */}
        </Button>
      </HStack>
    </ListItem>
  ))}
</List.Root>

我的环境版本：

• @chakra-ui/react: 3.16.0
• react: 18.2.0

另外项目里没有使用相关的自定义CSS（只有表单的CSS，和这个问题无关）。

有没有大佬能帮忙看看，到底哪里出问题了？怎么才能让按钮里的长文本在侧边栏容器内自动换行呢？

内容来源于stack exchange