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

Question

在我的 react 应用程序中，我看不到背景/边框样式。我做错了什么？

这是它的样子:

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

codesandbox

Answer 1

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

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

你可以指定

width={1}

使盒子有完整的宽度。