reactjs - 为什么在 Rebass Box 组件上使用 prop.children 会在 Chrome 中输出 console.error？

Question

我有一个用 NextJS 构建的应用程序，我有一个由 Rebass 库组成的组件，它可以工作，但它在控制台中给出了这个警告：

这是组件：

// Container.js

import { Box } from "rebass"

export const Container = (props) => (
  <Box
    sx={{
      maxWidth: "1240px",
      mx: "auto",
      px: 3,
    }}
  >
    {props.children}
  </Box>
)

和索引组件：

import { Container } from "./Container"

const Index = (props) => (
  <Container>
    <div>Hello, World</div>
  </Container>
)

export default Index

我怎样才能摆脱这个错误信息？

Answer 1

所以它与上述组件无关，而是另一个文件中的另一个组件。

// Navbar.js

import { Flex, Link, Text } from "rebass"

import { Container } from "./Container"

export const Nav = (props) => (
  <Container>
    <Flex
      px={2}
      height={70}
      color="white"

      sx={{ background: `${(props) => props.theme.colors.background}` }} 
      // Using the line above causes the error

      sx={{ background: "background" }} // use this line instead

      alignItems="center"
    >
      <Text p={2} fontWeight="bold">
        Company
      </Text>
      <Flex mx="auto" />
      <Link variant="nav" href="#!">
        Link
      </Link>
    </Flex>
  </Container>
)

这是将主题值放入 Rebass 组件的规定方法。它对我不起作用，所以这就是我尝试一个功能的原因。