Chakra UI v3.0.2中Show组件使用`above`属性触发TypeScript类型错误

嘿，这个问题我之前也碰到过！原因是Chakra UI从v2升级到v3时，对Show组件的API做了调整——原来的above和below属性被移除了，所以TypeScript会提示这个属性不存在。

给你两个简单的替代方案，效果和原来的above="lg"完全一致：

方案1：用breakpoint + direction属性 #

把above="lg"替换成breakpoint="lg" direction="up"，其中direction="up"就表示在指定断点及以上的屏幕尺寸下显示内容：

import { Grid, GridItem, Show } from "@chakra-ui/react"

function App() {
  return <Grid templateAreas={{
    base: `"nav" "main"`,
    lg: `"nav nav" "aside main"`,
  }}>
    {/* some other components */}
    <Show breakpoint="lg" direction="up">
        <GridItem area="aside" bg="gold">
            Aside
        </GridItem>
    </Show>
  </Grid>
}

export default App

方案2：直接用minWidth属性 #

这个写法更直观，直接指定最小宽度断点，和above的逻辑完全一样：

<Show minWidth="lg">
    <GridItem area="aside" bg="gold">
        Aside
    </GridItem>
</Show>

如果之后需要实现原来below的效果，对应可以用direction="down"或者maxWidth属性哦。

备注：内容来源于stack exchange，提问作者Kun.tito