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

Question

在我的 react-app 中，我看不到背景/边框样式。我究竟做错了什么？

看起来是这样的：

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

密码箱

标签： cssstyled-components

Answer 1

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

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

你可以指定

宽度={1}

使框将具有全宽。