Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Fix the migration guide doc page #10257

Merged
merged 2 commits into from
Feb 12, 2018
Merged

[docs] Fix the migration guide doc page #10257

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
557c450
Fix the migration guide doc page
nicolasiensen Feb 12, 2018
383d055
use - over * for consistency
oliviertassinari Feb 12, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
99 changes: 56 additions & 43 deletions docs/src/pages/guides/migration-v0.x.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,51 +26,63 @@ Curious to learn more about it? You can checkout our [Q&A on the v1 version](/di
### Where should I start in a migration?

1. Start by installing the v1.x version of Material-UI along side the v0.x version.
[**Yarn**](https://github.com/yarnpkg/yarn) provides an alias feature to do so:
```sh
yarn add material-ui@latest
yarn add material-ui-next@npm:material-ui@next
```
then
```js
import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from 'material-ui-next/Button'; // v1.x
```
If you can't use Yarn, we also provide a separate package for **NPM**.
However, the package might not be always up to date.
**It's why we encourage people to use a Yarn alias**.
```sh
npm install material-ui@latest
npm install material-ui-next@latest
```
then
```js
import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from 'material-ui-next/Button'; // v1.x
```
[**Yarn**](https://github.com/yarnpkg/yarn) provides an alias feature to do so:

```sh
yarn add material-ui@latest
yarn add material-ui-next@npm:material-ui@next
```

then

```js
import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from 'material-ui-next/Button'; // v1.x
```

If you can't use Yarn, we also provide a separate package for **NPM**.
However, the package might not be always up to date.
**It's why we encourage people to use a Yarn alias**.

```sh
npm install material-ui@latest
npm install material-ui-next@latest
```

then

```js
import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from 'material-ui-next/Button'; // v1.x
```

2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/v1-beta/packages/material-ui-codemod) on your project.
3. `MuiThemeProvider` is optional for v1.x. Still, you are free to use v0.x and v1.x versions of the component at the same time like so:
```jsx
import React from 'react';
import { MuiThemeProvider as NewMuiThemeProvider, createMuiTheme } from 'material-ui-next/styles';
import { MuiThemeProvider } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const themeV1 = createMuiTheme({/* theme for v1 */});
const themeV0 = getMuiTheme({/* theme v0.x */});

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

export default App;
```

```jsx
import React from 'react';
import { MuiThemeProvider as NewMuiThemeProvider, createMuiTheme } from 'material-ui-next/styles';
import { MuiThemeProvider } from 'material-ui';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const themeV1 = createMuiTheme({
/* theme for v1 */
});
const themeV0 = getMuiTheme({
/* theme v0.x */
});

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

export default App;
```

4. After that, you are free to migrate one component instance at the time.

## Components
Expand All @@ -86,6 +98,7 @@ You might see some missing context errors and wrong colors.

You can fix those issues with the following code.
Apply it before all the other imports:

```js
import SvgIcon from 'material-ui-next/SvgIcon';

Expand Down