[React] styled-components 설치 및 사용, 스타일 확장

styled-components

---

styled-components는,

css 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 나타내주는 오픈소스이다.

컴포넌트를 사용하기 때문에 리액트와 궁합이 잘 맞아, 리액트 개발에 많이 사용하고 있다.

 

styled-components 설치하기

# npm을 사용하는 경우
npm install --save styled-components

# yarn을 사용하는 경우
yarn add styled-components

아래 코드를 작성하여 styled-component가 잘 적용됐는지 확인할 수 있다. 

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  padding: 1em;
  background: grey
`
const Title = styled.h1`
  font-size: 1.5em;
  color: white;
  text-align: center;
`

function MainPage(props) {
  return (
    <Wrapper>
      <Title>
          안녕, 리액트!
      </Title>
    </Wrapper>
  ) 
}

export default MainPage;

styled-components 기본 사용법

tagged template literal(``)을 사용하여 css가 적용된 리액트 컴포넌트를 만들어준다.

• ``로 둘러싸인 문자열 부분에 css를넣고
• 태그 함수 위치에는 styled.(HTML Tag)을 넣는다.

📌 styled-components 사용 예시

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  padding: 1em;
  background: grey

styled-components props 사용하기

import React from "react";
import styled from "styled-components";

const Button = styled.button`
  color: ${props => props.dark ? "white" : "dark"};
  background: ${props => props.dark? "black" : "white"};
  border: 1px solid black;
`

function Sample(props) {
  return(
    <div>
      <Button>Normal</Button>
      <Button dark>Dark</Button>
    </div>
  )
}

export default Sample;

styled-components의 스타일 확장하기

import React from "react";
import styled from 'styled-components';

// Button 컴포넌트
const Button = styled.button`
  color: grey;
  border: 2px solid palevioletred;
`;

// Button에 style이 추가된 RoundedButton 컴포넌트
// -> 다른 컴포넌트의 style을 확장해서 사용
const RoundedButton = styled(Button)`
  border-radius:16px;
`;

function Sample(props) {
  return (
    <div>
      <Button>Normal</Button>
      <RoundedButton>Rounded</RoundedButton>
    </div>
  )
}

https://styled-components.com/docs

---

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션15. Styling
• styled-components 공식문서

 

➰ 더 공부할 것

• Tagged template literal, ↔ Untagged template literal