styled-components (expectedts-styled-plugin(9999)

Book store 프로젝트에서 반응형 사이트로 만들기 위해 @media screen을 사용하고자 하였는데, 다음과 같은 오류가 발생하였다.

( expectedts-styled-plugin(9999)

• 문제가 되었던 코드

const HeaderStyle = styled.header`
  // 기존 스타일 코드 생략
  @media screen and ${({ theme }) => theme.mediaQuery.mobile} {
    .logo {
      padding-left: 12px;
      img {
        width: 140px;
      }
    }
  }
`;

• theme에 작성한 스타일 값

export type MediaQuery = 'mobile' | 'tablet' | 'desktop';

interface Theme {
  name: ThemeName;
  // 기존 값들

  mediaQuery: {
    [key in MediaQuery]: string;
  };
}
export const light: Theme = {
  name: "light",
  // 기존 값들
  mediaQuery: {
    mobile: "(max-width: 768px)",
    tablet: "(max-width: 1024px)",
    desktop: "(min-width: 1025px)"
  }
};

theme의 mediaQuery의 값들 안에 괄호를 쳐놓았기때문에 당연히 오류가 발생하지 않을 것이라고 생각하였는데, 오류가 발생하였다.

media query의 문법처럼 ${({ theme }) => theme.mediaQuery.mobile} 코드를 괄호로 묶었더니 오류가 사라졌다.

const HeaderStyle = styled.header`
  // 기존 스타일 값들

  @media screen and (${({ theme }) => theme.mediaQuery.mobile}) {
    .logo {
      padding-left: 12px;
      img {
        width: 140px;
      }
    }
    .search-wrapper {
      display: none;
    }
  }
`;

export type MediaQuery = 'mobile' | 'tablet' | 'desktop';

interface Theme {
  name: ThemeName;
  // 기존 값들

  mediaQuery: {
    [key in MediaQuery]: string;
  };
}
export const light: Theme = {
  name: "light",
  // 기존 값들
  mediaQuery: {
    mobile: "max-width: 768px",
    tablet: "max-width: 1024px",
    desktop: "min-width: 1025px"
  }
};