Chakra-Ui - 使用伪媒体查询

问题描述

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

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

解决方法

如果有人遇到同样的问题，这有效

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