Styled-Components

css-in-js

• 자바스크립트 방식으로 css작성하는 방식 : if문, switch문, 삼항연산자 등을 사용할 수 있음
• props를 통해서 부모 컴포넌트 -> 자식 컴포넌트 : 조건부 스타일링 가능

 

패키지란,

리액트에서 제공하지 않지만 외부에서 쓸 수 있는 써드 파티(3re party) 프로그램. 외부 라이브러리
npm이라는 마켓 안에 다 모여있음

 

준비하기

• VScode 플러그인 설치
  
  1. VSCode extention확장
  2. vscode styled components 설치
     (작성자 Styed Components로 되어있는거. 매니큐어 바르는 그림)
• [터미널] yarn add styled-components

사용법

1. import 해와야됨
   import styled from "styled-components";
2. 컴포넌트 만들기
   const Component작명 = styled.html요소`css내용`

css방식으로 쓰기 때문에 ``백틱 문자열로 감싸줌.

태그로 사용될 수 있는 컴포넌트가 된거

const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 20px;
`;

 

조건부 스타일링

props 속성으로 내려주면 내부로 들어올 수 있음

const StBox = styled.div`
    border: 1px solid ${(props) => props.borderColor};
`;
<StBox borderColor="blue">파란박스</StBox>

 

---

GlobalStyles(전역 스타일링)
프로젝트 전체를 아우르는 스타일 지정.

조건부 스타일링 styled-components는 해당 컴포넌트 내에서만! 지역 컴포넌트 스타일링
공통되는 부분 

(src/GlobalStyle.jsx)

const { createGlobalStyle } = require('styled-components');

// body 태그 밑에 있는 것들은 다 적용할거다
const GlobalStyle = createGlobalStyle`
 body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
 }
`;

export default GlobalStyle;

(App.js)

import GlobalStyle from "./GlobalStyle";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle /> {/* 상단에서 전역스타일링 적용! */}
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

 

다음 프로젝트떄 default style을 제거하는 방식으로 CSS RESET을 전역 스타일링으로 작성해봐도 좋을 듯?