How To Extend Theme Of Draft-js-emoji-plugin

I need to extend only several CSS rules in draft-js-emoji-plugin. Documented way is to pass theme object to configuration: const theme = { emojiSelectButton: 'someclassname' }; c

Solution 1:

a better method would be to import {defaultTheme} from 'draft-js-emoji-plugin' and then extend it as below:

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
})

and hence use the plugin as you like.

Solution 2:

It's nice to have such flexibility, but it really is a pain to rewrite all classes. What I did was to extract all class names to an object, and with styled-components, interpolated the classNames to the css definition. This way you can extend whatever you want, without worrying about styling a suffixed class (and it changing when they bump a version) In this gist I've just copied all styles in v2.1.1 of draft-js-emoji-plugin

consttheme= {
  emoji:'my-emoji',
  emojiSuggestions:'my-emojiSuggestions',
  emojiSuggestionsEntry:'my-emojiSuggestionsEntry',
  //...emojiSelect:'emojiSelect',
  emojiSelectButton:'emojiSelectButton',
  emojiSelectButtonPressed:'emojiSelectButtonPressed',
}

constStyledEmojiSelectWrapper=styled.div`.${theme.emojiSelect} {
      display:inline-block;
    }
  .${theme.emojiSelectButton},.${theme.emojiSelectButtonPressed} {
    margin:0;padding:0;width:2.5em;height:1.5em;box-sizing:border-box;line-height:1.2em;font-size:1.5em;color:#888;background:#fff;border:1pxsolid#ddd;border-radius:1.5em;cursor:pointer;
  }
  .${theme.emojiSelectButton}:focus,.${theme.emojiSelectButtonPressed}:focus {
    outline:0;/*resetfor:focus*/
  }
  //...`exportconstGlobalStyleForEmojiSelect=createGlobalStyle`.${theme.emoji} {
    background-position:center;//...
  }

exportdefault(props)=>(<StyledEmojiSelectWrapper><GlobalStyleForEmojiSelect/><EmojiSelect/>//libbuttoncomponent</StyledEmojiSelectWrapper>)