React + Electron：来自部门的组件布局不正确

Question

我正在尝试在项目中使用依赖项中的组件，该项目主要是从 electron-react-boilerplate. The layout is messed up (see pic below). Tried react-chat-window, react-chat-widget, and react-datepicker 中分叉出来的，所以它是全面的。对不起，如果这含糊不清，但我不知道还能说什么，我希望我遗漏了一些非常基本的东西。有人知道吗？

我也读过 electron-react-boilerplate docs. My deps are in ./package.json as suggested, but I also tried putting them into ./app/package.json, which breaks it entirely. 关于 material-ui 也没有帮助。

这是我的页面组件的相关部分，与 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

electron-react-boilerplate 上的

This page，这似乎只能通过 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";

React + Electron：来自部门的组件布局不正确

React + Electron: components from deps aren't laying out properly

reactjs

electron

electron-react-boilerplate