Передача внешнего CSS компоненту Prop

Question

Я работаю с библиотекой DraftJS и ее плагином Mention и пытаюсь передать внешний файл 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;