React中如何为CKEditor动态生成的HTML元素添加样式？

当然可以，以下是几种实用的实现方式：

1. 全局样式或Scoped样式中的全局规则 #

动态生成的元素最终会挂载到页面DOM中，直接通过全局样式文件（如index.css）编写对应类的样式即可生效。如果使用CSS Modules这类有作用域的样式方案，可以用:global()包裹选择器，突破作用域限制：

/* 全局样式文件 */
.ck-link-widget {
  color: #2563eb;
  text-decoration: underline;
}

/* 组件内的Scoped样式（如CSS Modules） */
:global(.ck-link-widget) {
  border-bottom: 1px solid #2563eb;
}

注意：需要先通过浏览器开发者工具查看CKEditor生成的链接元素实际类名（通常为ck-link-widget，具体以实际DOM为准）。

2. 通过CKEditor配置直接注入内容样式 #

利用CKEditor的contentStyles配置项，在初始化编辑器时直接定义内容的样式规则，让编辑器渲染内容时自动应用：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Link from '@ckeditor/ckeditor5-link/src/link';

export default function EditorComponent() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={{
        plugins: [Link],
        toolbar: ['link'],
        contentStyles: [
          '.ck-link-widget { color: #2563eb; text-decoration: none; border-bottom: 1px dashed currentColor; }'
        ]
      }}
    />
  );
}

3. 自定义链接元素类名后添加样式 #

通过CKEditor的链接插件配置，给生成的链接元素添加自定义类名，再针对该类编写样式：

<CKEditor
  editor={ClassicEditor}
  config={{
    plugins: [Link],
    toolbar: ['link'],
    link: {
      // 给生成的链接元素添加自定义类
      decorate: (linkElement) => {
        linkElement.classList.add('custom-editor-link');
      }
    },
    contentStyles: [
      '.custom-editor-link { color: #dc2626; font-weight: 500; }'
    ]
  }}
/>

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