Почему использование prop.children для компонента Rebass Box приводит к ошибке console.er в Chrome? - PullRequest
Новая
       36

Почему использование prop.children для компонента Rebass Box приводит к ошибке console.er в Chrome?

1 голос
/ 29 апреля 2020

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

enter image description here

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

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

Как мне избавиться от этого сообщения об ошибке?

1 Ответ

0 голосов
/ 30 апреля 2020

Так что это не имеет ничего общего с вышеуказанными компонентами, а скорее с другим компонентом в другом файле. 

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

...