React 元素类型不适用于@emotion/react jsxImportSource

Question

根据emotionJS上的文档，需要将其添加到您的tsconfig中才能使用@emotion/styled

"jsx": "react-jsx",
"jsxImportSource": "@emotion/react"

但问题是当我定义函数组件时出现此错误

Type 'Element' is not assignable to type 'ReactNode'

功能组件

const Header = () => {
  return (
    <StyledBox>
      <AppBar position="static" >
        <Toolbar>
        <Button color="inherit">9 people Online</Button>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>

          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
    </StyledBox>
  )
}

我将 tsconfig 文件更改为这个

"jsx": "react-jsx",
"jsxImportSource": "preact"

我原以为错误会消失，这确实有效。但是 @emotion/styled 中的组件不再起作用了。我收到这个错误

 Type 'StyledComponent<BoxOwnProps<Theme> & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; }, keyof BoxOwnProps<...>> & { ...; }, {}, {}>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'

Answer 1

你解决了吗？我也遇到同样的情况 :s