如何导入React Quill的CSS文件以正确渲染编辑器保存的样式？

• 第一步：引入React Quill官方主题样式
  在项目入口文件（如main.jsx/App.jsx）或者展示公告内容的组件文件顶部，导入对应主题的样式文件：

// 若使用默认的Snow主题，导入以下样式
import 'react-quill/dist/quill.snow.css';
// 若使用Bubble主题，替换为对应样式即可
// import 'react-quill/dist/quill.bubble.css';

• 第二步：给内容展示容器添加ql-editor类名
  Quill所有内置的ql-前缀样式规则，默认都绑定在.ql-editor父选择器下，你当前的展示容器只有view类，无法匹配样式规则，修改代码如下：

<div className="view ql-editor" dangerouslySetInnerHTML={{ __html: data?.content }}></div>

• 可选：自定义局部样式避免全局污染
  如果不想全局引入Quill样式污染其他业务组件，可以单独给展示容器编写自定义样式，按需覆盖需要的规则：

/* 在展示页对应的css文件中添加如下规则 */
.view .ql-align-center {
  text-align: center;
}
.view .ql-align-justify {
  text-align: justify;
}
.view .ql-size-huge {
  font-size: 2.5em;
}
.view .ql-size-large {
  font-size: 1.5em;
}
.view .ql-size-small {
  font-size: 0.75em;
}

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