I was creating a markdown editor with Quilljs in my nextjs project with tailwind and had problem styling it since I was using light and dark mode.
Well, here is the hack around it 🎊.
Since i was using tailwind, the best way was to make sure that quilljs elements were receiving some specific stylings from my parent class, so I could control it easily. 🤔🤔🤔💭
This is an edited version of the Quill component
//quill component
import { FC } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
interface EditorProps {
className: string;
placeholder: string;
}
const modules = {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline", "strike", "blockquote"],
[{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
["link", "image"],
["clean"],
],
};
const formats = ["header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet", "indent", "link", "image"];
const Editor: FC<EditorProps> = ({ placeholder, className }) => {
return (
<>
<ReactQuill
className={className}
placeholder={placeholder}
modules={modules}
formats={formats}
/>
</>
);
};
export default Editor;
Add this to your root css (global.css,main.css or whatever you use)
// root css file
.quill > * {
border-color: inherit !important;
color: inherit !important;
}
.quill > .ql-toolbar {
/* border radius of the toolbar */
border-radius: 10px 10px 0 0;
}
.quill > .ql-container {
/* border radius of the container and for font size*/
font-size: inherit;
border-radius: 0 0 10px 10px;
}
.ql-toolbar.ql-snow .ql-picker-label {
color: inherit !important;
opacity: 0.76;
}
.ql-snow .ql-picker {
color: inherit !important;
}
.quill > .ql-container > .ql-editor.ql-blank::before {
/* for placeholder */
color: inherit;
}
.ql-snow.ql-toolbar button svg {
opacity: 0.76;
color: currentColor;
}
.ql-snow .ql-stroke {
/* for the border of the editor */
stroke: currentColor !important;
}
.ql-snow .ql-fill {
/* for the bg color */
fill: currentColor !important;
}
.ql-picker-item {
/* for dropdown */
color: #444 !important;
}
Use it in your page or component
<Editor
className="my-4 dark:border-secondary-40 border-gray-500 rounded-md text-gray-800 dark:text-white lg:text-xl text-lg"
placeholder={"Write something here..."}/>
I'll love to get some opinion and answer questions you may have.
Top comments (3)
damn! love this style 💖
sir you are the exact life saver.
You did great. You really did the heavy lifting for us, thank you!