My solution is to override it by adding the highest priority !important
.ql-align-center {
text-align: center !important;
}
.ql-align-left {
text-align: left !important;
}
.ql-align-right {
text-align: right !important;
}
.ql-align-justify {
text-align: justify !important;
}
I fixed it by containerizing the html value by div with “ql-editor” class.
Here’s my sample code for using dangerouslySetInnerHTML
<div class="ql-editor">
<div dangerouslySetInnerHTML={{ __html: your_quill_html_value }} />
</div>
Hope it helps to future readers.