[react-toastify] css 안먹히는 이슈

 

그냥 만드려다가 부드러운 모션에 위치도 아래서부터 쌓이는걸 만들자니 복잡해서 그냥 라이브러리를 쓰기로 했는데 하란대로 했는데 멀쩡하던 화면이 캡쳐와 같이 우르르 틀어져버렸음. 도대체 뭐가 원인인가 찾다가 발견한 글에서 힌트를 얻음.

 

react-toastify 라이브러리 말고 다른 라이브러리가 문제라면 2번 확인!

 

 

1. css 주입시키는 방법

import { injectStyle } from "react-toastify/dist/inject-style";

injectStyle();

다행히도 해당 라이브러리에서 inject할 수 있는 함수를 제공해서 위와 같이 사용함. 나는 useEffect에 넣어서 실행했었음.

 

이거 아니면 다른 라이브러리 쓰기라는 방법도 있다 ㅋㅋㅋ

 

 

 

https://github.com/fkhadra/react-toastify/issues/202

Toast style is not working correctly · Issue #202 · fkhadra/react-toastify

 

2. head에 직접 주입시키기

하필 또 다른 라이브러리에서 이런 문제가 생기길래 찾아보니 위와 같은 기능이 없었다. 고민고민하다가 직접 이런식으로 head에 박아버렸음.

 

먼저 js파일을 하나 만들어주고 아래와 같이 입력함.

Object.defineProperty(exports, "__esModule", {value: true});
exports.injectStyle = injectStyle;
function injectStyle() {
  var style = `.slider{width: 100%; height: 100%}`;
  var css = document.createElement('style');
  css.innerText = style;
  document.head.appendChild(css);
}

중간에 style변수에 원하는 라이브러리의 css를 가져와서 쭉 입력해줌(구글에 css Compressor같은거 검색하면 한줄로 쭉 만들어주는 사이트 많이있음). 그리고 나서 1번과 같은 방법으로 injectStyle을 가져와서 ()을 붙여 실행해주면 된다.

 

https://www.toptal.com/developers/cssminifier

CSS Minifier & Compressor | Toptal®

 

굳이 파일을 생성해서 넣을 필요가 없다면 injectStyle이하 함수 부분을 직접 써주면 될듯.