reactjs - 使用react-md和meteor - Thinbug

使用react-md和meteor

时间：2017-01-23 15:55:25

标签： reactjs meteor

我正在尝试在我的流星应用中使用https://react-md.mlaursen.com。我得到了功能但不是风格。

我创建了一个带有drawer组件的简单示例，除

外，所有项目都存在

抽屉看起来很丑：

而不是漂亮：

我怀疑CSS丢失但我不知道如何添加它。 react-md使用SASS，我为此添加了https://atmospherejs.com/fourseven/scss。

菜单的代码是：

import React, { PureComponent } from 'react';
import Drawer from 'react-md/lib/Drawers';
import Button from 'react-md/lib/Buttons/Button';
import Toolbar from 'react-md/lib/Toolbars';
import FontIcon from 'react-md/lib/FontIcons';

export default class SimpleExample extends PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            visible: false,
            position: 'left',
        };

        this.inboxListItems = [{
            key: 'inbox',
            primaryText: 'Inbox',
            leftIcon: <FontIcon>inbox</FontIcon>,
            active: true,
        }, {
            key: 'starred',
            primaryText: 'Starred',
            leftIcon: <FontIcon>star</FontIcon>,
        }, {
            key: 'send-mail',
            primaryText: 'Send mail',
            leftIcon: <FontIcon>send</FontIcon>,
        }, {
            key: 'drafts',
            primaryText: 'Drafts',
            leftIcon: <FontIcon>drafts</FontIcon>,
        }, { key: 'divider', divider: true }, {
            key: 'all-mail',
            primaryText: 'All mail',
            leftIcon: <FontIcon>mail</FontIcon>,
        }, {
            key: 'trash',
            primaryText: 'Trash',
            leftIcon: <FontIcon>delete</FontIcon>,
        }, {
            key: 'spam',
            primaryText: 'Spam',
            leftIcon: <FontIcon>info</FontIcon>,
        }];


        this._toggleLeft = this._toggleLeft.bind(this);
        this._toggleRight = this._toggleRight.bind(this);
        this._closeDrawer = this._closeDrawer.bind(this);
        this._handleToggle = this._handleToggle.bind(this);
    }

    _handleToggle(visible) {
        this.setState({ visible });
    }

    _closeDrawer() {
        this.setState({ visible: false });
    }

    _toggleLeft() {
        this.setState({ visible: !this.state.visible, position: 'left' });
    }

    _toggleRight() {
        this.setState({ visible: !this.state.visible, position: 'right' });
    }

    render() {
        const left = this.state.position === 'left';
        const close = <Button icon onClick={this._closeDrawer}>{left ? 'arrow_back' : 'close'}</Button>;
        const header = (
            <Toolbar
                nav={left ? null : close}
                actions={left ? close : null}
                className="md-divider-border md-divider-border--bottom"
            />
        );
        return (
            <div className="md-grid">
                <Button raised label="Toggle Drawer Left" onClick={this._toggleLeft} />
                <Button raised label="Toggle Drawer Right" onClick={this._toggleRight} />
                <Drawer
                    {...this.state}
                    navItems={this.inboxListItems}
                    onVisibilityToggle={this._handleToggle}
                    type={Drawer.DrawerTypes.TEMPORARY}
                    header={header}
                    style={{ zIndex: 100 }}
                />
            </div>
        );
    }
}

1 个答案:

答案 0 :(得分：3)

您缺少模块的css文件。我认为最好将它们包含在<head>标记中：

<link rel="stylesheet" href="https://unpkg.com/react-md/dist/react-md.indigo-pink.min.css">

文件名采用此格式react-md.${PRIMARY_COLOR}-${ACCENT_COLOR}.min.css。需要更改颜色时请按照它进行操作。

为了获得字体和图标，还要添加

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons" rel="stylesheet">