react-redux - 找不到模块 : Can't resolve 'material-ui/FlatButton

Question

我收到以下错误:

/src/Components/Home/post.jsx Module not found: Can't resolve 'material-ui/FlatButton' in /Users/apple/Documents/dev/source/sm-ui/servicemonster-ui

我尝试安装 material-ui但它失败了。我怎样才能解决这个问题？
post.jsx :

import React from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';

export default class CardExampleControlled extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            expanded: false,
        };
    }

    handleExpandChange = (expanded) => {
        this.setState({expanded: expanded});
    };

    handleToggle = (event, toggle) => {
        this.setState({expanded: toggle});
    };

    handleExpand = () => {
        this.setState({expanded: true});
    };

    handleReduce = () => {
        this.setState({expanded: false});
    };

    render() {
        return (
            <Card expanded={this.state.expanded} onExpandChange={this.handleExpandChange}>
                <CardHeader
                    title="URL Avatar"
                    subtitle="Subtitle"
                    avatar="images/ok-128.jpg"
                    actAsExpander={true}
                    showExpandableButton={true}
                />
                <CardText>
                    <Toggle
                        toggled={this.state.expanded}
                        onToggle={this.handleToggle}
                        labelPosition="right"
                        label="This toggle controls the expanded state of the component."
                    />
                </CardText>
                <CardMedia
                    expandable={true}
                    overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
                >
                    <img src="images/nature-600-337.jpg" alt="" />
                </CardMedia>
                <CardTitle title="Card title" subtitle="Card subtitle" expandable={true} />
                <CardText expandable={true}>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
                    Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
                    Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
                </CardText>
                <CardActions>
                    <FlatButton label="Expand" onClick={this.handleExpand} />
                    <FlatButton label="Reduce" onClick={this.handleReduce} />
                </CardActions>
            </Card>
        );
    }
}

//error:./src/Components/Home/post.jsx Module not found: Can't resolve 'material-ui/FlatButton' in '/Users/apple/Documents/dev/source/sm-ui/servicemonster-ui/src/Components/Home'

home.jsx :

import React, {Component} from 'react';
import { connect } from 'react-redux';

import EditLocation from 'material-ui-icons/EditLocation';
import {Input, IconButton, } from 'material-ui';

import { Services, Search, } from './';
import {CardExampleControlled} from './post.jsx'

const Icon = require('../../assets/icon.svg');

class home extends Component {
    render() {
        // const { services, fetched, fetching, error } = this.props;
        return (
            <div className="home-page">
                <div className="home">
                    <img className="logo" src={Icon} alt="Service Monster" />
                    <Search />
                    <div className="flex flex-row flex-center">
                        <IconButton className="" color="contrast" aria-label="Menu">
                            <EditLocation />
                        </IconButton>
                        <Input
                            defaultValue="india"
                            className="location"
                            inputProps={{
                                'aria-label': 'location',
                            }}
                        />
                    </div>
                </div>
                <Services />
            </div>
        );
    }
}

const mapStateToProps = (store) => {
    return {
        services: store.services.data, 
        fetched: store.services.fetched, 
        fetching: store.services.fetching, 
        error: store.services.error
    }
}

const Home = connect(mapStateToProps)(home);

export { Home };

index.js :

import { Home, } from './Home.jsx';
import { Services, } from './Services.jsx';
import { Menus, } from './Menu.jsx';
import { Search } from './Search';
import { CardExampleControlled } from './post.jsx';

export { Home, Menus, Services, Search, CardExampleControlled };

Answer 1

material-ui 版本不匹配。
从您的代码中，FlatButton 组件属于 v0.20 版本，并且您可能已经安装了没有该组件的 v1.0.0-beta.xx。

所以你需要安装npm install material-ui对于当前稳定的版本。而不是 npm install material-ui@next
我在尝试 material-ui 时遇到了同样的问题。
感觉有点棘手，因为它没有明确记录，并且 v0.20 和 v1.0 之间存在差异。 v0.20 中没有 Button 组件，例如看 http://www.material-ui.com/#/components/raised-button

但我在 https://github.com/mui-org/material-ui/tree/master 上找到了解决方案(对于 v0.20.0 版本)，标题为 用法

您将需要使用标签 <MuiThemeProvider> 包装您的“应用程序”(根 react 组件)

我用 react-create-app 创建了测试应用程序脚本，并更改​​了文件 App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
          <RaisedButton label="Primary" primary={true} />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

瞧，现在它可以工作了:-)