React + Electron: компоненты из deps не выкладываются должным образом

Question

Я пытаюсь использовать компоненты из зависимостей в проекте, в основном недавно созданном из electronic-react-cabinplate . Макет перепутан (см. Pi c ниже). Пробовал response-chat-window , react-chat-widget и response-datepicker , так что это повсеместно. Извините, если это расплывчато, но я не знаю, что еще сказать, и, надеюсь, мне не хватает чего-то действительно основного c. Кто-нибудь знает?

Я также читал документы electronic-react-template . Мои зависимости находятся в ./package.json, как было предложено, но я также попытался поместить их в ./app/package.json, что полностью сломало его. Этот SO-ответ о material-ui здесь тоже не помог.

Вот соответствующая часть моего компонента страницы, почти такая же, как в примере для response-chat-window:

import React from 'react';
const electron = require("electron")
import {Launcher} from 'react-chat-window'

class TextRoom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      messageList: []
    };
  }

  async _onMessageWasSent(message) {
    this.setState({
      messageList: [...this.state.messageList, message]
    })
    // send message to server...
  }

  render() {
    return (
      <div style={{}}>
        <Launcher
        agentProfile={{
          teamName: 'react-chat-window',
          imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
        }}
        onMessageWasSent={this._onMessageWasSent.bind(this)}
        messageList={this.state.messageList}
        showEmoji
      />
      </div>
    );
  }
}

class RoomDialog extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
      <TextRoom />
      </div>
    );
  }
}

export default function Room(): JSX.Element {
  return (
    <div style={{backgroundColor: "black"}}>
      <RoomDialog />
    </div>
  );
}

Результат выглядит так, будто на веб-сайте отсутствует CSS или что-то в этом роде:

Supposed to look like this:

хорошо

Answer 1

Эта страница на электронно-реактивном шаблоне, которую, кажется, можно найти только через Google, а не на их сайте, указала мне на редактирование app.global.css. Кажется действительно неправильным, что я должен делать это, когда модуль уже импортирует свои собственные стили, но это сработало:

Заменил содержимое app.global. css на:

@import "~react-chat-window/lib/styles/chat-window.css";
@import "~react-chat-window/lib/styles/launcher.css";
@import "~react-chat-window/lib/styles/emojiPicker.css";
@import "~react-chat-window/lib/styles/header.css";
@import "~react-chat-window/lib/styles/message.css";
@import "~react-chat-window/lib/styles/popup-window.css";
@import "~react-chat-window/lib/styles/user-input.css";