如何在样式组件中显示背景？

Question

在我的 react-app 中我看不到 background/border 样式。我做错了什么？

这是它的样子：

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

codesandbox

Answer 1

盒子里没有东西。 添加任何内容时，您将看到边框半径和背景颜色。 如果您像下面这样更改，那么您将看到背景。

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

并且您可以指定

width={1}

使框具有全宽。