在 React-Toolbox 中构建 AppBar

Question

我是 React-Toolbox 的新手，我刚开始尝试为我的网站创建一个 AppBar。我已经访问了 React-Toolbox 官方网站并尝试实现他们的 App Bar code：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 在导入 Bar 后渲染 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

作为 react-toolbox 的新手，我仍然没有完全理解具体是什么，所以如果我找到一个明确的答案，我会保持更新这篇文章。当然，非常感谢任何帮助！ D.

Answer 2

将 AppBar 导入为

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