跳转到内容
编辑此页面

从 v0.x 版本迁移到 v1 版本

是的，v1 版本已经发布了！ 我们用了两年的努力达到了这个里程碑。

常问问题

哇—— API 看起来完全不一样！ Does that mean 1.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible?

I'm glad you asked! 答案是不。 答案是不。 The core concepts haven't changed. The core concepts haven't changed. You will notice that the API provides more flexibility, but this has a cost – lower-level components that abstract less complexity.

到底是什么带来了如此巨大的改变呢？

Material UI 这个项目是从4 年前开始的。 在此期间，整个个生态系统发展了很多，我们也学到了很多东西。 @nathanmarks 启动了一项雄心勃勃的任务，将 Material UI 重新启动，并利用我们学到的知识，来解决一些长期存在的问题。 譬如这些主要的变化： 譬如这些主要的变化：

我应该从哪里开始迁移？

  1. 首先，和 v0.x 版本一起，安装 v1.x 版本的 Material UI。

用 yarn：

yarn add material-ui
  yarn add @material-ui/core

或者用 npm：

npm install material-ui
  npm install @material-ui/core

然后

import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from '@material-ui/core/Button'; // v1.x
  1. 在您的项目上运行 迁移帮助程序。
  2. MuiThemeProvider 对于 v1.x.版本是可选的，但如果您有自定义主题，则可以同时使用该组件的 v0.x 和 v1.x 版本，如下所示：
import * as React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
import { MuiThemeProvider as V0MuiThemeProvider } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const theme = createMuiTheme({
  /* v1.x 版本的主题 */
});
const themeV0 = getMuiTheme({
  /* v0.x 版本的主题 */
});

function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <V0MuiThemeProvider muiTheme={themeV0}>{/*Components*/}</V0MuiThemeProvider>
    </MuiThemeProvider>
  );
}

export default App;
  1. 之后，您可以自由地一次迁移一个组件实例。

Components 组件

Autocomplete 自动补全组件

Material UI doesn't provide a high-level API for solving this problem. Material UI doesn't provide a high-level API for solving this problem. MUI doesn't provide a high-level API for solving this problem. Material UI doesn't provide a high-level API for solving this problem. You're encouraged you to explore the solutions the React community has built.

在你的项目上运行 迁移助手

Svg 图标

未来，我们打算提供一个简单的组件来解决这个用例：#9997。

这将应用如下更改：

-import AddIcon from 'material-ui/svg-icons/Add';
+import AddIcon from '@material-ui/icons/Add';

<AddIcon />

Flat Button（扁平按钮）

-import FlatButton from 'material-ui/FlatButton';
+import Button from '@material-ui/core/Button';

-<FlatButton />
+<Button />

Raised Button（凸起的按钮）

凸起按钮的升级的路径：

-import RaisedButton from 'material-ui/RaisedButton';
+import Button from '@material-ui/core/Button';

-<RaisedButton />
+<Button variant="contained" />

Subheader（副标题)

-import Subheader from 'material-ui/Subheader';
+import ListSubheader from '@material-ui/core/ListSubheader';

-<Subheader>副标题</Subheader>
+<ListSubheader>副标题</ListSubheader>

Toggle（切换）

-import Toggle from 'material-ui/Toggle';
+import Switch from '@material-ui/core/Switch';

-<Toggle
-  toggled={this.state.checkedA}
-  onToggle={this.handleToggle}
-/>
+<Switch
+  checked={this.state.checkedA}
+  onChange={this.handleSwitch}
+/>

-import MenuItem from 'material-ui/MenuItem';
+import MenuItem from '@material-ui/core/MenuItem';

-<MenuItem primaryText="Profile" />
+<MenuItem>个人资料</MenuItem>

Font Icon（字体图标）

-import FontIcon from 'material-ui/FontIcon';
+import Icon from '@material-ui/core/Icon';

-<FontIcon>home</FontIcon>
+<Icon>home</Icon>

Circular Progress（环状进度条）

-import CircularProgress from 'material-ui/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';

-<CircularProgress mode="indeterminate" />
+<CircularProgress variant="indeterminate" />

-import DropDownMenu from 'material-ui/DropDownMenu';
+import Select from '@material-ui/core/Select';

-<DropDownMenu></DropDownMenu>
+<Select value={this.state.value}></Select>

未完待续...

您是否已成功迁移您的应用，并助社区一臂之力？ 要完成本迁移指南 #7195，还存在一个未决问题。 我们欢迎任何 pull request。