reactjs - 出现错误时如何更改React Quill容器的边框样式？

Question

我正在使用 React Quill 构建一个编辑器。您能否就如何动态更改编辑器的边框样式提供一些建议？如果 ReactQuill 出现错误，边框颜色应更改为红色。

下面的代码是我尝试过的，但它改变了整个 Quill 组件的轮廓。

   <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

这就是我解决问题的方法。

文本编辑器.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;
  }
}