스타일드 컴포넌트 프로퍼티에 따라 다른 css 보여주기

1. 컴포넌트에 다크모드 일 때는 박스쉐도우를 넣고 싶지 않다.

 

2. 컴포넌트에 darkMode 라는 프로퍼티를 만든다.

 

3. props에 대해서 darkMode가 아닐 때 box-shadow가 나타나도록 한다.

4. 컴포넌트의 타입에는 darkMode?:boolean 으로 타입을 지정해준다.

const MainVisualImgBox = styled.div<{ isDarkMode: boolean }>`
box-shadow: ${(props) => !props.isDarkMode && `2px 2px 7px -2px ${props.theme.mainBlack}`};
`;

 

4-2. 베리에이션 여러가지 css를 한 번에 적용하고 싶을 때는 css`` 함수를 사용한다.

const ToggleCircle = styled.div<{ isDarkMode: boolean }>`
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 5px;
  width: calc(50% - 8px);
  border-radius: ${borderRadius.round};
  background: ${(props) => props.theme.navBackground};
  transition: left 0.3s;

  ${(props) =>
    props.isDarkMode &&
    css`
      left: 44px;
      @media (max-width: 1200px) {
        left: 37px;
      }
    `}
`;

      <ToggleCircle isDarkMode={isDarkMode} />