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

Question

我正在尝试在一个项目中使用依赖项中的组件，该项目主要是从electron-react-boilerplate新分叉的。布局混乱（见下图）。尝试了react-chat-window、react-chat-widget和react-datepicker，所以它是全面的。对不起，如果这含糊不清，但我不知道还能说什么，我希望错过一些非常基本的东西。有人知道吗？

我还阅读了electron-react-boilerplate 文档。我的部门./package.json按照建议在其中，但我也尝试将它们放入./app/package.json，这完全破坏了它。This SO answer about 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 或其他东西的网站：

应该看起来像这样：

标签： reactjselectronelectron-react-boilerplate

Answer 1

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