chakra-ui - Chakra-Ui - 使用伪媒体查询

Question

我无法在文档中找到答案。我希望 ::after 仅在 min-width: 500px 之后应用。有没有办法做到这一点？谢谢

 <Flex
  justify="space-between"
  position="relative"
  _after={{
    content: "''",
    position: 'absolute',
    bottom: '-2rem',
    height: '0.0625rem',
    width: '100%',
    backgroundColor: 'divider',
  }}
>

Answer 1

你为什么不直接使用显示器？

您可以在 after 中使用此语法

display:["none","none","flex","flex","flex"],

Answer 2

如果有人有同样的问题，这行得通

<Flex
  justify="space-between"
  position="relative"
  sx={{
    '@media screen and (min-width: 30rem)': {
      '&::after': {
        content: "''",
        position: 'absolute',
        bottom: '-2rem',
        height: '0.0625rem',
        width: '100%',
        backgroundColor: 'divider',
      },
    },
  }}
>