1

我是 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 中，我在导入 Bar 后使用常规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.

4

2 回答 2

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 使用默认 CSS 样式

该线程将您发送回另一个具有完全相同问题但仍未得到答复的线程：

React-toolbox 如何正确包含样式

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

于 2017-07-11T13:13:51.527 回答
0

将 AppBar 导入为

import AppBar from 'react-toolbox/lib/app_bar';
于 2017-07-11T10:11:43.537 回答