[Css-in-Js] styled-components를 이용한 toast 간단하게 꾸미기

styled-components 는 javaScript나 typeScript 환경에서 스타일을 작성하기 위한 CSS-in-JS 라이브러리다.

 

1. 설치 

npm install styled-components@latest
npm install --save react-toastify

 

2. import

import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import styled from "styled-components";

 

3. styled components를 이용한 스타일이 적용된 컴포넌트를 생성.

export const StyledToastContainer = styled(ToastContainer)`
  margin-top: 60px;
  .Toastify__toast {
    background-color: black;
    color: white;
    font-size: 14px;
    border-radius: 10px;
  }
`;

 

4. 컴포넌트 적용

<StyledToastContainer
    position="bottom-left"
    autoClose={2000}
    hideProgressBar={true}
    closeOnClick={true}
    pauseOnHover={false}
    limit={1}
 />

 

[ 적용예시 ]

 

[ 결과화면 ]