React styled-components

1. styled-components

styled-component는 스타일을 가진 컴포넌트를 만들 수 있도록 도와주는 CSS-in-JS 라이브러리.

import styled from 'styled-components'

 // styled 뒤에 있는 태그를 앞에 있는 저 변수로 만든다라는 의미로 이해했다!
 // 백틱 안에 있는 내용이 css 먹힘.
const Wrap = styled.div`
  height: 100px;
  background-color: #ffffff;
`;

const ListStyle = styled.li`
  display: inline-block;
  list-style: none;
  margin-right: 30px;
  font-weight: bold;
  font-size: 15px;
`;

2. 전역 스타일

import styled, { createGlobalStyle} from 'styled-components'

const ResetStyle = createGlobalStyle`
  body {
	margin: 0;
	padding: 0;
  }
  `;

3. 가변 스타일링

const ButtonStyle = style.button`
  color: ${(props) => props.color || 'blue'}
`

4. 내부에 속한 특정 컴포넌트 스타일만 바꾸기

const InnerContainer = styled.div`
  color: yellow;
  border: 1px solid pink;
`;
const InnerContainerTest = styled.div`
  color: blue;
  border: 1px solid black;
`;

// 템플릿 리터럴로 특정 컴포넌트만 가져와서 바꿀 수 있다!
const OuterContainer = styled.div`
  border: 1px solid red;
  ${InnerContainerTest} {
    margin: 50px;
  }
`;