[React] styled-component

 

styled-components

 

styled-components는 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에

스타일을 바로 삽입하는 CSS in JS  라이브러리 중 하나이다.

개인적으로 css파일을 따로 작성하는 것을 선호하기 때문에 사용을 잘 안했으나

알고는 있어야 할 듯 하여 간단하게 정리를 하였다.

 

---

 

설치

npm i styled-components

 

사용 시 import

import styled from "styled-components";

 

---

 

일반 태그에 적용하는 법

 

적용 전

const App = () => {
  return (
    <>
      <div>Styled-components</div>
    </>
  );
};

 

적용 후

const MainBox = styled.div`
  padding: 10px;
  font-size: 16px;
`;

const App = () => {
  return (
    <>
      <MainBox>Styled-components</MainBox>
    </>
  );
};

 

 

컴포넌트에 적용하는 법

 

적용 전

const App = () => {
  return (
    <>
      <MenuList />
    </>
  );
};

 

 

적용 후

const MenuListBox = styled(MenuList)`
  padding: 10px; 
`;

const App = () => {
  return (
    <>
      <MenuListBox />
    </>
  );
};

 

stlyed를 적용할 이름을 만들어주고 styled(컴포넌트명)과 함께 작성한다.

* 컴포넌트가 많아지면 이름 짓기가 좀 불편하다.

 

 

전역으로 style 지정하는 법

* 클래스명이 지정되어있는 스타일을 수정하거나 라이브러리에 있는 css수정 등에 유용

 

import styled, { createGlobalStyle } from "styled-components";

const Global = createGlobalStyle`
.menu-list{ // class명을 지정해서 넣을 수 있다.
    padding:20px;
}`;



const App = () => {
  return (
    <>
      <Global />  // 사용할 컴포넌트에 추가
      <MenuListBox />
    </>
  );
};

 

해당 태그 내부의 태그 css수정

const MainBox = styled.div`
  padding: 10px;
  font-size: 16px;
  &button{
    font-size: 20px;
  }
`;

const App = () => {
  return (
    <>
      <MainBox>
        <button>버튼</button>
      </MainBox>
    </>
  );
};

 

css 내부에 함수 적용

Tagged Template Literals을 사용하기 때문에 함수를 문자열 안에 포함시킬 수 있다.

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

const MainBox = styled.div`
  padding: 10px;
  font-size: 16px;
  &button{
    color: ${(props) => props.color || "black"};
  }
`;

const App = (props) => {
  return (
    <>
      <MainBox>
        <button>버튼</button>
      </MainBox>
    </>
  );
};

 

 

 

컴포넌트를 활용한 사용예시

 

동일한 스타일을 지닌 버튼컴포넌트를 만들어 놓고

props로 추가적인 스타일을 전달해주어 재사용을 하는 방식이다.

 

import Button from "./Button";

const App = (props) => {
  return (
    <div>
        <Button color="white" background="blue">버튼</Button>
    </div>
  );
};

[Button.js]

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

const StyledButton = styled.button`
  padding: 20px;
  border-radius: 10px;

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

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

 

 

참고:

https://www.daleseo.com/react-styled-components/