Styled Components

Styled Components에 관하여

Styled Component란?

• styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다.

(styled-components)

https://styled-components.com/

NPM 기본 설치방법

$ npm install --save styled-components

package.json

"dependencies": {
  "react": "^16.8.0",
  "react-dom": "^16.8.0",
  "styled-components": "^4.3.2"
}

// 이후, package.json 에서 styled-components 가 추가된 것을 볼 수 있다.

Syntax

import styled from 'styled-componets'

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

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

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

가변 스타일링1

import styled from 'styled-componets'

const Title = styled.h1`
  color: ${(props) => props.color || "gray"};
`;

// props가 있으면, prop.color 없으면, color: gray 가 된다.

${(props) =>
	props.primary &&
	css`
		color: white;
		background: navy;
		border-color: navy;
	`
}

// props에 primary가 존재하는 경우, CSS를 아래로 변경한다.

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

가변 스타일링2

import styled from 'styled-componets'

const Title = styled.h1`
  color: blue;

  &:hover {
    color: red;
  }

  #id {
		div {

		}

    background: orange;
  }

  .something-else & {
    border: 1px solid;
  }
`

// SCSS 문법을 활용한 nesting 문법을 활용 할 수 있다.

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

Global Style

// index.js 에서 import 추가 해준다.

import StyleTheme from "./Styles/StyleTheme";
import StyleGlobal from "./Styles/StyleGlobal";

// 각 컴포넌트 별로 CSS 사용방법은 아래와 같다.

color: ${(props) => props.theme.colors.grayColor};