[TIL] Layout Components class name

 

Layout Components class name

const StyledLayout = styled(Layout)`
    background-color: #ab4b4b !important;
    padding-top: 4.375rem;
    width: 100vw;
    height: 100vh;
`;

위와같이 컴포넌트 스타일링을 적용할 때 스타일드 컴포넌트 내부적으로 css class 선택자로 적용된다.

 

function Layout({children}: {children: React.ReactNode;}) {
    return (
        <StyeldLayoutWrapper>
            <Tab />
            <StyledLayoutInnerWrapper>{children}</StyledLayoutInnerWrapper>
        </StyeldLayoutWrapper>
    );
}

위 레이아웃 컴포넌트의 문제는 자식 컴포넌트는 잘 내려주었지만 css class지정 까지는 설정해주지 못했다.

 

function Layout({
    className,
    children,
}: {
    children: React.ReactNode;
  className?: string;
}) {
    return (
        <StyeldLayoutWrapper className={className}>
            <Tab />
            <StyledLayoutInnerWrapper>{children}</StyledLayoutInnerWrapper>
        </StyeldLayoutWrapper>
    );
}

위와같이 className 설정도 같이 해주어야 한다.

 

  className?: string;

옵저널 처리를 해준 이유는 린트에서는 스타일드 컴포넌트 className 지정을 확인하지 못하기 때문이다.

렌더링 때 처리가 되기 때문에 옵저널 처리 해주었다.