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

IT技术 javascript css reactjs draftjs draft-js-plugins
2021-04-29 15:49:25

我只需要在Draft-js-emoji-plugin 中扩展几个 CSS 规则。

记录的方法是将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.

在相关问题中，开发人员建议draft-js-emoji-plugin/lib/plugin.css在代码中导入和扩展它。无论如何，这个文件中的每个类名都有后缀（CSS module），它们可能会被更改，因此它是可靠的。

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

2个回答

更好的方法是从 '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
})

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

有这样的灵活性很好，但重写所有类确实很痛苦。我所做的是将所有类名提取到一个对象中，然后styled-components将 classNames 插入到 css 定义中。通过这种方式，您可以扩展任何您想要的内容，而不必担心为后缀类设置样式（并且在它们碰撞版本时会发生变化）在这个要点中，我刚刚复制了 v2.1.1 中的所有样式draft-js-emoji-plugin

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

const StyledEmojiSelectWrapper = 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: 1px solid #ddd;
    border-radius: 1.5em;
    cursor: pointer;
  }
  .${theme.emojiSelectButton}:focus, .${theme.emojiSelectButtonPressed}:focus {
    outline: 0;
    /* reset for :focus */
  }
  // ...
`

export const GlobalStyleForEmojiSelect = createGlobalStyle`
  .${theme.emoji} {
    background-position: center;
    //...
  }

export default (props) => (
  <StyledEmojiSelectWrapper>
    <GlobalStyleForEmojiSelect />
    <EmojiSelect /> // lib button component
  </StyledEmojiSelectWrapper>
)
其它你可能感兴趣的问题
上一篇@material-ui/core 和@types/material-ui 的关系是什么？ 下一篇如何使用 jest 测试 redux-saga 的所有效果