styled components 사용 방법

소개

css를 컴포넌트 처럼 선언하여 사용할 수 있다.

리액트 컴포넌트 내부에서 작성하여 매우 빠르게 스타일을 적용시킬 수 있다.

Local 하게 사용하는 방법과 Global 하게 사용하는 방법 두가지가 있다.

 

설치

# npm i styled-components

 

사용법

1. Local 하게 사용하는 방식
아래와 같이 CSS 스타일을 컴포넌트 처럼 사용할 수 있다.

// 컴포넌트.js
import styled from "styled-components"
const Header = styled.header``;
const List = styled.ul`
  display: flex;
  &:hover {
    background-color: blue;
  }
`;

const 컴포넌트 = () => {
  return <List> ... </list>
}

 

2. Global 하게 사용하는 방식

별도 파일에 Global하게 적용하고 싶은 스타일을 작성한다.

보통 기본 스타일을 Global하게 싹 날려버리기 위해 styled-reset 이곳에 적용하여 사용한다.

// GlobalStyles.js
import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";
const GlobalStyles = createGlobalStyle`
  ${reset};
  a{
    text-decoration:none;
    color:inherit;
  }
  *{
    box-sizing : border-box;
  }
`;
export default GlobalStyles;

아래와 같이 App에 포함시켜주면 된다.

// App.js
import React, { Component } from "react";
import Router from "Components/Router";
import GlobalStyles from "Components/GlobalStyles";

class App extends Component {
  render() {
    return (
      <>
        <Router />
        <GlobalStyles />
      </>
    );
  }
}
export default App;

themes

---

ThemeProvider에 theme을 넘겨주면 하위 컴포넌트 어디서든 스타일변수에 접근할 수 있다.

이를 잘 사용하면 재활용성이 높아진다.

 

1. 스타일 파일 생성

theme.js 파일을 만든다. 

// theme.js
const pixelToRem = (size) => `${size / 16}rem`; 

const fontSizes = {
  title: pixelToRem(60),
  subtitle: pixelToRem(30),
  paragraph: pixelToRem(18),
};

const colors = {
  black: "#000000",
  ...
};

const common = {
    flexCenter: `
    display: flex;
    justify-contents: center;
    align-items: center;
  `,
}

const theme = {
  fontSizes,
  colors,
  common,
};

export default theme;

2. ThemeProvider에 등록
index.html 에 아래 내용 작성 해줘야 적용된다.

// index.js
import styled, { ThemeProvider } from "styled-components";
import theme from "styles/theme";

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

3. theme 변수 접근

styled Component 내부에서 props.theme.변수명 으로 접근한다.
theme 까지만 써도 뭐가 있는지 보여줘서 매우 편리하다.

// 컴포넌트.js
 const 요소명 = style.div`
   color: ${({ theme }) => theme.colors.black};
   color: ${(props) => props.theme.colors.black};
 `

 

+ 타입스크립트로 작성할 시에는 추가 파일을 만들어야 한다.

theme.ts는 사용자의 스타일을 정의하기 위한 파일이고
theme.ts의 스타일 유형을 지정하기 위한 styled.d.ts 파일을 별도로 만들어야 함!

//styled.d.ts
import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    blueColor: string;
  }
}