在React-Toolbox中构建AppBar

Question

我是React-Toolbox的新手，我刚开始试图为我的网站创建一个AppBar。我已经使用官方的React-Toolbox网站，并尝试实施他们的App Bar代码：http://react-toolbox.com/#/components/app_bar，但是当这不起作用时，我会求助于在论坛上查找。这是我的代码：

    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> );

在我的main.jsx中，我使用常规ReactDOM.render在导入栏后呈现Navigation_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'));
});

我得到的是这样的：

换句话说，来自React-Toolbox的App Bar未正确加载（背景颜色正常，它已在main.css中的其他位置定义）。我在浏览器中没有错误或警告，所以我怀疑我必须忘记导入某些东西..

PS：我在官方网站上使用代码获得的结果与我在该图片中获得的结果相同

非常感谢任何帮助！

谢谢！ d。

Answer 1

所以这个问题显然来自造型错误。正如我所说，我既没有在浏览器中也没有在代码中出现任何错误，所以我怀疑错误必须来自在安装用于运行react-toolbox的包期间未正确配置的声明：

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

对于那些可能有同样问题的人，换句话说，在不使用react-toolbox框架的情况下获取打印到浏览器的react-toolbox元素，它与webpack.config.js有关：

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

虽然我们处于相同的主题，但其他人在相关帖子上遇到了类似的问题，但没有设法找到解决方案，只是解决方法：

React Toolbox Use Default CSS Style

然后该线程会将您发送回另一个具有完全相同问题的线程，但仍无法回答：

React-toolbox how to include the styles correctly

作为反应工具箱的新手，我仍然非常热切地指责，但是如果我找到一个明确的答案，我会更新这篇文章。当然，任何帮助，非常感谢！ d。

Answer 2

将AppBar导入为

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