'{ children: never[]; }' 유형에 'IntrinsicAttributes' 유형과 공통적인 속성이 없습니다.ts(2559)

TypeScript 에러 발생

Styled-Component를 활용해서 하든 emotion을 사용하든.. 

알맞게 css를 적용하고 사용하려고 하는데...

 

/** @jsxImportSource @emotion/react */
import React from 'react'
import {css} from '@emotion/react'

const LoadingBlock = (props: any) => {

  const whiteStyle = css`
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: #A4A4A4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  `
  const blockStyle = css`
  .loading-area {
      display: block;
      padding-bottom: 2rem;
      text-align: center;
      font-weight: bold;
      letter-spacing: 2px;
  }
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.025);
  padding: 2rem;
  width: 360px;
  background: white;
  border-radius: 2px;
`
    
  return (
      <div css={whiteStyle}>
          <div css={blockStyle}>
              
          </div>
      </div>
  )
}

export default LoadingBlock;

 

if (!isReady) return (
    // 이줄에 해당 오류가 뜬다
    <LoadingBlock> // 밑줄이 나오면서 오류가 나옴!!💢
      Loading...
    </LoadingBlock>
  );

 

문제 해결 : props 추가

 

배경이미지 컴포넌트가 특정한 props를 받는 것은 아니지만 아래와 같이 props: any를 추가해주니 에러가 간편하게 해결!

 

const LoadingBlock = (props: any) => {