TypeScript 错误：Chakra UI 中的“ShowProps”类型上不存在属性“above”

Question

我正在学习使用 Chakra UI 的教程，并且以下代码在教程中完美运行。但是，在我的项目中，我在

above

组件中的

Show

属性上收到 TypeScript 错误：

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 above="lg">
        <GridItem area="aside" bg="gold">
            Aside
        </GridItem>
    </Show>
  </Grid>
}

export default App

错误消息如下：

Type '{ children: Element; above: string; }' is not assignable to type 'IntrinsicAttributes & ShowProps<unknown>'. Property 'above' does not exist on type 'IntrinsicAttributes & ShowProps<unknown>' 

我用

@chakra-ui/[email protected]

Answer 1

基于chakra-ui的文档 上述道具已在版本 3 中删除

如果你想使用这个道具，你应该使用

安装版本2

npm i @chakra-ui/[email protected]

您始终可以使用此模式安装旧版本的软件包

npm install <package>@<version>