[ React ] styled components 사용법 간단 정리

기본 구문

// 구문
styled.tagName`css code`


// 예시
import styled from 'styled-components';

const Component = styled.p`
  color: blue;
`

<Component>Hello World!</Component>

 

props 사용법

import styled from "styled-components";

const Component = styled.div`
  font-size: ${(props) => props.large ? 16 : 12}px;
  font-size: ${({large}) => large ? 16 : 12}px;  // 이 방법도 가능
`

<Component large={true}>Hello World!</Component>
<Component large>Hello World!</Component>
// 위 둘은 완전 동일

 

조건부 스타일 생성

import styled, { css } from "styled-components";

const Component = styled.div`
  font-size: 12px;
  ${(props) => 
     props.large &&
     css`
       color: blue;
   `}
`

<Component large>Hello World!</Component>

- css`` 로 새로운 스타일을 생성할 수 있다. css를 import 하는 것을 깜빡하지 말자.

 

컴포넌트 내부 요소에 스타일 적용

const Container = styled.div`
  svg {
    // SerchIcon 컴포넌트에 있는 svg 태그 
  }

  div {
    color: red;
  }
`

<Container>
  <SearchIcon />
  <div>div tag</div>
</Container>

 

&와 선택자

 

- &는 컴포넌트 자신을 의미한다. 

 

스타일 상속

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// TomatoButton은 Button 컴포넌트의 스타일을 상속받는다
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

- styled constructor로 감까주면 된다. 

 

 

 

<참조>

https://styled-components.com/docs/basics#