Почему использование prop.children в компоненте Rebass Box выводит console.error в Chrome?

Question

У меня есть приложение, созданное с помощью NextJS, и у меня есть компонент, составленный из библиотеки Rebass, который работает, но выдает это предупреждение в консоли:

https://i.stack.imgur.com/1KmzA.png

Вот компонент:

// 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. У меня это не сработало, поэтому я попробовал функцию.