I'm trying to use components from dependencies in a project mostly freshly forked from electron-react-boilerplate. The layout is messed up (see pic below). Tried react-chat-window, react-chat-widget, and react-datepicker, so it's across the board. Sorry if this is vague, but I don't know what else to say, and I'm hopefully missing something really basic. Anyone know?
I've also read the 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. This SO answer about material-ui didn't help this either.
Here's the relevant part of my page component, pretty much the same as in the example for 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>
);
}
The result looks like a website missing its CSS or something:
Supposed to look like this:
This page on electron-react-boilerplate, which seems to only be findable via Google and not on their site, pointed me to edit app.global.css
. Seems really wrong that I have to do this when the module already imports its own styles, but it worked:
Replaced the contents of app.global.css with:
@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";