React中如何为React Quill组件自定义.ql-snow .ql-stroke样式？

首先明确：你最初尝试的内联style写法不会生效，因为React组件的style属性仅作用于组件的根元素，不支持CSS嵌套选择器（& .ql-snow .ql-stroke是预处理器语法，React原生不识别）。下面是几种可行的解决方案：

方案1：全局/模块化CSS（最推荐） #

Quill的Snow主题样式会覆盖自定义样式，所以需要确保你的选择器优先级足够，必要时可使用!important。

全局CSS写法 #

在项目的全局CSS文件（比如index.css）中添加：

.ql-snow .ql-stroke {
  stroke: white !important;
}

如果担心全局样式污染，可以给ReactQuill包裹父容器，用更精确的选择器：

.custom-quill-wrapper .ql-snow .ql-stroke {
  stroke: white;
}

组件中使用：

<div className="custom-quill-wrapper">
  <ReactQuill
    theme="snow"
    value={contentText}
    onChange={setContentText}
    modules={modules}
  />
</div>

CSS Modules写法 #

如果项目使用CSS Modules，可通过:global取消局部作用域：

/* Editor.module.css */
.editorWrapper :global(.ql-snow .ql-stroke) {
  stroke: white;
}

组件中引入使用：

import styles from './Editor.module.css';

// ...

<div className={styles.editorWrapper}>
  <ReactQuill /* 配置项 */ />
</div>

方案2：通过React Quill的Ref进行DOM操作 #

如果必须用JS操作DOM，要确保在组件挂载完成后执行，并且精准获取目标元素：

import { useEffect, useRef, useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

function MyQuillEditor() {
  const quillRef = useRef(null);
  const [contentText, setContentText] = useState('');

  useEffect(() => {
    if (!quillRef.current) return;
    
    // 通过Quill实例获取容器，精准查找内部SVG元素
    const strokeElements = quillRef.current.getEditor().container.querySelectorAll('.ql-stroke');
    strokeElements.forEach(el => {
      // .ql-stroke是SVG元素类，直接修改stroke属性
      el.setAttribute('stroke', 'white');
    });
  }, []);

  return (
    <ReactQuill
      ref={quillRef}
      theme="snow"
      value={contentText}
      onChange={setContentText}
      modules={modules}
    />
  );
}

注意：你之前的document.getElementsByClassName(".ql-stroke")写法错误，参数不需要加.，正确写法是document.getElementsByClassName("ql-stroke")，但通过Quill的ref获取容器更精准，避免影响页面其他元素。

方案3：自定义Quill主题（进阶） #

如果需要大量自定义样式，可以直接修改Quill的Snow主题源码或创建自定义主题，但该方式较为繁琐，适合复杂定制场景。

内容的提问来源于stack exchange，提问作者Giovanni