React - Electron, using React-Quill package with styles not applying to component - css

Question

I have this very weird problem with the React-Quill library component.
I am importing the component as per the NPM instructions, and the editor does load but without any actual CSS applied
The only when the styles are applied are when I link the stylesheet through CDN in the index.html file
<link rel=“stylesheet” href=“//cdn.quilljs.com/1.2.6/quill.snow.css”>
I’ve tested in a stackblitz the same code and it works without such issues.
I am using similar other components such as ‘react-color-palette’ where I do import the styles in the same fashion through the node_modules and there is no problem with it, so it doesn’t make sense to me to be a webpack config problem either but I tested various options with different settings on webpack to no avail.
Even added the CSS to my global CSS which works perfectly fine too, but it still doesn’t apply to the React-Quill
For some reason, the CSS isn't targeting the classes, or its scoped out, but I am unable to understand why that happens
Here is the code
import React, { useState } from 'react';
import hljs from 'highlight.js';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const modules = {
// syntax: {
// highlight: (text: string) => hljs.highlightAuto(text).value,
// },
toolbar: [
[{ header: [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ color: [] }],
[{ align: [] }],
[{ indent: '-1' }, { indent: '+1' }],
[{ list: 'ordered' }, { list: 'bullet' }],
['link', 'image', 'video'],
['code-block', 'blockquote'],
[{ script: 'sub' }, { script: 'super' }],
],
clipboard: {
matchVisual: false,
},
syntax: false,
};
const textFormats = [
'font',
'header',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'background',
'color',
'script',
'list',
'bullet',
'link',
'image',
'video',
'clean',
'code-block',
'indent',
'list',
'align',
];
function RichTextEditor() {
const [value, setValue] = useState('');
hljs.configure({
// useBR: false,
languages: [
'javascript',
'java',
'html',
'xml',
'sql',
'typescript',
'bash',
],
});
return (
<ReactQuill
value={value}
onChange={setValue}
placeholder="Write a new Note"
modules={modules}
formats={textFormats}
/>
);
}
export default RichTextEditor;
Edit
I opened the console and checked in the tags
there are styles currently applied for the react-quill, but seems react modifies the class names:
.RichTextEditor__ql-container__SP9Yv
Where it should really just be
.ql-container