Chakra UI中为Box组件设置align="center"属性出现TypeScript类型错误的问题咨询

嘿，我来帮你搞定这个TypeScript报错！

错误原因 #

你遇到的问题核心很简单：Chakra UI的Box组件并没有align这个属性。你之前在Text组件上用align="center"能生效，是因为Chakra给Text组件做了特殊的属性别名——把align映射成了CSS的textAlign属性，但Box组件没有这个别名配置。TypeScript是严格类型检查的，当你给一个不存在的属性赋值时，自然就会抛出类型不匹配的错误。

解决办法 #

根据你的需求场景，分两种情况处理：

情况1：让Box内的文本内容水平居中

如果你只是想让Box里的文字、图标这类内容水平居中，直接用CSS标准的textAlign属性就行，Chakra的Box组件支持直接传递这个props：

<Box textAlign="center"> // 替换原来的align="center"
  {description === "Odpady segregowane" ? (
    <Text color="#9CAD60">
      {description}
      <IoTrash size="32px" />
    </Text>
  ) : (
    <Text color="black">
      {description}
      <IoTrashOutline size="32px" />
    </Text>
  )}
</Box>

情况2：把Box作为Flex容器，让子元素在容器内居中

如果你的Box是用Flex布局（比如加了display="flex"），想要让子元素在垂直/水平方向居中，就用Flex布局的专用属性：

• 垂直方向（交叉轴）居中：alignItems="center"
• 水平方向（主轴）居中：justifyContent="center"
  示例：

<Box display="flex" alignItems="center" justifyContent="center">
  {/* 你的子元素 */}
</Box>

小提示 #

Chakra UI的组件props是基于Styled System构建的，所有CSS属性都用驼峰式命名（比如backgroundColor而非background-color），只有部分特定组件会有属性别名（比如Text的align）。如果不确定某个属性是否支持，直接用对应的CSS驼峰属性名就不会出错啦～

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