Chakra-Ui - 使用伪媒体查询答案

【问题标题】：Chakra-Ui - using media queries with pseudosChakra-Ui - 使用伪媒体查询
【发布时间】：2021-06-13 07:50:04
【问题描述】：

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

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

【问题讨论】：

标签： chakra-ui

【解决方案1】：

如果有人有同样的问题，这会起作用

<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',
      },
    },
  }}
>

【讨论】：

【解决方案2】：

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

您可以在 after 中使用此语法

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

【讨论】：