title: How to extend theme of draft-js-emoji-plugin
body: <p>I need to extend only several CSS rules in <a href="https://github.com/draft-js-plugins/draft-js-plugins" rel="nofollow noreferrer">draft-js-emoji-plugin</a>.</p>
  
  <p>Documented way is to pass <code>theme</code> object to configuration:</p>
  
  <pre><code>const theme = {
    emojiSelectButton: 'someclassname'
  };
  const emojiPlugin = createEmojiPlugin({theme});
  </code></pre>
  
  <p>Unfortunately, this overwrites entire theme classnames instead of adding single one. Based on comments in the code this behavior is by design:</p>
  
  <pre><code>// 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.
  </code></pre>
  
  <p><a href="https://github.com/draft-js-plugins/draft-js-plugins/issues/786" rel="nofollow noreferrer">In related issue</a> developers suggested to import <code>draft-js-emoji-plugin/lib/plugin.css</code> and extend it in code. Anyway, each classname in this file has suffixes (CSS modules) and they might be changed so it's reliable.</p>
  
  <p>I don't know how can I apply several fixes without coping entire theme.</p>