如何修复ReactJS中Chakra-UI元素的'web-justifyContent'警告？

问题原因 #

警告中的web-justifyContent是Chakra-UI内部样式处理生成的专属属性，它被意外传递到了你代码里的原生<div>元素上。React无法识别这类框架自定义属性，因此抛出警告。

解决方案 #

最简洁有效的修复方式是将原生<div>替换为Chakra-UI的<Box>组件。Chakra的Box组件会自动过滤React不识别的props，不会将它们传递到底层DOM元素：

<Box
    d="flex"
    justify="space-between"
    alignItems="center"
    bg="white"
    w="100%"
    p="5px 10px 5px 10px"
    borderWidth="5px"
  >
    <Tooltip label="Search Users to chat" hasArrow placement="bottom-end">
      <Button variant="ghost">
        <i className="fas fa-search"></i>
        <Text d={{ base: "none", md: "flex" }} px={4}>
          Search User
        </Text>
      </Button>
    </Tooltip>
    <Text fontSize="2xl" fontFamily="Work sans">
      Converse-Crew
    </Text>
  {/* 用Chakra Box替换原生div */}
  <Box>
   <Menu>
    <MenuButton p={1}>
     <BellIcon></BellIcon>
    </MenuButton>
   </Menu>
  </Box>
</Box>

如果必须保留原生div，可以通过解构赋值手动过滤掉web-justifyContent这类多余props，但这种方式繁琐且容易遗漏，优先推荐使用Chakra的Box组件。

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