From 0950fce3eb5e2d664321f684942065a301472f86 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 18 Oct 2021 17:51:31 -0300
Subject: [PATCH 1/2] Change https://material-ui.com for https://v4.mui.com

---
 README.md                                     |  4 +-
 UPGRADE.md                                    |  2 +-
 docs/Admin.md                                 |  4 +-
 docs/Buttons.md                               | 16 ++++----
 docs/CreateEdit.md                            | 10 ++---
 docs/Fields.md                                | 18 ++++-----
 docs/Inputs.md                                | 40 +++++++++----------
 docs/List.md                                  | 10 ++---
 docs/Readme.md                                |  2 +-
 docs/Show.md                                  |  4 +-
 docs/Theming.md                               | 12 +++---
 docs/Tutorial.md                              | 10 ++---
 .../src/actions/notificationActions.ts        |  2 +-
 packages/ra-core/src/reducer/admin/ui.ts      |  2 +-
 packages/ra-ui-materialui/README.md           |  2 +-
 .../src/layout/MenuItemLink.tsx               |  2 +-
 .../ra-ui-materialui/src/layout/UserMenu.tsx  |  2 +-
 packages/react-admin/README.md                |  4 +-
 18 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/README.md b/README.md
index b741eba2cfd..749de1c2768 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ A frontend Framework for building data-driven applications running in the browse
 ## Features
 
 * Adapts to any backend (REST, GraphQL, SOAP, etc.)
