类型错误:键入“{ color: string；loading: true；css: string；size: number；}”不能指定键入“IntrinsicAttributes&LoaderSizeMarginProps”

Question

当我试图构建该项目时，我得到了以下错误：

$ yarn run build
yarn run v1.22.19
$ next build
info  - Loaded env from D:\folder_1\my_Project\client\.env.local
info  - Linting and checking validity of types .Failed to compile.

./components/profile/mintingModal/LoadingState.tsx:28:49
Type error: Type '{ color: string; loading: true; css: string; size: number; }' 
is not assignable to type 'IntrinsicAttributes & LoaderSizeMarginProps'.
  Property 'css' does not exist on type 'IntrinsicAttributes & LoaderSizeMarginProps'.

  26 |     <div className={style.wrapper}>
  27 |       <div className={style.title}>Minting in progress...</div>
> 28 |       <GridLoader color={'#fff'} loading={true} css={subtitleStyle} size={30} />
     |                                                 ^
  29 |     </div>
  30 |   )
  31 | }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

这是错误出现在其中的LodaingState.tsx文件

import { GridLoader } from 'react-spinners'
import { css } from '@emotion/react'

const style = {
  wrapper: `h-[20rem] w-[35rem] text-white bg-[#15202b] rounded-3xl p-10 flex flex-col items-center justify-center`,
  title: `font-semibold text-xl mb-6`,
}

const cssOverride = css`
  display: block;
  margin: 0 auto;
  border-color: white;
`

const LoadingState = () => {
  return (
    <div className={style.wrapper}>
      <div className={style.title}>Minting in progress...</div>
      <GridLoader color={'#fff'} loading={true} css= {cssOverride} size={30} />
    </div>
  )
}

export default LoadingState

Answer 1

我将文件重命名为LodaingState.js，而不是LodaingState.tsx，它起作用了；错误消失了，但不幸的是，我不明白为什么！