Question

我收到以下错误：

/src/Components/Home/post.jsx 未找到模块：无法解析/ Users / apple / Documents / dev / source / sm-ui / servicemonster-ui中的'material-ui / FlatButton'

我尝试安装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>
        );
    }
}

//错误：./ src / Components / Home / post.jsx找不到模块：无法解析 'material-ui / FlatButton'中 '/用户/苹果/文件的/ dev /源极/ SM-UI / servicemonster-UI / SRC /组件/首页'

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

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

因此您需要为当前稳定版本安装npm install material-ui。而不是npm install material-ui@next

我在尝试使用材料时遇到了同样的问题它感觉有点棘手，因为它没有明确记录，并且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-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;

瞧，现在它起作用了： - ）

Answer 2

如果您安装了非{alpha}版本的Material-UI，则应该可以通过以下方式更改导入行来解决此警告：

import FlatButton from 'material-ui/FlatButton';

到

import { FlatButton } from 'material-ui';

找不到模块：无法解析'material-ui / FlatButton

2 个答案: