I want to style the text assigned to the placeholder attribute and make its font size larger. How do I do this with ReactQuill?

          <ReactQuill placeholder= "some fun text" onChange = {onContentChange} value={contentValue} theme="snow" style={{

            height:"300px",
            padding:"20px",
            lineHeight:"0px",

          }}/> 

I want to style the text assigned to the placeholder attribute and make its font size larger. How do I do this with ReactQuill?

          <ReactQuill placeholder= "some fun text" onChange = {onContentChange} value={contentValue} theme="snow" style={{

            height:"300px",
            padding:"20px",
            lineHeight:"0px",

          }}/> 

• javascript
• reactjs
• react-quill

1 Answer 1

You can edit editor's styles using custom CSS. Add this to your index.css file or if you are using any CSS framework like styled-ponents, write this CSS there.

.quill > .ql-container > .ql-editor.ql-blank::before{
    font-size: 20px;
    color: red;
}