How can I change the border style of React Quill container when there is an error?

Question

I am building an editor with React Quill. Could you give some advice on how I can change the border style of the editor dynamically? The border color should be changed to red if there is an error in ReactQuill.

The following code is what I tried, but it changes the outline of the whole Quill component.

   <div className={{error ? classNameOnError : ""}>
        <ReactQuill
          theme="snow"
          placeholder="Explain about the project in detail."
          onChange={(contentHtml) =>
            setValues({ ...values, content: contentHtml })
          }
          onBlur={(e) => validate({ content: e.index })}
        />
      </div>

Answer 1

This is the way that I approached solving the issue.

TextEditor.js

import {useState} from 'react'; 
import './_textEditor.scss'

const TextEditor = () => {
// 
const [error, setError] = useState()

return 
<div>
 <ReactQuill
   theme="snow"
   className={error ? "ql-error" : null} // Add a dynamic class 
   onChange={(contentHtml) =>
    setValues({ ...values, content: contentHtml })
   }
 />
</div>
}

_textEditor.scss

.quill.ql-error {
  .ql-toolbar {
    border-bottom: 1px solid red;
  }
  .ql-container {
    border-left: 1px solid red;
    border-right: 1px solid red;
    border-bottom: 1px solid red;
  }
}