[React] styled-component

✅ Styled Component

styled component는 js 파일 안에 직접 css 스타일을 적용 할 수 있는 모듈이다. yarn 이나 npm을 통해서 설치가 가능하다.

✅ 사용 예시

1. 먼저 Styled-Components를 설치 해준다.

$ yarn add styled-component

2. styled-components를 import 시켜준다.

import styled from 'styled-components

3. const Wrapper = styled.div``;

• 대문자 시작으로 스타일드 컴포넌트를 선언한다.
• styled.(태그)후 Templete Literals 문법으로 css를 작성해준다.
• div가 아닌 button이나 input에 스타일링을 하고 싶다면 styled.button 이나 styled.input 같은 형태로 뒤에 태그명을 넣어주면 된다.

import styled from 'styled-components

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

const Wrapper = styled.div`
  padding: 4rem;
  background: black;
`;

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

사용할 태그를 스타일링하고 변수에 저장하면 스탕일링된 태그를 컴포넌트처럼 사용할 수 있게 된다

4. props 전달

-styled-component의 장점은 javascript를 통해 props를 주고받으며 동적인 스타일을 지정하기 편하다는 것이다.

render(
  <div>
    <Button>Normal</Button>
    <Button primary width="100">Primary</Button>
  </div>
);

// 만약 Button 컴포넌트에 전달된 props(width)가 200 미만(조건)이면
// 삼항연산자 true : "palevioletred"
// 삼항연산자 false : "white"

const Button = styled.button`
  background: ${props => props.width < 200 ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

5. Extending Styles

• 기존에 스타일링한 컴포넌트를 상속받아서 스타일링을 수정할 수도 있다. 마치 클래스가 상속받아 오버라이딩하듯이 말이다.

const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;