dangerouslySetInnerHTML 쓸 때 Styled-components가 동작하지 않는 문제

DOM에 직접 HTML tag를 넣는 일은 지양하려고 하지만, 때때로 작업이 필요할 때가 있다.

리액트에서는 dangerouslySetInnerHTML을 사용하면 이러한 작업을 수행할 수 있는데, 해당 케이스에서 특수한 스타일을 추가해야 해다. className을 정하고 짜잔.. 실행을 했을 때는요?

 

화면에서는 아무런 변화가 없었다.

 

https://github.com/styled-components/styled-components/issues/3347

How styled-components interact with inline styles created by dangerouslySetInnerHTML? · Issue #3347 · styled-components/styled

 

나와 같은 사람이 있어 해당 케이스는 인라인 스타일로 대체 하였다.
style="color: white" 으로 넣을 수도 있고, 객체 형식으로 style={ color: white } 처럼 넣을 수도 있다.