스타일드 컴포넌트 css 프롭스 전달 방법

1. styled.p 다음에 <> 로 타입을 지정합니다. 

? 속성은 fontSize "property가 존재할 경우에" 를 의미합니다.

 

const ParagraphComponent = styled.p<{ fontSize?: string }>`

 

2. props가 없을 경우에는 "16px"을 default 값으로 설정합니다.

 

  font-size: ${(props) => props.fontSize || "16px"};

 

3. 타입을 지정해줍니다.

 

interface ParagraphProps {

  children: React.ReactNode;

  fontSize?: string; // fontSize 속성을 선택적으로 설정

}

 

4. fontSize property의 값에 입력한 props를 할당하도록 합니다.

 

const Paragraph: React.FC<ParagraphProps> = ({ children, fontSize }) => {

  return <ParagraphComponent fontSize={fontSize}>{children}</ParagraphComponent>;

};

export default Paragraph;

 

 

import styled from "styled-components";

const ParagraphComponent = styled.p<{ fontSize?: string }>`
  font-size: ${(props) => props.fontSize || "16px"};
`;

interface ParagraphProps {
  children: React.ReactNode;
  fontSize?: string; // fontSize 속성을 선택적으로 설정
}

const Paragraph: React.FC<ParagraphProps> = ({ children, fontSize }) => {
  return <ParagraphComponent fontSize={fontSize}>{children}</ParagraphComponent>;
};

export default Paragraph;