서론

https://styled-components.com/

JS —> SCSS기반의 CSS로 컴포넌트에 쉽게 적용시킨다.

기본 CSS베이스가 필요하다면 ?

yarn add styled-components

• 내가 생각하는 장점

VSCode 에 추가할 플러그인

vscode-styled-components ⇒ `` 안에 CSS 문법을 적용시킨다.

시작하기

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

function App() {
  return (
    <Wrapper>
      <h1> Hello </h1>
    </Wrapper>
  )
}
const Wrapper = styled.div`
  padding: 100px;
  background-color: #ececec;
`
export default App

고급 응용

• CSS, SCSS SCSS으로 직관적인 코딩생활 쌉가능!

• img에 src 부여하기

  const Star = styled.img.attrs({
    src: "icons8-star-50.png",
  })``;
  

반응형 웹 어플리케이션 만들기

index.html 에 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 했지?

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

function App() {
  return (
		<>
	    <PC>745px이상인 화면</PC>
	    <Mobile>745px미만인 화면</Mobile>
		</>
  )
}
const PC = styled.div`
  @media screen and (max-width: 745px) {
    display: none;
  }
`;
const Mobile = styled.div`
  @media screen and (min-width: 745px) {
    display: none;
  }
`;
export default App

• 반응형으로 처리할 부분을 @media로 분리해서 다르게 스타일 적용시키면 된다.