Building an AppBar in React-Toolbox

Question

I'm new to to React-Toolbox and I've just started it out by trying to create an AppBar for my website. I've gone on the official React-Toolbox website and tried to implement their App Bar code: http://react-toolbox.com/#/components/app_bar , but when that did not work I resorted to looking on forums. Here is my code :

    import React from 'react';
    import {ButtonStyle, LabelStyle, MainTitle, TitleColor, B_Nav_style} from './styles.jsx';
    import {EventHandle} from './Event_handler.jsx';

    import { AppBar, Checkbox, IconButton } from 'react-toolbox';
    import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';



    export const Navigation_Bar = () => (
    <ThemeProvider>
     <Layout>
        <Panel>
            <AppBar leftIcon='menu' />
                <div style={{ flex: 1, overflowY: 'auto', padding: '1.8rem' }}>
                    <h1>Main Content</h1>
                    <p>Main content goes here.</p>
                    <Checkbox label='Pin drawer'  />
                    <Checkbox label='Show sidebar' />
                </div>
        </Panel>
    </Layout>
</ThemeProvider> );

In my main.jsx I use a regular ReactDOM.render to render the Navigation_Bar after importing the Bar:

Meteor.startup(() => {
  ReactDOM.render(
    <Navigation_Bar/>, // when referencing a jsx element in reactDOM.render, make sure the first letter is capitalized so that it is not 
    //interpreted as html by jsx
  document.getElementById('main_body'));
});

And what I get is something like this :

In other words, the App Bar from React-Toolbox is not loading correctly (the background color is normal, it was defined somewhere else in the main.css). I have no errors or warnings in the browser so I suspect I must have forgotten to import something..

PS: the result I got from using the code on the official website was the same as the one I got in that picture

Any help is much appreciated!

Thanks! D.

Answer 1

So the problem is coming from a styling error apparently. As I said, I do not get any errors neither in the browser nor in the code so I suspect the error must come from a declaration that was not configured correctly during the installation of the packs used to run react-toolbox :

http://react-toolbox.com/#/install

For those that may have the same problem, in other words getting react-toolbox elements that print to browser without using react-toolbox framework, it has something to do with the webpack.config.js :

https://github.com/react-toolbox/react-toolbox/issues/1204

While we are on the same topic, some other person had a similar problem on a related post, but did not manage to find a solution, just a workaround:

React Toolbox Use Default CSS Style

And that thread sends you back to another thread with the exact same problem but still unanswered:

React-toolbox how to include the styles correctly

Being new to react-toolbox, I still havn't quite put my finger on what excatly though yet so I'll keep this post updated if I find a clear answer. Any help is of course, much appreciated! D.

Answer 2

import AppBar as

import AppBar from 'react-toolbox/lib/app_bar';