如何使用CSS为draft-js-plugins/image插件设置样式？

如果默认的插件CSS文件为空，你可以通过以下几种方式自定义图片样式：

1. 直接通过CSS类选择器覆盖 #

先打开浏览器开发者工具，找到插件渲染的图片元素的类名（通常是DraftEditor-img或image-plugin__image这类），然后在全局CSS文件中添加样式：

/* 限制图片最大宽度，避免铺满页面 */
.DraftEditor-img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  /* 可添加其他样式，比如圆角、阴影 */
  border-radius: 4px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

如果使用CSS Modules，需要用:global()包裹类选择器来作用于全局元素：

:global(.DraftEditor-img) {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

2. 自定义图片渲染组件（推荐） #

插件支持通过imageComponent配置项自定义图片组件，完全掌控样式逻辑：

import React from 'react';
import createImagePlugin from '@draft-js-plugins/image';

// 自定义图片组件
const CustomEditorImage = ({ src, alt }) => (
  <img
    src={src}
    alt={alt || '编辑器图片'}
    className="custom-editor-image"
    style={{
      maxWidth: '90%',
      height: 'auto',
      margin: '16px auto',
      display: 'block',
      border: '1px solid #eee',
    }}
  />
);

// 创建插件时传入自定义组件
const imagePlugin = createImagePlugin({
  imageComponent: CustomEditorImage,
});

之后你可以在自己的CSS文件中给.custom-editor-image添加更多样式，完全不受插件默认样式的限制。

3. 检查插件版本 #

如果是旧版本插件，可能默认CSS路径有变化，但上面两种方法已经能解决问题，无需纠结默认CSS文件的问题。

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