将外部CSS传递到组件属性

Question

我正在使用DraftJS library and its Mention plugin，并且尝试将外部CSS文件传递到其theme配置属性以覆盖所提供的样式，但似乎没有在外部捕获CSS文件参考，我不确定如何调试断开连接的来源。我想到的两个没有答案的问题是：

1）我应该在开发人员工具的css标签中看到Network文件，还是因为它是通过React加载的，所以不会出现？

2）当我在控制台上将变量集设置为css文件位置时，它将返回{}。这可能就是为什么theme的道具没有任何东西回来的原因吗？ （请参见屏幕截图）

完整代码：

import React, { Component } from 'react';
import {EditorState, RichUtils, getDefaultKeyBinding, KeyBindingUtil, convertToRaw} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createListDepthPlugin from 'draft-js-list-depth-plugin';
import createAutoListPlugin from 'draft-js-autolist-plugin';
import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin';
import mentions from './mentions';

//CSS Injection
import mentionsStyles from './mentionsStyles.css';

//Package Configuration
const {hasCommandModifier} = KeyBindingUtil;
const listDepthPlugin = createListDepthPlugin({maxDepth: 5});
const autoListPlugin = createAutoListPlugin();

//import suggestionStyles from './suggestion.css';

//WIP - Needs to be modularized
const positionSuggestions = ({ state, props }) => {
  let transform;
  let transition;

  if (state.isActive && props.suggestions.length > 0) {
    transform = 'scaleY(1)';
    transition = 'all 0.25s cubic-bezier(.3,1.2,.2,1)';
  } else if (state.isActive) {
    transform = 'scaleY(0)';
    transition = 'all 0.25s cubic-bezier(.3,1,.2,1)';
  }

  return {
    transform,
    transition,
  };
};

const Entry = (props) => {
  const {
    mention,
    theme,
    searchValue, // eslint-disable-line no-unused-vars
    isFocused, // eslint-disable-line no-unused-vars
    ...parentProps
  } = props;

  return (
    <div {...parentProps}>
      <div className={theme.mentionSuggestionsEntryContainer}>
        <div className={theme.mentionSuggestionsEntryContainerLeft}>
          <img
            src={mention.avatar}
            className={theme.mentionSuggestionsEntryAvatar}
            role="presentation"
          />
        </div>

        <div className={theme.mentionSuggestionsEntryContainerRight}>
          <div className={theme.mentionSuggestionsEntryText}>
            {mention.name}
          </div>

          <div className={theme.mentionSuggestionsEntryTitle}>
            {mention.title}
          </div>
        </div>
      </div>
    </div>
  );
};

class Form extends Component {
    constructor(props) {
        super(props);

        this.mentionPlugin = createMentionPlugin({
          theme: mentionsStyles,
          positionSuggestions,
          mentionTrigger: '#',
          mentionPrefix: '#',
          supportWhitespace: true
        });

        this.state = {
            editorState: EditorState.createEmpty(),
            suggestions: mentions
        };
        console.log(mentions);
    }

    onChange = (editorState) => {
      this.setState({ editorState });
    };

    onSearchChange = ({ value }) => {
      this.setState({
        suggestions: defaultSuggestionsFilter(value, mentions),
      });
    };
    onAddMention = () => {
      // get the mention object selected
    }

    render() {
      const { MentionSuggestions } = this.mentionPlugin;

      const plugins = [
        autoListPlugin,
        listDepthPlugin,
        this.mentionPlugin
      ];

      console.log(this.mentionPlugin);
      console.log(mentionsStyles)

        return (
          <div>
            <div>
                <div onClick={this.focus}>
                    <Editor 
                        editorState={this.state.editorState} 
                        handleKeyCommand={this.handleKeyCommand}
                        keyBindingFn={this.myKeyBindingFn}
                        onChange={this.onChange} 
                        onTab={this.onTab}
                        spellCheck={true}
                        plugins={plugins}
                    />
                    <MentionSuggestions
                      onSearchChange={this.onSearchChange}
                      suggestions={this.state.suggestions}
                      onAddMention={this.onAddMention}
                      entryComponent={Entry}
                    />
                </div>
            </div>
            <div>
              {
                JSON.stringify(
                  convertToRaw(this.state.editorState.getCurrentContent()),
                  null,
                  2
                )
              }
            </div>
          </div>
        );
  }
}

export default Form;