-* Powered by [material-ui](https://material-ui.com/), [redux](https://redux.js.org/), [react-final-form](https://final-form.org/react), [react-router](https://reacttraining.com/react-router/) and a few more
+* Powered by [material-ui](https://v4.mui.com/), [redux](https://redux.js.org/), [react-final-form](https://final-form.org/react), [react-router](https://reacttraining.com/react-router/) and a few more
 * Super-fast UI thanks to optimistic rendering (renders before the server returns)
 * Undo updates and deletes for a few seconds
 * Relationships (many to one, one to many)
@@ -127,7 +127,7 @@ See the [Data Providers documentation](https://marmelab.com/react-admin/DataProv
 
 ## Batteries Included But Removable
 
-React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://material-ui.com/), in addition to custom react hooks exposing reusable controller logic. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.
+React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://v4.mui.com/), in addition to custom react hooks exposing reusable controller logic. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.
 
 ## Examples
 
diff --git a/UPGRADE.md b/UPGRADE.md
index baba3a4bbee..1298f81d39f 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -967,7 +967,7 @@ You can replace `<DisabledInput>` with a disabled or read-only `TextInput`. For
 +<TextInput source="id" disabled />
 ```
 
-See material-ui [`TextField` documentation](https://material-ui.com/components/text-fields/#textfield) for available options.
+See material-ui [`TextField` documentation](https://v4.mui.com/components/text-fields/#textfield) for available options.
 
 ## The SideBar Width Must Be Set Through The `theme`
 
diff --git a/docs/Admin.md b/docs/Admin.md
index 0d240b05a81..7af7f1cd00d 100644
--- a/docs/Admin.md
+++ b/docs/Admin.md
@@ -273,7 +273,7 @@ See the [Theming documentation](./Theming.md#using-a-custom-menu) for more detai
 
 ## `theme`
 
-Material UI supports [theming](https://material-ui.com/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop:
+Material UI supports [theming](https://v4.mui.com/customization/themes). This lets you customize the look and feel of an admin by overriding fonts, colors, and spacing. You can provide a custom material ui theme by using the `theme` prop:
 
 ```jsx
 import { createMuiTheme } from '@material-ui/core/styles';
@@ -293,7 +293,7 @@ const App = () => (
 
 ![Dark theme](./img/dark-theme.png)
 
-For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://material-ui.com/customization/themes/).
+For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://v4.mui.com/customization/themes/).
 
 ## `layout`
 
diff --git a/docs/Buttons.md b/docs/Buttons.md
index 5fcb8d1a528..03f84f75163 100644
--- a/docs/Buttons.md
+++ b/docs/Buttons.md
@@ -107,7 +107,7 @@ It also supports [all the other `<Button>` props](#button).
 | -------------- | ------------------------------------------------------------------ |
 | `floating`     | Applied to the underlying `MuiFab` component used in small screens |
 
-To override the style of all instances of `<CreateButton>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaCreateButton` key.
+To override the style of all instances of `<CreateButton>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaCreateButton` key.
 
 ### `<ListButton>`
 
@@ -267,7 +267,7 @@ This button is an internal component used by react-admin in [the Filter button/f
 | ---------- | ------------------------------------------------------------- |
 | `root`     | Alternative to using `className`. Applied to the root element |
 
-To override the style of all instances of `<FilterButton>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaFilterButton` key.
+To override the style of all instances of `<FilterButton>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaFilterButton` key.
 
 ### `<SortButton>`
 
@@ -317,7 +317,7 @@ Base component for most react-admin buttons. Responsive (displays only the icon
 | `disabled`   | Optional | `boolean`                      | `false`   | If `true`, the button will be disabled |
 | `size`       | Optional | `'large' | 'medium' | 'small'` | `'small'` | Button size                            |
 
-Other props are passed down to [the underlying material-ui `<Button>`](https://material-ui.com/api/button/).
+Other props are passed down to [the underlying material-ui `<Button>`](https://v4.mui.com/api/button/).
 
 #### CSS API
 
@@ -330,7 +330,7 @@ Other props are passed down to [the underlying material-ui `<Button>`](https://m
 | `mediumIcon`     | Applied to the Button's `children` when `size` prop is `medium` and `alignIcon` prop is 'right' |
 | `largeIcon`      | Applied to the Button's `children` when `size` prop is `large` and `alignIcon` prop is 'right'  |
 
-To override the style of all instances of `<Button>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaButton` key.
+To override the style of all instances of `<Button>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaButton` key.
 
 ### `<RefreshButton>`
 ### `<SkipNavigationButton>`
@@ -341,7 +341,7 @@ To override the style of all instances of `<Button>` using the [material-ui styl
 | --------------------- | ----------------------------------------------- |
 | `skipToContentButton` | Applied to the underlying `MuiButton` component |
 
-To override the style of all instances of `<SkipNavigationButton>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaSkipNavigationButton` key.
+To override the style of all instances of `<SkipNavigationButton>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaSkipNavigationButton` key.
 
 ### `<MenuItemLink>`
 
@@ -355,7 +355,7 @@ The `<MenuItemLink>` component displays a menu item with a label and an icon - o
 | `primaryText` | Required | `ReactNode`          | -       | The menu content, displayed when the menu isn't minimized. |
 | `leftIcon`    | Optional | `ReactNode`          | -       | The menu icon |
 
-Additional props are passed down to [the underling material-ui `<MenuItem>` component](https://material-ui.com/api/menu-item/#menuitem-api).
+Additional props are passed down to [the underling material-ui `<MenuItem>` component](https://v4.mui.com/api/menu-item/#menuitem-api).
 
 You can create a custom menu component using the `<DashboardMenuItem>` and `<MenuItemLink>` components:
 
@@ -418,7 +418,7 @@ See [The theming documentation](./Theming.md#menuitemlink) for more details.
 | `active`  | Applied to the underlying `MuiMenuItem`'s `activeClassName` prop    |
 | `icon`    | Applied to the `ListItemIcon` component when `leftIcon` prop is set |
 
-To override the style of all instances of `<MenuItemLink>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaMenuItemLink` key.
+To override the style of all instances of `<MenuItemLink>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaMenuItemLink` key.
 
 ### `<UserMenu>`
 
@@ -437,4 +437,4 @@ To override the style of all instances of `<MenuItemLink>` using the [material-u
 | `userButton` | Applied to the underlying `MuiButton` component when `useGetIdentity().loaded` is `true` and `useGetIdentity().identity.fullName` is set |
 | `avatar`     | Applied to the underlying `MuiAvatar` component when `useGetIdentity().avatar` is `true`                                                 |
 
-To override the style of all instances of `<UserMenu>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaUserMenu` key.
+To override the style of all instances of `<UserMenu>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaUserMenu` key.
diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
index ba85d183aa2..b8fd32cc3dc 100644
--- a/docs/CreateEdit.md
+++ b/docs/CreateEdit.md
@@ -109,7 +109,7 @@ You can customize the `<Create>` and `<Edit>` components using the following pro
 
 ### CSS API
 
-The `<Create>` and `<Edit>` components accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
+The `<Create>` and `<Edit>` components accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v4.mui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
 
 | Rule name   | Description                                                                                |
 | ----------- | ------------------------------------------------------------------------------------------ |
@@ -118,7 +118,7 @@ The `<Create>` and `<Edit>` components accepts the usual `className` prop, but y
 | `noActions` | Applied to the main container when `actions` prop is `false`                               |
 | `card`      | Applied to the child component inside the main container (Material UI's `Card` by default) |
 
-To override the style of all instances of `<Create>` and `<Edit>` components using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaCreate` and `RaEdit` keys respectively.
+To override the style of all instances of `<Create>` and `<Edit>` components using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaCreate` and `RaEdit` keys respectively.
 
 ### Page Title
 
@@ -1705,7 +1705,7 @@ Here are the props received by the `Toolbar` component when passed as the `toolb
 
 ### CSS API
 
-The `<Toolbar>` accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
+The `<Toolbar>` accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v4.mui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
 
 | Rule name        | Description                                                                     |
 | ---------------- | ------------------------------------------------------------------------------- |
@@ -1715,7 +1715,7 @@ The `<Toolbar>` accepts the usual `className` prop, but you can override many cl
 | `mobileToolbar`  | Applied to the underlying `MuiToolbar` component when `width` prop is `xs`      |
 | `spacer`         | Applied to the div below the underlying `MuiToolbar` used as spacer             |
 
-To override the style of all instances of `<Toolbar>` components using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaToolbar` key.
+To override the style of all instances of `<Toolbar>` components using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaToolbar` key.
 
 **Tip**: Use react-admin's `<Toolbar>` component instead of material-ui's `<Toolbar>` component. The former builds upon the latter and adds support for an alternative mobile layout (and is therefore responsive).
 
@@ -1926,7 +1926,7 @@ The `<SimpleForm>` and `<TabbedForm>` layouts are quite simple. In order to bett
 
 ![custom form layout](./img/custom-form-layout.png)
  
-Here is an example of such custom form, taken from the Posters Galore demo. It uses [material-ui's `<Box>` component](https://material-ui.com/components/box/), and it's a good starting point for your custom form layouts.
+Here is an example of such custom form, taken from the Posters Galore demo. It uses [material-ui's `<Box>` component](https://v4.mui.com/components/box/), and it's a good starting point for your custom form layouts.
 
 ```jsx
 import * as React from "react";
diff --git a/docs/Fields.md b/docs/Fields.md
index 0b001da6586..b399a269d4a 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -156,7 +156,7 @@ import { BooleanField } from 'react-admin';
 | ---------- | --------------------------- |
 | `root`     | Applied to the root element |
 
-To override the style of all instances of `<BooleanField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaBooleanField` key.
+To override the style of all instances of `<BooleanField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaBooleanField` key.
 
 #### Usage
 
@@ -183,7 +183,7 @@ import AlarmOffIcon from '@material-ui/icons/AlarmOff';
 
 ### `<ChipField>`
 
-Displays a value inside a ["Chip"](https://material-ui.com/components/chips), which is Material UI's term for a label.
+Displays a value inside a ["Chip"](https://v4.mui.com/components/chips), which is Material UI's term for a label.
 
 #### CSS API
 
@@ -191,7 +191,7 @@ Displays a value inside a ["Chip"](https://material-ui.com/components/chips), wh
 | ---------- | -------------------------------------------------------- |
 | `chip`     | Applied to the underlying Material UI's `Chip` component |
 
-To override the style of all instances of `<ChipField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaChipField` key.
+To override the style of all instances of `<ChipField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaChipField` key.
 
 #### Usage
 
@@ -215,7 +215,7 @@ import { ChipField, SingleFieldList, ReferenceManyField } from 'react-admin';
 </ReferenceManyField>
 ```
 
-Any additional props are passed to material-ui's `<Chip>` element. Check [The material-ui `<Chip>` documentation](https://material-ui.com/api/chip/) for details.
+Any additional props are passed to material-ui's `<Chip>` element. Check [The material-ui `<Chip>` documentation](https://v4.mui.com/api/chip/) for details.
 
 ### `<DateField>`
 
@@ -328,7 +328,7 @@ This field is also often used within the [<ImageInput />](./Inputs.md#imageinput
 | `list`     | Applied to the underlying `<ul>` component when `sourceValue` prop is an array |
 | `image`    | Applied to each underlying `<img>` component                                   |
 
-To override the style of all instances of `<ImageField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaImageField` key.
+To override the style of all instances of `<ImageField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaImageField` key.
 
 #### Usage
 
@@ -394,7 +394,7 @@ This field is also often used within an [<FileInput />](./Inputs.md#fileinput) c
 | ---------- | --------------------------- |
 | `root`     | Applied to the root element |
 
-To override the style of all instances of `<FileField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaFileField` key.
+To override the style of all instances of `<FileField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaFileField` key.
 
 #### Usage
 
@@ -792,7 +792,7 @@ With this configuration, `<ReferenceField>` wraps the user's name in a link to t
 | ---------- | ----------------------------- |
 | `link`     | Applied to each child element |
 
-To override the style of all instances of `<ReferenceField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaReferenceField` key.
+To override the style of all instances of `<ReferenceField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaReferenceField` key.
 
 #### Usage
 
@@ -1088,7 +1088,7 @@ export const PostList = (props) => (
 | ---------- | -------------------------------------------------------------------------------------- |
 | `progress` | Applied to the Material UI's `LinearProgress` component while `loaded` prop is `false` |
 
-To override the style of all instances of `<ReferenceArrayField>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaReferenceArrayField` key.
+To override the style of all instances of `<ReferenceArrayField>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaReferenceArrayField` key.
 
 #### Usage
 
@@ -1266,7 +1266,7 @@ The same pattern applies to show views when you don't want to display all transl
 
 ### Styling Fields
 
-All field components accept a `className` prop, allowing you to customize their style to your liking. We advise you to use the Material UI styling solution, JSS, to generate those classes. See their [documentation](https://material-ui.com/customization/css-in-js/#api) about that.
+All field components accept a `className` prop, allowing you to customize their style to your liking. We advise you to use the Material UI styling solution, JSS, to generate those classes. See their [documentation](https://v4.mui.com/customization/css-in-js/#api) about that.
 
 ```jsx
 import { makeStyles } from '@material-ui/core/styles';
diff --git a/docs/Inputs.md b/docs/Inputs.md
index d802c820b32..e21d9f9cf18 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -111,7 +111,7 @@ import FavoriteIcon from '@material-ui/icons/Favorite';
 
 ![CustomBooleanInputCheckIcon](./img/custom-switch-icon.png)
 
-Refer to [Material UI Switch documentation](https://material-ui.com/api/switch) for more details.
+Refer to [Material UI Switch documentation](https://v4.mui.com/api/switch) for more details.
 
 `<NullableBooleanInput />` renders as a dropdown list, allowing choosing between `true`, `false`, and `null` values.
 
@@ -161,11 +161,11 @@ import { NullableBooleanInput } from 'react-admin';
 | ---------- | ------------------------------------------------------------- |
 | `input`    | Applied to the underlying Material UI's `TextField` component |
 
-To override the style of all instances of `<NullableBooleanInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaNullableBooleanInput` key.
+To override the style of all instances of `<NullableBooleanInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaNullableBooleanInput` key.
 
 ### `<DateInput>`
 
-Ideal for editing dates, `<DateInput>` renders an HTML `<input type="date">` element, that most browsers display as a standard [Date Picker](https://material-ui.com/components/pickers/#date-pickers). 
+Ideal for editing dates, `<DateInput>` renders an HTML `<input type="date">` element, that most browsers display as a standard [Date Picker](https://v4.mui.com/components/pickers/#date-pickers). 
 
 ![DateInput](./img/date-input.gif)
 
@@ -185,7 +185,7 @@ import { DateInput } from 'react-admin';
 
 ### `<DateTimeInput>`
 
-An input for editing dates with time. `<DateTimeInput>` renders a standard browser [Date and Time Picker](https://material-ui.com/components/pickers/#date-amp-time-pickers), so the appearance depends on the browser (and falls back to a text input on safari).
+An input for editing dates with time. `<DateTimeInput>` renders a standard browser [Date and Time Picker](https://v4.mui.com/components/pickers/#date-amp-time-pickers), so the appearance depends on the browser (and falls back to a text input on safari).
 
 ![DateTimeInput](./img/date-time-input.gif)
 
@@ -258,7 +258,7 @@ Note that the image upload returns a [File](https://developer.mozilla.org/en/doc
 | `preview`       | Styles pass to the underlying `FileInput` component  |
 | `removeButton`  | Styles pass to the underlying `FileInput` component  |
 
-To override the style of all instances of `<ImageInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaImageInput` key.
+To override the style of all instances of `<ImageInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaImageInput` key.
 
 ### `<FileInput>`
 
@@ -319,7 +319,7 @@ Note that the file upload returns a [File](https://developer.mozilla.org/en/docs
 | `preview`       | Applied to each children                                                          |
 | `removeButton`  | Applied to each of the Material UI's `IconButton` component used as remove button |
 
-To override the style of all instances of `<FileInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaFileInput` key.
+To override the style of all instances of `<FileInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaFileInput` key.
 
 ### `<MarkdownInput>`
 
@@ -642,7 +642,7 @@ If you want to limit the initial choices shown to the current value only, you ca
 When dealing with a large amount of `choices` you may need to limit the number of suggestions that are rendered in order to maintain usable performance. The `shouldRenderSuggestions` is an optional prop that allows you to set conditions on when to render suggestions. An easy way to improve performance would be to skip rendering until the user has entered 2 or 3 characters in the search box. This lowers the result set significantly, and might be all you need (depending on your data set).
 Ex. `<AutocompleteInput shouldRenderSuggestions={(val) => { return val.trim().length > 2 }} />` would not render any suggestions until the 3rd character has been entered. This prop is passed to the underlying `react-autosuggest` component and is documented [here](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
 
-`<AutocompleteInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
+`<AutocompleteInput>` renders a [material-ui `<TextField>` component](https://v4.mui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
 
 {% raw %}
 ```jsx
@@ -800,7 +800,7 @@ const CreateCategory = () => {
 | `container`            | Applied to the root element          |
 | `suggestionsContainer` | Applied to the suggestions container |
 
-To override the style of all instances of `<AutocompleteInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaAutocompleteInput` key.
+To override the style of all instances of `<AutocompleteInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaAutocompleteInput` key.
 
 
 ### `<RadioButtonGroupInput>`
@@ -893,7 +893,7 @@ Lastly, use the `options` attribute if you want to override any of Material UI's
 ```
 {% endraw %}
 
-Refer to [Material UI RadioGroup documentation](https://material-ui.com/api/radio-group) for more details.
+Refer to [Material UI RadioGroup documentation](https://v4.mui.com/api/radio-group) for more details.
 
 **Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<RadioButtonGroupInput>` with [`<ReferenceInput>`](#referenceinput), and leave the `choices` empty:
 
@@ -911,12 +911,12 @@ import { RadioButtonGroupInput, ReferenceInput } from 'react-admin';
 | ---------- | ------------------------------------------------------------- |
 | `label`    | Applied to the underlying Material UI's `FormLabel` component |
 
-To override the style of all instances of `<RadioButtonGroupInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaRadioButtonGroupInput` key.
+To override the style of all instances of `<RadioButtonGroupInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaRadioButtonGroupInput` key.
 
 
 ### `<SelectInput>`
 
-To let users choose a value in a list using a dropdown, use `<SelectInput>`. It renders using [Material ui's `<Select>`](https://material-ui.com/api/select). 
+To let users choose a value in a list using a dropdown, use `<SelectInput>`. It renders using [Material ui's `<Select>`](https://v4.mui.com/api/select). 
 
 ![SelectInput](./img/select-input.gif)
 
@@ -1021,7 +1021,7 @@ Lastly, use the `options` attribute if you want to override any of Material UI's
 ```
 {% endraw %}
 
-Refer to [Material UI Select documentation](https://material-ui.com/api/select) for more details.
+Refer to [Material UI Select documentation](https://v4.mui.com/api/select) for more details.
 
 **Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<SelectInput>` with [`<ReferenceInput>`](#referenceinput), and leave the `choices` empty:
 
@@ -1185,7 +1185,7 @@ const CreateCategory = () => {
 | --------------- | --------------------------------------------------------- |
 | `input`         | Applied to the underlying `ResettableTextField` component |
 
-To override the style of all instances of `<SelectInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaSelectInput` key.
+To override the style of all instances of `<SelectInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaSelectInput` key.
 
 ## Array Inputs
 
@@ -1417,7 +1417,7 @@ However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the
 When dealing with a large amount of `choices` you may need to limit the number of suggestions that are rendered in order to maintain usable performance. The `shouldRenderSuggestions` is an optional prop that allows you to set conditions on when to render suggestions. An easy way to improve performance would be to skip rendering until the user has entered 2 or 3 characters in the search box. This lowers the result set significantly, and might be all you need (depending on your data set).
 Ex. `<AutocompleteArrayInput shouldRenderSuggestions={(val) => { return val.trim().length > 2 }} />` would not render any suggestions until the 3rd character has been entered. This prop is passed to the underlying `react-autosuggest` component and is documented [here](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
 
-Lastly, `<AutocompleteArrayInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
+Lastly, `<AutocompleteArrayInput>` renders a [material-ui `<TextField>` component](https://v4.mui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
 
 {% raw %}
 ```jsx
@@ -1585,7 +1585,7 @@ const CreateTag = () => {
 | `inputRootFilled`       | Styles pass as the `root` class of the underlying Material UI's `TextField` component input when `variant` prop is `filled` |
 | `inputInput`            | Styles pass as the `input` class of the underlying Material UI's `TextField` component input                                |
 
-To override the style of all instances of `<AutocompleteArrayInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaAutocompleteArrayInput` key.
+To override the style of all instances of `<AutocompleteArrayInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaAutocompleteArrayInput` key.
 
 ### `<CheckboxGroupInput>`
 
@@ -1614,7 +1614,7 @@ import { CheckboxGroupInput } from 'react-admin';
 | `optionValue` | Optional | `string`                   | `id`    | Field name of record containing the value to use as input value                                                                        |
 | `row`         | Optional | `boolean`                  | `true`  | Display group of elements in a compact row.                                                                                            |
 
-Refer to [Material UI Checkbox documentation](https://material-ui.com/api/checkbox/) for more details.
+Refer to [Material UI Checkbox documentation](https://v4.mui.com/api/checkbox/) for more details.
 
 `<CheckboxGroupInput>` also accepts the [common input props](./Inputs.md#common-input-props).
 
@@ -1688,7 +1688,7 @@ import { FavoriteBorder, Favorite } from '@material-ui/icons';
 | `root`     | Applied to the root element                                   |
 | `label`    | Applied to the underlying Material UI's `FormLabel` component |
 
-To override the style of all instances of `<CheckboxGroupInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaCheckboxGroupInput` key.
+To override the style of all instances of `<CheckboxGroupInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaCheckboxGroupInput` key.
 
 ### `<DualListInput>`
 
@@ -1709,7 +1709,7 @@ Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/
 
 ### `<SelectArrayInput>`
 
-To let users choose several values in a list using a dropdown, use `<SelectArrayInput>`. It renders using [Material ui's `<Select>`](https://material-ui.com/api/select). 
+To let users choose several values in a list using a dropdown, use `<SelectArrayInput>`. It renders using [Material ui's `<Select>`](https://v4.mui.com/api/select). 
 
 ![SelectArrayInput](./img/select-array-input.gif)
 
@@ -1810,7 +1810,7 @@ Lastly, use the `options` attribute if you want to override any of the `<Select>
 ```
 {% endraw %}
 
-Refer to [the Select documentation](https://material-ui.com/api/select) for more details.
+Refer to [the Select documentation](https://v4.mui.com/api/select) for more details.
 
 The `SelectArrayInput` component **cannot** be used inside a `ReferenceInput` but can be used inside a `ReferenceArrayInput`.
 
@@ -1972,7 +1972,7 @@ const CreateTag = () => {
 | `chip`     | Applied to each Material UI's `Chip` component used as selected item               |
 | `chips`    | Applied to the container of Material UI's `Chip` components used as selected items |
 
-To override the style of all instances of `<SelectArrayInput>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaSelectArrayInput` key.
+To override the style of all instances of `<SelectArrayInput>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaSelectArrayInput` key.
 
 
 ## Reference Inputs 
diff --git a/docs/List.md b/docs/List.md
index a7b22b58dc2..89aa3e58068 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -808,7 +808,7 @@ const Dashboard = () => (
 
 ### CSS API
 
-The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
+The `List` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v4.mui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
 
 | Rule name              | Description                                                                              |
 | ---------------------- | ---------------------------------------------------------------------------------------- |
@@ -2057,7 +2057,7 @@ Here are all the props accepted by the component:
 * [`optimized`](#performance)
 * [`empty`](#empty)
 
-Additional props are passed down to [the material-ui `<Table>` element](https://material-ui.com/api/table/).
+Additional props are passed down to [the material-ui `<Table>` element](https://v4.mui.com/api/table/).
 
 `<Datagrid>` renders as many columns as it receives `<Field>` children. It uses the field `label` as column header (or, for fields with no `label`, the field `source`).
 
@@ -2376,7 +2376,7 @@ Passing through a component to the `empty` prop will cause the Datagrid to rende
 
 ### Datagrid CSS API
 
-The `Datagrid` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
+The `Datagrid` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v4.mui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
 
 | Rule name        | Description                                                   |
 | ---------------- | ------------------------------------------------------------- |
@@ -2489,7 +2489,7 @@ For this kind of use case, you need to use a [custom datagrid body component](#b
 
 <a href="./img/simple-list.gif"><img src="./img/simple-list.gif" style="height:300px" alt="The `<SimpleList>` component"></a>
 
-For mobile devices, a `<Datagrid>` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `<SimpleList>` component serves that purpose, leveraging [material-ui's `<List>` and `<ListItem>` components](https://material-ui.com/components/lists/). `<SimpleList>` is an **iterator** component: it gets an array of ids and a data store from the `ListContext`, and iterates over the ids to display each record.
+For mobile devices, a `<Datagrid>` is often unusable - there is simply not enough space to display several columns. The convention in that case is to use a simple list, with only one column per row. The `<SimpleList>` component serves that purpose, leveraging [material-ui's `<List>` and `<ListItem>` components](https://v4.mui.com/components/lists/). `<SimpleList>` is an **iterator** component: it gets an array of ids and a data store from the `ListContext`, and iterates over the ids to display each record.
 
 ### Properties
 
@@ -3022,4 +3022,4 @@ const CustomList = () => {
 You can find components for react-admin in third-party repositories.
 
 - [ra-customizable-datagrid](https://github.com/fizix-io/ra-customizable-datagrid): plugin that allows to hide / show columns dynamically.
-- [ra-datagrid](https://github.com/marmelab/ra-datagrid): Integration of [Material-ui's `<Datagrid>`](https://material-ui.com/components/data-grid/) into react-admin.
+- [ra-datagrid](https://github.com/marmelab/ra-datagrid): Integration of [Material-ui's `<Datagrid>`](https://v4.mui.com/components/data-grid/) into react-admin.
diff --git a/docs/Readme.md b/docs/Readme.md
index 5552a051f0d..f029869bac2 100644
--- a/docs/Readme.md
+++ b/docs/Readme.md
@@ -118,7 +118,7 @@ See the [Data Providers documentation](./DataProviders.md) for details.
 
 ## Architecture: Batteries Included But Removable
 
-React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://material-ui.com/), in addition to React hooks allowing to reuse the logic with a custom UI. 
+React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://v4.mui.com/), in addition to React hooks allowing to reuse the logic with a custom UI. 
 
 You may replace one part of react-admin with your own, e.g. to use a custom Datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.
 
diff --git a/docs/Show.md b/docs/Show.md
index 0c27de23791..b0b42cf90f7 100644
--- a/docs/Show.md
+++ b/docs/Show.md
@@ -23,7 +23,7 @@ Here are all the props accepted by the `<Show>` component:
 
 ### CSS API
 
-The `<Show>` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
+The `<Show>` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://v4.mui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
 
 | Rule name   | Description                                                                                |
 | ----------- | ------------------------------------------------------------------------------------------ |
@@ -32,7 +32,7 @@ The `<Show>` component accepts the usual `className` prop but you can override m
 | `noActions` | Applied to the main container when `actions` prop is `false`                               |
 | `card`      | Applied to the child component inside the main container (Material UI's `Card` by default) |
 
-To override the style of all instances of `<Show>` using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaShow` key.
+To override the style of all instances of `<Show>` using the [material-ui style overrides](https://v4.mui.com/customization/globals/#css), use the `RaShow` key.
 
 Here is the minimal code necessary to display a view to show a post:
 
diff --git a/docs/Theming.md b/docs/Theming.md
index fa012a9dda4..09dd82150b4 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -197,7 +197,7 @@ If you want to read more about higher-order components, check out this SitePoint
 
 ## `useMediaQuery` Hook
 
-To provide an optimized experience on mobile, tablet, and desktop devices, you often need to display different components depending on the screen size. Material-ui provides a hook dedicated to help such responsive layouts: [useMediaQuery](https://material-ui.com/components/use-media-query/#usemediaquery).
+To provide an optimized experience on mobile, tablet, and desktop devices, you often need to display different components depending on the screen size. Material-ui provides a hook dedicated to help such responsive layouts: [useMediaQuery](https://v4.mui.com/components/use-media-query/#usemediaquery).
 
 It expects a function receiving the material-ui theme as a parameter, and returning a media query. Use the theme breakpoints to check for common screen sizes. The hook returns a boolean indicating if the current screen matches the media query or not.
 
@@ -251,7 +251,7 @@ export const PostList = (props) => {
 
 ## Using a Predefined Theme
 
-Material UI also supports [complete theming](https://material-ui.com/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `<Admin>` component, in the `theme` prop (along with `createMuiTheme()`).
+Material UI also supports [complete theming](https://v4.mui.com/customization/themes) out of the box. Material UI ships two base themes: light and dark. React-admin uses the light one by default. To use the dark one, pass it to the `<Admin>` component, in the `theme` prop (along with `createMuiTheme()`).
 
 ```jsx
 import { createMuiTheme } from '@material-ui/core/styles';
@@ -273,7 +273,7 @@ const App = () => (
 
 ## Writing a Custom Theme
 
-If you need more fine-tuning, you'll need to write your own `theme` object, following [Material UI themes documentation](https://material-ui.com/customization/themes/).
+If you need more fine-tuning, you'll need to write your own `theme` object, following [Material UI themes documentation](https://v4.mui.com/customization/themes/).
 
 For instance, here is how to override the default react-admin theme:
 
@@ -320,7 +320,7 @@ A `theme` object can contain the following keys:
 * `typography`
 * `zIndex`
 
-**Tip**: Check [Material UI default theme documentation](https://material-ui.com/customization/default-theme/) to see the default values and meaning for these keys.
+**Tip**: Check [Material UI default theme documentation](https://v4.mui.com/customization/default-theme/) to see the default values and meaning for these keys.
 
 Once your theme is defined, pass it to the `<Admin>` component, in the `theme` prop.
 
@@ -703,7 +703,7 @@ const App = () => (
 
 ## Replacing The AppBar
 
-By default, React-admin uses [Material-ui's `<AppBar>` component](https://material-ui.com/api/app-bar/) together with a custom container that internally uses a [Slide](https://material-ui.com/api/slide) to hide the `AppBar` on scroll. Here is an example of how to change this container with any component:
+By default, React-admin uses [Material-ui's `<AppBar>` component](https://v4.mui.com/api/app-bar/) together with a custom container that internally uses a [Slide](https://v4.mui.com/api/slide) to hide the `AppBar` on scroll. Here is an example of how to change this container with any component:
 
 ```jsx
 // in src/MyAppBar.js
@@ -887,7 +887,7 @@ import Badge from '@material-ui/core/Badge';
 
 The `letfIcon` prop allows to set the menu left icon.
 
-Additional props are passed down to [the underling material-ui `<MenuItem>` component](https://material-ui.com/api/menu-item/#menuitem-api).
+Additional props are passed down to [the underling material-ui `<MenuItem>` component](https://v4.mui.com/api/menu-item/#menuitem-api).
 
 **Tip**: The `<MenuItemLink>` component makes use of the React Router [NavLink](https://reacttraining.com/react-router/web/api/NavLink) component, hence allowing to customize the active menu style. For instance, here is how to use a custom theme to show a left border for the active menu:
 
diff --git a/docs/Tutorial.md b/docs/Tutorial.md
index da92ae28e1a..1c8a5062659 100644
--- a/docs/Tutorial.md
+++ b/docs/Tutorial.md
@@ -274,7 +274,7 @@ Yes, you can replace any of react-admin's components with your own! That means r
 
 ## Customizing Styles
 
-The `MyUrlField` component is a perfect opportunity to illustrate how to customize styles. React-admin relies on [material-ui](https://material-ui.com/), a set of React components modeled after Google's [Material Design UI Guidelines](https://material.io/). Material-ui uses [JSS](https://github.com/cssinjs/jss), a CSS-in-JS solution, for styling components. Let's take advantage of the capabilities of JSS to remove the underline from the link and add an icon:
+The `MyUrlField` component is a perfect opportunity to illustrate how to customize styles. React-admin relies on [material-ui](https://v4.mui.com/), a set of React components modeled after Google's [Material Design UI Guidelines](https://material.io/). Material-ui uses [JSS](https://github.com/cssinjs/jss), a CSS-in-JS solution, for styling components. Let's take advantage of the capabilities of JSS to remove the underline from the link and add an icon:
 
 ```jsx
 // in src/MyUrlField.js
@@ -312,9 +312,9 @@ export default MyUrlField;
 
 In JSS, you define styles as a JavaScript object, using the JS variants of the CSS property names (e.g. `textDecoration` instead of `text-decoration`). To pass these styles to the component, use `makeStyles` to build a React hook. The hook will create new class names for these styles, and return the new class names in the `classes` object. Then, use these names in a `className` prop, as you would with a regular CSS class.
 
-**Tip**: There is much more to JSS than what this tutorial covers. Read the [material-ui documentation](https://material-ui.com/styles/basics) to learn more about theming, vendor prefixes, responsive utilities, etc.
+**Tip**: There is much more to JSS than what this tutorial covers. Read the [material-ui documentation](https://v4.mui.com/styles/basics) to learn more about theming, vendor prefixes, responsive utilities, etc.
 
-**Tip**: Material-ui supports other CSS-in-JS solutions, including [Styled components](https://material-ui.com/styles/basics/#styled-components-api).
+**Tip**: Material-ui supports other CSS-in-JS solutions, including [Styled components](https://v4.mui.com/styles/basics/#styled-components-api).
 
 ## Handling Relationships
 
@@ -798,7 +798,7 @@ export const PostList = (props) => (
 
 ![Mobile post list](./img/tutorial_mobile_post_list.gif)
 
-The `<SimpleList>` component uses [material-ui's `<List>` and `<ListItem>` components](https://material-ui.com/components/lists), and expects functions as `primaryText`, `secondaryText`, and `tertiaryText` props.
+The `<SimpleList>` component uses [material-ui's `<List>` and `<ListItem>` components](https://v4.mui.com/components/lists), and expects functions as `primaryText`, `secondaryText`, and `tertiaryText` props.
 
 **Note:** Since JSONRestServer doesn't provide `views` or `published_at` values for posts, we switched to a custom API for those screenshots in order to demonstrate how to use some of the `SimpleList` component props.
 
@@ -980,4 +980,4 @@ const App = () => (
 
 React-admin was built with customization in mind. You can replace any react-admin component with a component of your own, for instance to display a custom list layout, or a different edit form for a given resource.
 
-Now that you've completed the tutorial, continue reading the [react-admin documentation](https://marmelab.com/react-admin/Readme.html), and read the [Material UI components documentation](https://material-ui.com/).
+Now that you've completed the tutorial, continue reading the [react-admin documentation](https://marmelab.com/react-admin/Readme.html), and read the [Material UI components documentation](https://v4.mui.com/).
diff --git a/packages/ra-core/src/actions/notificationActions.ts b/packages/ra-core/src/actions/notificationActions.ts
index 52bd6e8ad84..ec9868048a4 100644
--- a/packages/ra-core/src/actions/notificationActions.ts
+++ b/packages/ra-core/src/actions/notificationActions.ts
@@ -27,7 +27,7 @@ export interface ShowNotificationAction {
 /**
  * Shows a snackbar/toast notification on the screen
  *
- * @see {@link https://material-ui.com/api/snackbar/|Material ui snackbar component}
+ * @see {@link https://v4.mui.com/api/snackbar/|Material ui snackbar component}
  * @see {@link https://material.io/guidelines/components/snackbars-toasts.html|Material ui reference document on snackbar}
  */
 export const showNotification = (
diff --git a/packages/ra-core/src/reducer/admin/ui.ts b/packages/ra-core/src/reducer/admin/ui.ts
index 420dceea818..2dd8c047fcd 100644
--- a/packages/ra-core/src/reducer/admin/ui.ts
+++ b/packages/ra-core/src/reducer/admin/ui.ts
@@ -33,7 +33,7 @@ export interface UIState {
 }
 
 // Match the medium breakpoint defined in the material-ui theme
-// See https://material-ui.com/customization/breakpoints/#breakpoints
+// See https://v4.mui.com/customization/breakpoints/#breakpoints
 const isDesktop = (): boolean =>
     // (min-width: 960px) => theme.breakpoints.up('md')
     typeof window !== 'undefined' &&
diff --git a/packages/ra-ui-materialui/README.md b/packages/ra-ui-materialui/README.md
index 249380234da..5f207907406 100644
--- a/packages/ra-ui-materialui/README.md
+++ b/packages/ra-ui-materialui/README.md
@@ -1,6 +1,6 @@
 # ra-ui-material
 
-UI Components for [react-admin](https://marmelab.com/react-admin/) with [MaterialUI](https://material-ui.com/).
+UI Components for [react-admin](https://marmelab.com/react-admin/) with [MaterialUI](https://v4.mui.com/).
 
 ## License
 
diff --git a/packages/ra-ui-materialui/src/layout/MenuItemLink.tsx b/packages/ra-ui-materialui/src/layout/MenuItemLink.tsx
index 5c46042ee22..0f560853caa 100644
--- a/packages/ra-ui-materialui/src/layout/MenuItemLink.tsx
+++ b/packages/ra-ui-materialui/src/layout/MenuItemLink.tsx
@@ -49,7 +49,7 @@ const useStyles = makeStyles(
  * @prop {ReactNode} leftIcon The menu icon
  *
  * Additional props are passed down to the underling material-ui <MenuItem> component
- * @see https://material-ui.com/api/menu-item/#menuitem-api
+ * @see https://v4.mui.com/api/menu-item/#menuitem-api
  *
  * @example // You can create a custom menu component using the <DashboardMenuItem> and <MenuItemLink> components:
  *
diff --git a/packages/ra-ui-materialui/src/layout/UserMenu.tsx b/packages/ra-ui-materialui/src/layout/UserMenu.tsx
index 9fe0d8743bc..6e839f377c4 100644
--- a/packages/ra-ui-materialui/src/layout/UserMenu.tsx
+++ b/packages/ra-ui-materialui/src/layout/UserMenu.tsx
@@ -102,7 +102,7 @@ const UserMenu = (props: UserMenuProps) => {
                 anchorOrigin={AnchorOrigin}
                 transformOrigin={TransformOrigin}
                 // Make sure the menu is display under the button and not over the appbar
-                // See https://material-ui.com/components/menus/#customized-menus
+                // See https://v4.mui.com/components/menus/#customized-menus
                 getContentAnchorEl={null}
                 open={open}
                 onClose={handleClose}
diff --git a/packages/react-admin/README.md b/packages/react-admin/README.md
index 941fffe0da9..0a5a0f91359 100644
--- a/packages/react-admin/README.md
+++ b/packages/react-admin/README.md
@@ -9,7 +9,7 @@ A frontend Framework for building data-driven applications running in the browse
 ## Features
 
 * Adapts to any backend (REST, GraphQL, SOAP, etc.)
-* Powered by [material-ui](https://material-ui.com/), [redux](https://redux.js.org/), [react-final-form](https://final-form.org/react), [react-router](https://reacttraining.com/react-router/) and a few more
+* Powered by [material-ui](https://v4.mui.com/), [redux](https://redux.js.org/), [react-final-form](https://final-form.org/react), [react-router](https://reacttraining.com/react-router/) and a few more
 * Super-fast UI thanks to optimistic rendering (renders before the server returns)
 * Undo updates and deletes for a few seconds
 * Relationships (many to one, one to many)
@@ -132,7 +132,7 @@ See the [Data Providers documentation](https://marmelab.com/react-admin/DataProv
 
 ## Batteries Included But Removable
 
-React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://material-ui.com/), in addition to custom react hooks exposing reusable controller logic. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.
+React-admin is designed as a library of loosely coupled React components built on top of [material-ui](https://v4.mui.com/), in addition to custom react hooks exposing reusable controller logic. It is very easy to replace one part of react-admin with your own, e.g. to use a custom datagrid, GraphQL instead of REST, or Bootstrap instead of Material Design.
 
 ## Examples
 

From 5440a21f97e3ed0ba27fc9e9396e8d37ef237dc6 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 18 Oct 2021 17:55:29 -0300
Subject: [PATCH 2/2] Update migration url

---
 UPGRADE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UPGRADE.md b/UPGRADE.md
index 1298f81d39f..ad334b2c22e 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -35,7 +35,7 @@ Failing to upgrade one of the `ra-` packages will result in a duplication of the
 * `react` and `react-dom` are now required to be >= 16.9. This version is backward compatible with 16.3, which was the minimum requirement in react-admin, and it offers the support for Hooks, on which react-admin v3 relies heavily.
 * `react-redux` requires a minimum version of 7.1.0 (instead of 5.0). Check their upgrade guide for [6.0](https://github.com/reduxjs/react-redux/releases/tag/v6.0.0) and [7.0](https://github.com/reduxjs/react-redux/releases/tag/v7.0.0)
 * `redux-saga` requires a minimum version of 1.0.0 (instead of ~0.16.0). Check their [list of breaking changes for redux-saga 1.0](https://github.com/redux-saga/redux-saga/releases/tag/v1.0.0) on GitHub. 
-* `material-ui` requires a minimum of 4.0.0 (instead of 1.5). Check their [Upgrade guide](https://next.material-ui.com/guides/migration-v3/).
+* `material-ui` requires a minimum of 4.0.0 (instead of 1.5). Check their [Upgrade guide](https://mui.com/guides/migration-v3/).
 
 ## `react-router-redux` replaced by `connected-react-router`