Chakra UI <Show>组件传入above='md'属性报错求助

你在使用Chakra UI 3.1.2时给<Show>组件传入above='md'出现以下类型错误：

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

重装最新依赖后问题仍存在，核心原因是Chakra UI v3版本对<Show>组件的属性做了命名调整——原来的above/below属性被移除，替换为aboveBreakpoint/belowBreakpoint，或者可以通过mediaQuery直接指定媒体查询规则。

解决方法一：使用aboveBreakpoint替代above #

修改你的代码如下：

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

function App() {
  return <Grid templateAreas={{
    base: `"nav" "main"`,
    md: `"nav nav" "aside main"`
  }}>
    <GridItem area='nav' bg='coral'>
      Nav
    </GridItem>

    {/* 替换above为aboveBreakpoint */}
    <Show aboveBreakpoint='md'>
      <GridItem area='aside' bg='red'>
        Aside
      </GridItem>
    </Show>
    
    <GridItem area='main' bg='pink'>
      Main
    </GridItem>
  </Grid>
}

export default App

解决方法二：使用mediaQuery指定断点规则 #

如果你更习惯直接写媒体查询，也可以用mediaQuery属性，比如md断点默认对应的最小宽度是768px：

<Show mediaQuery='(min-width: 768px)'>
  <GridItem area='aside' bg='red'>
    Aside
  </GridItem>
</Show>

额外排查步骤 #

如果修改后仍有类型问题，执行以下操作确认：

• 执行npm list @chakra-ui/react检查实际安装的版本，确保确实升级到了最新稳定版
• 确认你的TypeScript版本在4.9及以上（Chakra UI v3对TS版本有最低要求）

内容的提问来源于stack exchange，提问作者Max