react-draft-wysiwyg编辑器部分文本样式（粗体、斜体）不显示问题

符合仅粗体、斜体失效，下划线、删除线正常的现象，常见原因及对应修复方案如下：

可能原因 #

• 全局CSS样式重置覆盖了默认标签样式：项目中引入的reset.css、normalize.css或自定义全局样式，将<strong>、<em>标签的默认样式设置为font-weight: normal、font-style: normal，而下划线、删除线依赖的text-decoration属性未被重置，因此不受影响
• 富文本内容自定义渲染逻辑缺失样式映射：将Draft.js的raw内容转换为HTML渲染时，未给BOLD、ITALIC类型的内联样式配置对应的标签或CSS属性，导致样式丢失
• 依赖包版本更新导致默认样式丢失：近期升级了react-draft-wysiwyg、draft-js相关依赖，新版本移除了编辑器内置的默认内联样式
• 当前使用的字体无粗体、斜体变体：项目引入的自定义字体仅包含常规字重，没有对应的粗体、斜体字体文件，导致样式设置后无法渲染

修复方案 #

• 排查全局样式冲突：打开浏览器开发者工具，选中设置了粗体/斜体的文本元素，查看样式面板是否存在被覆盖的font-weight、font-style属性，找到对应的全局样式规则后，新增编辑器作用域下的样式兜底：

/* 编辑器内部样式兜底 */
.rdw-editor-wrapper strong, .rdw-editor-content strong {
  font-weight: bold !important;
}
.rdw-editor-wrapper em, .rdw-editor-content em {
  font-style: italic !important;
}
/* 富文本渲染区域样式兜底 */
.richtext-display strong {
  font-weight: bold !important;
}
.richtext-display em {
  font-style: italic !important;
}

• 校验内容转换逻辑：如果使用draft-convert等工具做内容格式转换，检查内联样式映射配置是否完整，示例正确配置如下：

import { convertToHTML } from 'draft-convert';

const html = convertToHTML({
  inlineStyles: {
    BOLD: (node) => <strong>{node}</strong>,
    ITALIC: (node) => <em>{node}</em>,
    UNDERLINE: (node) => <u>{node}</u>,
    STRIKETHROUGH: (node) => <del>{node}</del>
  }
})(contentState);

• 回滚或补全依赖样式：确认近期是否升级过相关依赖，可先回退到之前正常的版本验证，也可手动引入react-draft-wysiwyg的默认样式文件：

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

• 补充字体变体：如果是自定义字体的问题，引入对应字体的粗体、斜体字重文件，或修改富文本区域的默认字体为系统默认兼容字体。

内容的提问来源于stack exchange，提问作者Prakash Reddy Potlapadu