在React-Toolbox中构建AppBar

Question

我刚开始使用React-Toolbox，我刚刚开始尝试为我的网站创建一个AppBar。我在React-Toolbox官方网站上尝试实现他们的应用条形码：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

作为react-toolbox的新手，我仍然不太清楚到底是什么，所以如果我找到一个明确的答案，我会保持这篇文章的更新。当然，任何帮助都是非常感谢的！D。

Answer 2

将AppBar导入为

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