如何扩展 Draft-js-emoji-plugin 的主题

我只需要扩展几个 CSS 规则草稿 js-emoji-插件 https://github.com/draft-js-plugins/draft-js-plugins.

记录的方式是通过theme对象配置：

const theme = {
  emojiSelectButton: 'someclassname'
};
const emojiPlugin = createEmojiPlugin({theme});

不幸的是，这会覆盖整个主题类名，而不是添加单个主题类名。根据代码中的注释，此行为是设计使然：

// Styles are overwritten instead of merged as merging causes a lot of confusion.
//
// Why? Because when merging a developer needs to know all of the underlying
// styles which needs a deep dive into the code. Merging also makes it prone to
// errors when upgrading as basically every styling change would become a major
// breaking change. 1px of an increased padding can break a whole layout.

在相关问题中 https://github.com/draft-js-plugins/draft-js-plugins/issues/786开发者建议导入draft-js-emoji-plugin/lib/plugin.css并在代码中扩展它。无论如何，这个文件中的每个类名都有后缀（CSS 模块），并且它们可能会被更改，因此它是可靠的。

我不知道如何在不应对整个主题的情况下应用多个修复程序。

更好的方法是从 'draft-js-emoji-plugin' 导入 {defaultTheme} ，然后按如下方式扩展它：

import emojiPlugin, { defaultTheme } from 'draft-js-emoji-plugin';

// say i need to extend the emojiSelectPopover's css then.

defaultTheme.emojiSelectPopover = defaultTheme.emojiSelectPopover + " own-class"

// own class is a class with your required enhanced css. this helps in preserving the old css.

const emojiPlugin  = createEmojiPlugin({
    theme : defaultTheme
})

因此可以随意使用该插件。