如何修改react-native-cn-quill库中QuillEditor的背景色？

我太懂你遇到的这个小坑了——直接给QuillEditor的style属性加backgroundColor，确实只会在编辑器还没完全渲染好的时候闪一下红色，等编辑器真正加载完成，背景色就消失了。这是因为react-native-cn-quill的编辑器内部有自己的层级结构，外层的style会被编辑器内部的默认样式给覆盖掉。

给你分享几个亲测有效的解决办法，按优先级来试：

• 优先使用库提供的editorStyle属性
  这个属性是官方专门用来定制编辑器编辑区域样式的，比外层的style更精准，不会被内部样式覆盖。代码示例：

  <QuillEditor
    // 用editorStyle代替外层style来设置背景色
    editorStyle={{ backgroundColor: 'red' }}
    // 保留你原本的其他配置项
    // ...
  />
  

• 如果editorStyle不生效，试试webviewStyle属性
  因为react-native-cn-quill是基于WebView实现的，编辑器的内容其实是在WebView里渲染的，所以给WebView容器设置背景色也能生效：

  <QuillEditor
    webviewStyle={{ backgroundColor: 'red' }}
    // 其他配置项...
  />
  

• 终极方案：在编辑器就绪后直接修改Quill实例样式
  如果上面两种方法都没效果，还可以在onEditorReady回调里获取Quill实例，直接修改它的根元素样式，这时候编辑器已经完全加载，修改会直接生效：

  <QuillEditor
    onEditorReady={(quillInstance) => {
      // 获取编辑器的根容器元素
      const editorRoot = quillInstance.root;
      // 直接设置背景色
      editorRoot.style.backgroundColor = 'red';
    }}
    // 其他配置项...
  />
  

一般来说，前两种方法就足够解决问题了，你可以先试试第一种，不行再往下试~

内容来源于stack exchange