如何调整React Quill编辑器的内部显示字体大小

直接给ReactQuill组件设置style={{ fontSize: '20px' }}或者Tailwind的text-lg类没用，因为这些样式只会作用到组件的外层容器，而真正的编辑内容区域是组件内部的.ql-editor元素，必须针对这个元素设置样式。

下面是几种可行的解决方法：

方法一：自定义全局CSS #

在你的全局样式文件（比如globals.css）中添加以下代码：

/* 调整React Quill编辑区域的字体大小 */
.ql-editor {
  font-size: 20px;
}

如果遇到样式优先级被覆盖的情况，可以加上!important（优先通过样式结构提升优先级，尽量少用）：

.ql-editor {
  font-size: 20px !important;
}

方法二：组件内联样式（支持CSS-in-JS的场景） #

在TextEditor组件中添加内联样式，直接针对.ql-editor设置：

"use client"

import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const TextEditor = ({ value, onChange  }) => {
  const toolbarOptions = [
    ['bold', 'italic', 'underline'],     
    ['blockquote', 'code-block'],            
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'header': [ 2, 3, false] }],
    [{ 'script': 'sub' }, { 'script': 'super' }],     
    [{ 'align': [] }],
    ['clean']                                        
  ];

  return (
    <>
      {/* 内联样式针对编辑区域 */}
      <style jsx>{`
        .ql-editor {
          font-size: 20px;
        }
      `}</style>
      <ReactQuill
        theme="snow"
        value={value}
        onChange={onChange}
        modules={{
          toolbar: toolbarOptions
        }}
        className="border-0 px-3 py-2 placeholder-gray-400 text-black bg-white rounded shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
      />
    </>
  );
};

export default TextEditor;

方法三：Tailwind深度选择器（使用Tailwind CSS时） #

如果项目用Tailwind，可用深度选择器:deep()穿透组件样式，修改编辑区域字体：

// 在组件中添加style标签
<style jsx>{`
  :deep(.ql-editor) {
    font-size: theme('fontSize.lg'); /* 也可直接写20px */
  }
`}</style>

以上设置只会改变编辑时的字体大小，不会影响最终输出的HTML文本样式，能解决你遇到的字体不协调问题。

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