[React] styled-components를 사용해서 CSS를 적용해 보자

따로 CSS 파일을 만들어서 관리하는 것에서 벗어나 자바스크립트 파일 안에서 사용할 수 있도록 만들어주는 라이브러리입니다.

컴포넌트 별로 개발하는 리액트의 특성상, 필요한 CSS만을 사용해서 적용시켜줄 수 있는 이 라이브러리는 합이 잘 맞겠죠?

 

설치:

npm i styled-components

 

사용 예시:

// keyframes : 애니메이션

import styled, { keyframes } from "styled-components"

 

const Box = styled.div`

  background-color: ${(props) => props.bgColor};

  width: 100px;

  height: 100px;

 

  // 정의한 애니메이션 적용

  animation: ${animation} 1s linear infinite;

  display: flex;

  justify-content: center;

  align-items: center;

 

  // Box 아래, 해당 태그에 적용 &은 span을 지칭

  span {

    font-size: 30px;

    &: hover {

      font-size: 40px;

    }

    ${Emoji}: hover {

      font-size: 120px;

    }

  }

`;

 

const Emoji = styled.span`

  text-color: blue;

`;

 

// Box의 CSS 설정을 가져옴

const Circle = styled(Box)`

  border-radius: 50px;

`;

 

// 단순히 html 태그를 변경시킬 수도 있다.

const Btn = styled.button`

  background-color: red;

`;

 

// 컴포넌트를 생성할 때, 속성값을 지정해줄 수 있다.

const Input = styled.input.attrs({ required: true, minLength: 10})`

  background-color: tomato;

`;

 

const animation = keyframes`

  0% {

    transform:rotate(0deg);

    border-radius: 0px;

  }

  50% {

    border-radius: 100px;

  }

  100% {

    transform:rotate(360deg);

    border-ratius: 0px;

  }

 

function App() {

  return (

    <Box bgColor="tomato">

      <span>:)</span>

      <Emij>:(</Emoji>

    </Box>

    <Circle bgColor="teal" />

    <Btn>log in</Btn>

    <Btn as="a" href="/">log in</Btn>

  );

}

 

 

 

 

 

+ Theme: 모든 색을 담은 객체

// (index.js)

import { ThemeProvider } from "styled-components";

 

const darkTheme = {

  textColor: "whitesmoke",

  backgoundColor: "#111",

}

 

const lightTheme = {

  textColor: "#111",

  backgoundColor: "whitesmoke",

}

 

ReactDOM.render(

  <React.StrictMode>

  <ThemeProvider theme={darkTheme}>

  <App />

  </ThemeProvider>

  </React.StrictMode>,

  document.getElementById("root")

);

 

ThemeProvider 아래에 있는 컴포넌트에서 아래와 같이 사용 가능합니다.

background-color: ${(props) => props.theme.backgroundColor};