從 v0.x 遷移至 v1

耶，v1 已經發布了！好好利用這兩年的努力成果。

常見問題

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

凸起按鈕

RaisedButton 升級路徑

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