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

Question

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

​

下面是组件：

// 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组件的规定方法。它对我不起作用，这就是为什么我尝试了一个函数。