React + Electron：部門のコンポーネントが適切にレイアウトされていません

debugcn 投稿 Dev

sudo

私は、ほとんどが電子反応ボイラープレートから新たにフォークされたプロジェクトで、依存関係のコンポーネントを使用しようとしています。レイアウトがめちゃくちゃです（下の写真を参照）。試したチャットウィンドウが反応し、チャット・ウィジェットを反応させ、そして反応-DatePickerのを、それは軒並みですので。これが曖昧な場合は申し訳ありませんが、他に何を言うべきかわかりません。本当に基本的なことを見逃していることを願っています。誰か知ってる？

また、electron-react-boilerplateのドキュメントも読みました。私の部下は./package.json提案どおりに入っていますが、私もそれらを入れてみましたが./app/package.json、それは完全に壊れています。マテリアルUIに関するこのSOの回答も、これには役立ちませんでした。

これが私のページコンポーネントの関連部分で、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>
  );
}

結果は、WebサイトにCSSなどがないように見えます。

次のようになります。

sudo

電子反応ボイラープレートに関するこのページは、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";

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]