React + Electron: deps中的组件布局不正确

Question

我正在尝试在一个主要是从electron-react-boilerplate派生的项目中使用依赖项中的组件。布局一团糟(见下图)。我尝试过react-chat-window、react-chat-widget和react-datepicker，所以它是全面的。抱歉，如果这是含糊的，但我不知道还能说什么，我希望我错过了一些非常基本的东西。有人知道吗？

我也读过electron-react-boilerplate docs。正如建议的那样，我的副手在./package.json中，但我也尝试将它们放入./app/package.json中，这完全破坏了它。关于material-ui的This SO answer对此也没有帮助。

下面是我的页面组件的相关部分，与react-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之类的东西：

​

应该是这样的：

​

​

Answer 1

电子反应样板上的This page，似乎只能通过谷歌找到，而不是在他们的网站上，指示我编辑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";