Why does using prop.children on a Rebass Box component output a console.error in Chrome?

Question

I have an app built with NextJS and I have a component composed from the Rebass Library which works, but it gives this warning in the console:

Here is the component:

// Container.js

import { Box } from "rebass"

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

And the index component:

import { Container } from "./Container"

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

export default Index

How can I get rid of this error message?

Answer 1

So it had nothing to do with the above components but rather another component in another file.

// 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>
)

This is the prescribed way to get a themed value into a Rebass component. It didn't work for me so that is why I tried a function.