[React.js / Typescript] styled-components에서 변수 사용하기

React.js / Typescrit 프로젝트에서, styled-components 내부에 변수를 사용하려면

styled-components의 변수의 타입을 지정해주어야 한다.

 

GlobalStyle 변수 타입 지정, 변수 사용

//styled.ts

import { createGlobalStyle } from "styled-componenets";

// GlobalStyle에서 사용할 변수 타입 지정
interface ModalProps {
  bgColor: string
}

// GlobalStyle에서 변수 사용
export const GlobalStyles = createGlobalStyle<ModalProps>`
    body {
      background-color: ${(props) => (props.bgColor && props.bgColor)}
    }
`;

 

 

// App.tsx

import { GlobalStyles } from "./styles";

function App() {
  const bgColor = "blue";

  return (
    <div>
        <!-- bgColor 변수 전달 -->
        <GlobalStyles bgColor={bgColor} />
        <div>
          ...
        </div>
    </div>
  );
}

export default App;

 

 

styled-components에서 변수 타입 지정, 변수 사용

// App.tsx

// styled-components 사용하기 위해 불러오기
import styled from "styled-components";

// styled-components에서 사용할 변수 타입 지정해주기
interface ContainerProps {
  bgColor: string;
}

// 변수 사용한 styled-components 만들기
const Container = styled.div`
  background-color: ${props => props.bgColor};
`;

function App() {
  const bgColor = "blue";

  return (
    <div>
        <!-- bgColor 변수 전달 -->
        <Container bgColor={bgColor}>
          ...
        </Container>
    </div>
  );
}

export default App;