[REACT] styled components 심화 사용법

 

오늘은 그동안 styled components를 사용하면서 사용해보지 않았던 기능들에 대해서 공부를 해보자

 

 

---

1. GlobalStyle

 

createGrobalStyle을 import해와서 사용할 수 있다.

지금 이 스타일은 html body태그 전체에 회색으로 색지정을 해주고 있다.

 

import React from 'react';
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>안녕하세요</div>
    </>
  );
}

export default App;

 

 

 

 

2. CSS Selector

 

컴포넌트를 하나하나 따로 만들지 않고 classname을 줘서 하나의 컴포넌트 안에서 자식 요소들에게 css를 주었다.

기능적으로 큰 의미가 없다면 이렇게 해도 무방하다.

 

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

const TodoHeadBlock = styled.div`
  padding-top: 48px;
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e9ecef;
  h1 {
    margin: 0;
    font-size: 36px;
    color: #343a40;
  }
  .day {
    margin-top: 4px;
    color: #868e96;
    font-size: 21px;
  }
  .tasks-left {
    color: #20c997;
    font-size: 18px;
    margin-top: 40px;
    font-weight: bold;
  }
`;

function TodoHead() {
  return (
    <TodoHeadBlock>
      <h1>2019년 7월 10일</h1>
      <div className="day">수요일</div>
      <div className="tasks-left">할 일 2개 남음</div>
    </TodoHeadBlock>
  );
}

export default TodoHead;

 

 

 

 

3. Component Selector

const TodoItemBlock = styled.div`
  display: flex;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  &:hover {
    ${Remove} {
      display: initial;
    }
  }
`;

여기서 hover부분이 좀 생소하다

Remove라는 컴포넌트를 select하는 건데,

TodoItemBlock 컴포넌트가 hover될때 Remove컴포넌트의 display를 initial로 바꿔라는 뜻이다.

 

 

 

 

4. props 사용

 

const CircleButton = styled.button`
 
  ...
  
  ${props =>
    props.open &&
    css`
      background: #ff6b6b;
      &:hover {
        background: #ff8787;
      }
      &:active {
        background: #fa5252;
      }
      transform: translate(-50%, 50%) rotate(45deg);
    `}
`;

이 CircleButton 컴포넌트가 props로 open을 받아왔는데 그게true일때 css를 바꿔준다.