How to import css from React Quill?

Question

I am making a bulletin board using react. The POST editor used React Quill and saved it to the server normally. The css used in Quill editor was reflected and saved to the server well, but when imported and displayed on the screen, the css does not work properly. How can I import Quill's css file?

This code is parsing HTML text saved with Quill as dangerouslySetInnerHTML.

 <div className="view" dangerouslySetInnerHTML={{ __html: data?.content }}></div>

This code is a snippet from the code I wrote in Quill.

<p class="ql-align-center">
  <img src="https://myrecord.s3.ap-northeast-2.amazonaws.com/e2c36fce-8ce0-4ae8-a188-9ca549ebe2ea.jpg">
</p>
<p class="ql-align-justify">
  <span class="ql-size-huge">1차&nbsp;세계&nbsp;대전의&nbsp;발발과&nbsp;미국</span>
</p>

How can I import a css file with ql-align-center, ql-align-justify??

Answer 1

Those css classes can be imported like this:

import "react-quill/dist/quill.core.css";

There's also quill.snow.css and quill.bubble.css, which add in styles for the snow editor theme and bubble editor theme respectively.

Be aware that most of the css classes only work if they're inside a .ql-editor, so you will probably need to change your code to:

<div className="view ql-editor" dangerouslySetInnerHTML={{ __html: data?.content }}></div>