Chakra Ui-使用带有假名的媒体查询

Question

我在文档中找不到答案。我想要：：after仅在最小宽度：500px之后应用。有办法做到这一点吗？感谢

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

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

Answer 2

为什么不直接使用display none？

你可以在你的after 中使用这个语法

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