[React] Styled-Component

👩‍🎓 설치방법

npm i styled-components

👩‍🎓 불러오기

import styled from "styled-components";

👩‍🎓 사용법

styled.div `css`
// styled될 컴포넌트의 형태(이걸 쓰면 무조건 div이다)를 정의 해줌
// 백틱 안에 css 문법

👩‍🎓 이미 디자인된 styled 추가로 보완하는 법

const SimpleButton = styled.button `
 color : white,
 background :green
`
const LargeButton = styled(SimpleButton)`
 font-size :50px;
`
// styled.이 아니라 styled안에 기존 변수를 넣음

styled(컴포넌트명) 을 인자로 넣어주면 인자의 styled를 유지하면서 스타일을 더 넣을 수 있다.

Props에 따라 스타일 바뀌게 하기

예시) 버튼 Component를 만들기

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

const StyledButton = styled.button`
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "gray"};
  background: ${(props) => props.background || "white"};
`;

function Button({ color, background }) {
  return (
    <StyledButton color={color} background={background}>
      버튼
    </StyledButton>
  );
}

export default Button;

APP에서 버튼 컴포넌트 사용하기

import "./App.css";
import Button from "./Button";

function App() {
  return (
    <div className="App">
      <Button color="green" background="pink" />
    </div>
    // 위 선언된 StyledButton가 포함된 button을 사용 한 것
  );
}

export default App;

앱에서 버튼 컴포넌트를 선언 후 color에 props를 주면 Button 컴포넌트에서 props를
받아 styled에 인자를 채워주게 됨

props로 여러 스타일 수정 하기

버튼이 있다는 가정 styled-component에 primary 를 넣어주면
버튼에 styled-component basic.css의 primary 스타일이 부여됨

👩‍🎓 이때 button 컴포넌트의 Styled 설정에서

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

(props로 primary가 넘어 왔을 때) && css ` ` 
//css는 styled-components 내부 라이브러리

이렇게 설정 값 전체를 설정 할 수 있음

👩‍🎓 물론

function Button({...props}){
 return <StyledButton {...props}/>
}

이렇게 jsx에도 넣어줘야 props에 반응해서 인식하니 해줘야함