Global styled-components 설정, TypeScript에서 styled-components 적용

기존 scss 에서 styled-components로 교체, type 설정하기

평소 scss를 그냥 css 쓰듯 써서(..) 프로젝트 무게도 낮출 겸 TS 적용 겸 styled-components로 교체해봤습니다.

GlobalStyles 적용

글로벌 스타일, 초기값들을 정의합니다. css 파일이 아닌 JS 안에서 스타일을 정의하기 때문에 별도의 방법으로 적용합니다.

• styled-reset 설치

 yarn add styled-reset

• 글로벌 스타일을 적용할 파일 GlobalStyeld.tsx

// Gl
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const globalStyles = createGlobalStyle`
    // css 초기값 정의
    ${reset};

    // 따로 스타일링
    a{
        text-decoration:none;
        color:inherit;
    }

    *{
        box-sizing:border-box;
    }
`;

export default globalStyles;

• App.tsx에 적용

import GlobalStyles from "./GlobalStyles";

const App = () => {
  return (
    <>
      // App.tsx에 글로벌 스타일 적용
      <GlobalStyles />
    </>
  );
};

styled-component에서 props 전달받기

일반적인 scss를 사용한다면 className에 조건부로 className을 선언해 조건부 스타일링을 할 수 있지만 styled-component에서는 props를 전달해 간편하게 조건부 스타일링을 할 수 있습니다.

컴포넌트

// Navbar 컴포넌트
const NavBar:FC<NavBarProps> = ({ path }) => {
  return (
    // ul 태그
    <NavBarContainer>
        1️⃣<ListContainer clicked={path === "/"} detailClicked={false}>
            <Link to="/">
                <img src={Home} alt="Home" />
                <p>홈</p>
            </Link>
        </ListContainer>
    </NavBarContainer>
  )

1. 상위 컴포넌트에서 전달받은 path를 이용해 path url로 이동하는 navigation 컴포넌트 입니다. li 태그인 ListContainer에 boolean형 clicked라는 props를 스타일에 넘겨줄 수 있습니다.

스타일

1️⃣interface ListContainerProps {
  clicked : boolean;
}

export const ListContainer = 2️⃣styled.li<ListContainerProps>`
  img {
    padding: 7px 0 2px 0;
    padding-bottom: 5px;

    3️⃣filter: ${(props) =>
      props.clicked
        ? `invert(68%) sepia(85%) saturate(4997%) hue-rotate(333deg) brightness(102%) contrast(107%)`
        : null};
  }

  4️⃣color: ${(props) => (props.clicked ? `#fc5c42` : `#767676`)};
`;

1. Javascript와 달리 TypeScript에서 컴포넌트에서 스타일로 props를 전달 받으려면 타입을 지정해줘야 합니다. interface로 타입을 지정해도 되고 props가 하나인 경우엔 변수 바로 옆에 지정해도 됩니다.
2. 파일 지정
3. 전달받은 clicked의 boolean형 값에 따라 스타일을 지정합니다. if문을 사용해도 되고 3항연산자를 사용해도 됩니다.
4. 다양한 스타일에 재사용이 가능합니다.