[styled-components] Warning: React does not recognize the `textColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `textcolor` instead. If you accidentally passed it from a parent ..

 

 

 

 

TS, styled-components로 작업 시 나타난 에러메시지이다.

번역해 보니,

경고: React는 DOM 요소에서 `textColor` 소품을 인식하지 않습니다. 의도적으로 DOM에 맞춤 속성으로 나타나게 하려면 대신 소문자 'textcolor'로 철자를 지정하세요. 실수로 부모 구성 요소에서 전달한 경우 DOM 요소에서 제거하십시오.

 

 

 

해결 방법 두 가지를 찾아냈다.

 

 

 

1️⃣ 경고문 그대로 lowercase로 prop을 넘긴다.

import { styled } from "styled-components";

interface BasicButtonProps {
  children: React.ReactNode;
  textcolor: string;
  backgdcolor: string;
  hoverbackgdcolor: string;
}

export const BasicButtons = (props: BasicButtonProps) => {
  return (
    <>
      <Button
        textcolor={props.textcolor}
        backgdcolor={props.backgdcolor}
        hoverbackgdcolor={props.hoverbackgdcolor}
      >
        {props.children}
      </Button>
    </>
  );
};

const Button = styled.button<BasicButtonProps>`
  background-color: ${(props) => props.backgdcolor};
  color: ${(props) => props.textcolor};

  border-radius: 4px;
  font-size: 16px;
  height: 40px;
  cursor: pointer;
  border: none;
  transition: all 0.4s;

  &:hover {
    background-color: ${(props) => props.hoverbackgdcolor};
  }
`;

 

 

 

 

 

2️⃣ prop의 접두사로 $를 붙인다.

https://github.com/styled-components/styled-components/releases/tag/v5.1.0

Release v5.1.0 · styled-components/styled-components

import { styled } from "styled-components";

interface BasicButtonProps {
  children: React.ReactNode;
  $textColor: string;
  $backgdColor: string;
  $hoverBackgdColor: string;
}

export const BasicButtons = (props: BasicButtonProps) => {
  return (
    <>
      <Button
        $textColor={props.$textColor}
        $backgdColor={props.$backgdColor}
        $hoverBackgdColor={props.$hoverBackgdColor}
      >
        {props.children}
      </Button>
    </>
  );
};

const Button = styled.button<BasicButtonProps>`
  background-color: ${(props) => props.$backgdColor};
  color: ${(props) => props.$textColor};

  border-radius: 4px;
  font-size: 16px;
  height: 40px;
  cursor: pointer;
  border: none;
  transition: all 0.4s;

  &:hover {
    background-color: ${(props) => props.$hoverBackgdColor};
  }
`;