Как показать фон в styled-компонентах?

Question

В моем приложении реакции я не вижу стиль фона / границы.Что я делаю не так?

Вот как это выглядит:

 <Flex>
        <Box
          bg="blue"
          css={{
            borderRadius: "4px"
          }}
        />
 </Flex>

codesandbox

Answer 1

В коробке нет содержимого.При добавлении любого контента вы увидите радиус границы и цвет фона.Если вы измените, как показано ниже, вы увидите фон.

<Flex>
    <Box
       bg="blue"
       css={{
         borderRadius: "4px"
       }}
    >
       lorem texts
    </Box>
</Flex>

, и вы можете указать

width = {1}

, чтобы окно было полной ширины.