从 v0.x 迁移到 v1

是的，v1 已经发布！充分利用 2 年的努力成果。

常见问题解答

哇 - API 差别太大了！这是否意味着 1.0 完全不同，我必须重新学习基础知识，并且迁移几乎不可能？

很高兴你问了！答案是否定的。核心概念没有改变。你会注意到 API 提供了更大的灵活性，但这有一个代价 – 更低级别的组件，抽象的复杂性更少。

是什么促成了如此大的改变？

Material UI 是在 4 年前启动的。自那时以来，生态系统已经发展了很多，我们也学到了很多。@nathanmarks 开始了一项雄心勃勃的任务，从头开始重建 Material UI，利用这些知识来解决长期存在的问题。列举一些主要的改变：

使用 CSS-in-JS 的新样式解决方案（更好的自定义能力，更好的性能）
新的主题处理方式（嵌套、自支持等）
得益于 Next.js，文档速度飞快
更好的测试覆盖率（99%+，在所有主流浏览器上运行，视觉回归测试）
完整的服务器端渲染支持
广泛的受支持的浏览器范围

我应该从哪里开始迁移？

首先并排安装 v1.x 版本的 Material UI 和 v0.x 版本。

使用 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

在你的项目上运行迁移助手。
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({
  /* theme for v1.x */
});
const themeV0 = getMuiTheme({
  /* theme for v0.x */
});

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

export default App;

之后，你可以自由地一次迁移一个组件实例。

组件

自动完成

Material UI 没有为解决这个问题提供高级 API。我们鼓励你探索 React 社区构建的解决方案。

未来，我们将研究提供一个简单的组件来解决简单的用例：#9997。

Svg 图标

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

这将应用如下更改

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

 <AddIcon />

扁平按钮

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

-<FlatButton />
+<Button />

凸起按钮

凸起按钮升级路径

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

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

子标题

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

-<Subheader>Sub Heading</Subheader>
+<ListSubheader>Sub Heading</ListSubheader>

切换

-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>Profile</MenuItem>

字体图标

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

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

圆形进度条

-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>