[MUI] 스타일 프롭스 추가 | shouldForwardProp 사용방법

설치

npm install @emotion/is-prop-valid

 

shouldForwardProp 정의

src / utils / mui.ts

import isPropValid from "@emotion/is-prop-valid";

export const shouldForwardProp = (prop: PropertyKey) =>
  typeof prop === "string" && isPropValid(prop) && !prop.startsWith("$");

 

shouldForwardProp  사용

src / components / Example.tsx

================================= shouldForwardProp 임포트
import { shouldForwardProp } from "@/utils/mui";


================================= 컴포넌트 사용
<Container $preview={true}/>


================================= 스타일 정의
type ContainerProps = {
  $preview: boolean;
};

const Container = styled(Stack, { shouldForwardProp })<ContainerProps>`
  border: ${({ $preview, theme }) => ($preview ? `3px dashed black` : "none")};
`;

 

예시 코드