如何修改Draft.js列表项目符号的字体大小，使其匹配对应文本块的字体大小

问题核心原因：Draft.js默认使用原生<li>标签的list-style渲染项目符号，如果你仅给<li>内部的文本节点设置了字体大小，未同步给<li>根节点设置对应样式，就会出现项目符号继承了上层默认字体大小、和内部文本大小不一致的问题。

方案1：同步列表根节点字体样式 #

在blockRendererFn自定义块渲染逻辑中，读取当前列表块内的文本样式，同步设置到<li>根节点即可：

import { Editor, EditorState } from 'draft-js';
import { useState } from 'react';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const blockRendererFn = (contentBlock) => {
    const blockType = contentBlock.getType();
    // 匹配有序/无序列表块
    if (blockType === 'unordered-list-item' || blockType === 'ordered-list-item') {
      // 取块内第一个字符的字体大小作为列表块基准样式，也可根据业务逻辑取段落主样式
      const firstInlineStyle = contentBlock.getInlineStyleAt(0);
      const blockFontSize = firstInlineStyle.get('fontSize') || '16px';
      const blockFontColor = firstInlineStyle.get('color') || '#000';

      return {
        component: (props) => (
          <li 
            style={{ 
              fontSize: blockFontSize,
              color: blockFontColor 
            }} 
            {...props} 
          />
        ),
        editable: true
      }
    }
  }

  return <Editor editorState={editorState} onChange={setEditorState} blockRendererFn={blockRendererFn} />
}

方案2：自定义伪元素实现项目符号（兼容性更好） #

如果原生list-style在不同浏览器的渲染效果不符合预期，可以关闭默认项目符号，用CSS伪元素自定义渲染，完全和当前块的样式绑定：

1. 先添加全局样式：

/* 关闭默认列表符号 */
.custom-list-item {
  list-style: none;
  position: relative;
  padding-left: 1.6em;
}
/* 无序列表符号 */
.custom-list-item--unordered::before {
  content: "•";
  position: absolute;
  left: 0;
  /* 继承当前li的字体样式，自动和文本同步 */
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
/* 有序列表符号 */
.custom-list-item--ordered {
  counter-increment: ordered-list-counter;
}
.custom-list-item--ordered::before {
  content: counter(ordered-list-counter) ".";
  position: absolute;
  left: 0;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

2. 修改渲染逻辑，给列表块添加对应类名：

const blockRendererFn = (contentBlock) => {
  const blockType = contentBlock.getType();
  if (blockType === 'unordered-list-item' || blockType === 'ordered-list-item') {
    const firstInlineStyle = contentBlock.getInlineStyleAt(0);
    const blockFontSize = firstInlineStyle.get('fontSize') || '16px';
    const blockFontColor = firstInlineStyle.get('color') || '#000';
    const listType = blockType === 'unordered-list-item' ? 'unordered' : 'ordered';

    return {
      component: (props) => (
        <li 
          className={`custom-list-item custom-list-item--${listType}`}
          style={{ fontSize: blockFontSize, color: blockFontColor }}
          {...props}
        />
      ),
      editable: true
    }
  }
}

如果需要支持单独自定义项目符号的样式，只需要将项目符号的大小、颜色等配置存在block的data属性中，渲染时优先读取block data中的配置即可。

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