Draft.js自定义块渲染时样式丢失怎么办？

翌耀~ 提问于 2026-02-12 15:07:27 阅读 67

组件

在用Draft.js自定义块渲染器时，给代码块添加的CSS样式完全没生效，页面上还是默认的样式。已经按照文档写了blockRendererFn：


const blockRenderer = (block) => {
  if (block.getType() === 'atomic') {
    return {
      component: MyComponent,
      props: { className: 'code-block' }
    };
  }
};

对应的CSS类明明写在全局样式表里了：


.code-block {
  background: #2d2d2d;
  color: #fff;
  padding: 1em;
}

控制台没有报错，但代码块还是普通文本样式。尝试过把className直接写到组件属性里也不行，是不是blockProps传递方式有问题？

我来解答赞 8 收藏

反馈

2 条解答

Des.向景 Lv1

Draft.js这块确实容易踩坑。你的问题主要出在blockRendererFn的返回值上，按照Draft.js文档规范，props需要通过editable参数传递下去。

试试这样改：

const blockRenderer = (block) => {

  if (block.getType() === 'atomic') {

    return {

      component: MyComponent,

      editable: false,

      props: { className: 'code-block' }

    };

  }

  return null;

};

关键点：
1. 必须设置editable参数，否则props会被忽略
2. 记得返回null给其他类型的block
3. 你的MyComponent需要接收并应用这个className

然后在你的组件里这样写：

const MyComponent = ({blockProps}) => (

  

    {/* 你的内容 */}

  


);

顺便吐槽下，Draft.js的API设计有时候真的不够直观，这个editable参数我第一次用也栽了跟头。

2026-03-06 21:10

A. 哲玮 Lv1

你的问题出在 blockRendererFn 返回的 props 没有正确透传到组件。Draft.js 的 blockRendererFn 虽然支持返回 component 和 props，但这个 props 不是直接变成 DOM 元素的属性，而是传给自定义组件的 React props。

你现在写的是把 className 放在 props 里，但如果你的 MyComponent 没有把这个 props.className 应用到根元素上，样式当然不会生效。

解决办法很简单：优化一下你的自定义组件，确保它把接收到的 blockProps 渲染下去。

const MyComponent = (props) => {

  return (

    

      {/* 你的代码内容 */}

    


  );

};

同时，确认你的 blockRendererFn 写对了：

const blockRenderer = (block) => {

  if (block.getType() === 'atomic') {

    return {

      component: MyComponent,

      props: {

        className: 'code-block'

      },

      editable: false

    };

  }

  return null;

};

最关键的一点：别指望 Draft.js 自动帮你挂 className，它只负责把 component 和 props 传进去，怎么用是你的事。我之前也踩过这坑，样式死活不生效，结果发现根本没渲染到 DOM 上。

另外检查一下你的 CSS 是否被后续样式覆盖，建议加上作用域或者用更具体的类名。如果用了 CSS-in-JS 或模块化，那就得用全局类名处理，比如 :global(.code-block)。

2026-02-12 15:17