React Styled-components

 

Styled-componets 란?

- class 이름 짓기에서 해방

- 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적

- CSS-in-JS 라이브러리 중 하나

- 컴포넌트에 스타일을 직접 입히는 방식이라고 생각해도 됨.

- 문법은 css오 ㅏ 같다.

 

Styled-components 설치

yarn add styled-components

 

Styled-components 적용

import React from 'react';
// 패키지에서 styled를 불러온다.
import styled from 'styled-components';

function App() {
  return (
    <div className="App">
      <MyStyled bgColor={"red"}>hello React!</MyStyled>
    </div>
  );
}

// scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있다.

const MyStyled = styled.div`
  width: 50vw;
  min-height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: #fff;
  &:hover{
    background-color: #ddd;
  }
  background-color: ${(props) => (props.bgColor? "red" : "purple")};
`;

export default App;