diff --git a/UPGRADE.md b/UPGRADE.md
index 79e5200f060..a384d2721b9 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -154,6 +154,74 @@ const App = () => (
 );
 ```
 
+## Injected Elements Replaced By Injected Components
+
+Every time that you used an *element* as a prop in a react-admin component, you must now use a *component*. This basically means removing the enclosing angle brackets in props:
+
+```diff
+const PostEdit = (props) => (
+-   <Edit title={<PostTitle />} actions={<EditActions />} {...props}>
++   <Edit title={PostTitle} actions={EditActions} {...props}>
+```
+
+If an element prop depended on higher props, you must use an inline component instead:
+
+```diff
+const PostEdit = ({ permissions, ...props }) => (
+- <Edit actions={<EditActions permissions={permissions} />} {...props}>
++ <Edit actions={actionProps => <EditActions permissions={permissions} {...actionProps} />} {...props}>
+```
+
+We are aware that this will require many changes in existing codebases. Fortunately, it can be automated for the most part. You might find the following regular expressions useful for migrating.
+
+The first, `{<(.+)\/>}`, searches for all element injections, for instance:
+
+* `{<EditActions />}`
+* `{<EditActions permissions={permissions} />}`
+
+You can then use `{props => <$1{...props} />}` as the replacement pattern. The result will be:
+
+* `{props => <EditActions {...props} />}`
+* `{props => <EditActions permissions={permissions} {...props} />}`
+
+However, in most cases you do not need an inline component, so you might want to use another replacement pattern afterwards: `{props => <(\w+) {\.\.\.props} \/>}`. It searches for simple component injections without extra props, such as `{props => <EditActions {...props} />}`, but will not match more complex cases like `{props => <EditActions permissions={permissions} {...props} />}`. You can then use `{$1}` as the replacement pattern, which will produce `{EditActions}`.
+
+For reference, you can read the [RFC](https://github.com/marmelab/react-admin/issues/3246) about this change to understand the rationale.
+
+## Remove optionText={function} for Input Components
+
+Many Input components for selecting items in a list expose an `optionText` prop. This prop used to accept 3 types of values: a field name, a function, and a React element. Here is an example with `AutocompleteInput` using a function as `optionText` prop:
+
+```jsx
+const choices = [
+   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
+   { id: 456, first_name: 'Jane', last_name: 'Austen' },
+];
+const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
+<AutocompleteInput source="author_id" choices={choices} optionText={optionRenderer} />
+```
+
+However, as these Input components no longer accept element as props (but components), there is no way react-admin can distinguish simple functions from elements. Indeed, they might be functions accepting props.
+
+So `optionText` still works, but no longer accepts a simple function - only a component.
+
+The migration shouldn't be too hard though. To turn a function into a component, wrap it inside Fragment tags:
+
+```diff
+-const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
+-<AutocompleteInput source="author_id" choices={choices} optionText={optionRenderer} />
++const Option = ({ record }) => <>{record.first_name} {record.last_name}</>;
++<AutocompleteInput source="author_id" choices={choices} optionText={Option} />
+```
+
+This change concerns the following components:
+
+* `CheckboxGroupInput`
+* `SelectArrayInput`
+* `SelectInput`
+* `SelectField`
+* `RadioButtonGroupInput`
+
 ## Deprecated components were removed
 
 Components deprecated in 2.X have been removed in 3.x. This includes:
@@ -161,3 +229,5 @@ Components deprecated in 2.X have been removed in 3.x. This includes:
 * `AppBarMobile` (use `AppBar` instead, which is responsive)
 * `Header` (use `Title` instead)
 * `ViewTitle` (use `Title` instead)
+* `RecordTitle` (use `TitleForRecord` instead)
+* `TitleDeprecated` (use `Title` instead)
diff --git a/cypress/cypress.json b/cypress/cypress.json
index 62cc929869e..03a611645da 100644
--- a/cypress/cypress.json
+++ b/cypress/cypress.json
@@ -7,5 +7,8 @@
     "supportFile": "support/index.js",
     "videosFolder": "videos",
     "viewportWidth": 1280,
-    "viewportHeight": 720
+    "viewportHeight": 720,
+    "blacklistHosts": [
+        "source.unsplash.com"
+    ]
 }
diff --git a/docs/Admin.md b/docs/Admin.md
index 4258f1ddf44..592d1dd3ecd 100644
--- a/docs/Admin.md
+++ b/docs/Admin.md
@@ -182,7 +182,7 @@ const Menu = ({ resources, onMenuClick, logout }) => (
         <MenuItemLink
             to="/custom-route"
             primaryText="Miscellaneous"
-            leftIcon={<LabelIcon />}
+            leftIcon={LabelIcon}
             onClick={onMenuClick} />
         <Responsive
             small={logout}
diff --git a/docs/Authorization.md b/docs/Authorization.md
index 3da181ffaeb..b4affdcb0e8 100644
--- a/docs/Authorization.md
+++ b/docs/Authorization.md
@@ -122,7 +122,7 @@ const UserCreateToolbar = ({ permissions, ...props }) =>
 export const UserCreate = ({ permissions, ...props }) =>
     <Create {...props}>
         <SimpleForm
-            toolbar={<UserCreateToolbar permissions={permissions} />}
+            toolbar={props => <UserCreateToolbar permissions={permissions} {...props} />}
             defaultValue={{ role: 'user' }}
         >
             <TextInput source="name" validate={[required()]} />
@@ -140,7 +140,7 @@ This also works inside an `Edition` view with a `TabbedForm`, and you can hide a
 {% raw %}
 ```jsx
 export const UserEdit = ({ permissions, ...props }) =>
-    <Edit title={<UserTitle />} {...props}>
+    <Edit title={UserTitle} {...props}>
         <TabbedForm defaultValue={{ role: 'user' }}>
             <FormTab label="user.form.summary">
                 {permissions === 'admin' && <DisabledInput source="id" />}
@@ -173,7 +173,7 @@ const UserFilter = ({ permissions, ...props }) =>
 export const UserList = ({ permissions, ...props }) =>
     <List
         {...props}
-        filters={<UserFilter permissions={permissions} />}
+        filters={props => <UserFilter permissions={permissions} {...props} />}
         sort={{ field: 'name', order: 'ASC' }}
     >
         <Responsive
diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
index 9b1f3e15f63..cf18ea0a721 100644
--- a/docs/CreateEdit.md
+++ b/docs/CreateEdit.md
@@ -58,7 +58,7 @@ export const PostCreate = (props) => (
 );
 
 export const PostEdit = (props) => (
-    <Edit title={<PostTitle />} {...props}>
+    <Edit title={PostTitle} {...props}>
         <SimpleForm>
             <DisabledInput label="Id" source="id" />
             <TextInput source="title" validate={required()} />
@@ -107,7 +107,7 @@ const PostTitle = ({ record }) => {
     return <span>Post {record ? `"${record.title}"` : ''}</span>;
 };
 export const PostEdit = (props) => (
-    <Edit title={<PostTitle />} {...props}>
+    <Edit title={PostTitle} {...props}>
         ...
     </Edit>
 );
@@ -115,7 +115,7 @@ export const PostEdit = (props) => (
 
 ### Actions
 
-You can replace the list of default actions by your own element using the `actions` prop:
+You can replace the list of default actions by your own component using the `actions` prop:
 
 ```jsx
 import Button from '@material-ui/core/Button';
@@ -130,7 +130,7 @@ const PostEditActions = ({ basePath, data, resource }) => (
 );
 
 export const PostEdit = (props) => (
-    <Edit actions={<PostEditActions />} {...props}>
+    <Edit actions={PostEditActions} {...props}>
         ...
     </Edit>
 );
@@ -152,7 +152,7 @@ const Aside = () => (
 );
 
 const PostEdit = props => (
-    <Edit aside={<Aside />} {...props}>
+    <Edit aside={Aside} {...props}>
         ...
     </Edit>
 ```
@@ -218,7 +218,7 @@ const CustomToolbar = withStyles(toolbarStyles)(props => (
 
 const PostEdit = props => (
     <Edit {...props}>
-        <SimpleForm toolbar={<CustomToolbar />}>
+        <SimpleForm toolbar={CustomToolbar}>
             ...
         </SimpleForm>
     </Edit>
@@ -718,7 +718,7 @@ const PostCreateToolbar = props => (
 
 export const PostCreate = (props) => (
     <Create {...props}>
-        <SimpleForm toolbar={<PostCreateToolbar />} redirect="show">
+        <SimpleForm toolbar={PostCreateToolbar} redirect="show">
             ...
         </SimpleForm>
     </Create>
@@ -738,7 +738,7 @@ const PostEditToolbar = props => (
 
 export const PostEdit = (props) => (
     <Edit {...props}>
-        <SimpleForm toolbar={<PostEditToolbar />}>
+        <SimpleForm toolbar={PostEditToolbar}>
             ...
         </SimpleForm>
     </Edit>
@@ -811,7 +811,7 @@ const UserCreateToolbar = ({ permissions, ...props }) =>
 export const UserCreate = ({ permissions, ...props }) =>
     <Create {...props}>
         <SimpleForm
-            toolbar={<UserCreateToolbar permissions={permissions} />}
+            toolbar={props => <UserCreateToolbar permissions={permissions} {...props} />}
             defaultValue={{ role: 'user' }}
         >
             <TextInput source="name" validate={[required()]} />
@@ -829,7 +829,7 @@ This also works inside an `Edition` view with a `TabbedForm`, and you can hide a
 {% raw %}
 ```jsx
 export const UserEdit = ({ permissions, ...props }) =>
-    <Edit title={<UserTitle />} {...props}>
+    <Edit title={UserTitle} {...props}>
         <TabbedForm defaultValue={{ role: 'user' }}>
             <FormTab label="user.form.summary">
                 {permissions === 'admin' && <DisabledInput source="id" />}
diff --git a/docs/Fields.md b/docs/Fields.md
index 85dba106785..ceb00031900 100644
--- a/docs/Fields.md
+++ b/docs/Fields.md
@@ -438,7 +438,7 @@ const choices = [
    { id: 456, first_name: 'Jane', last_name: 'Austen' },
 ];
 const FullNameField = ({ record }) => <Chip>{record.first_name} {record.last_name}</Chip>;
-<SelectField source="author_id" choices={choices} optionText={<FullNameField />}/>
+<SelectField source="author_id" choices={choices} optionText={FullNameField}/>
 ```
 
 The current choice is translated by default, so you can use translation identifiers as choices:
@@ -619,7 +619,7 @@ And if you want to allow users to paginate the list, pass a `<Pagination>` compo
 ```jsx
 import { Pagination } from 'react-admin';
 
-<ReferenceManyField pagination={<Pagination />} reference="comments" target="post_id">
+<ReferenceManyField pagination={Pagination} reference="comments" target="post_id">
    ...
 </ReferenceManyField>
 ```
diff --git a/docs/Inputs.md b/docs/Inputs.md
index 117748139cc..b2675fb0993 100644
--- a/docs/Inputs.md
+++ b/docs/Inputs.md
@@ -13,7 +13,7 @@ import React from 'react';
 import { Edit, DisabledInput, LongTextInput, ReferenceInput, SelectInput, SimpleForm, TextInput } from 'react-admin';
 
 export const PostEdit = (props) => (
-    <Edit title={<PostTitle />} {...props}>
+    <Edit title={PostTitle} {...props}>
         <SimpleForm>
             <DisabledInput source="id" />
             <ReferenceInput label="User" source="userId" reference="users">
@@ -433,7 +433,7 @@ const choices = [
    { id: 456, first_name: 'Jane', last_name: 'Austen' },
 ];
 const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
-<CheckboxGroupInput source="gender" choices={choices} optionText={<FullNameField />}/>
+<CheckboxGroupInput source="gender" choices={choices} optionText={FullNameField}/>
 ```
 
 The choices are translated by default, so you can use translation identifiers as choices:
@@ -685,7 +685,7 @@ const choices = [
    { id: 456, first_name: 'Jane', last_name: 'Austen' },
 ];
 const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
-<RadioButtonGroupInput source="gender" choices={choices} optionText={<FullNameField />}/>
+<RadioButtonGroupInput source="gender" choices={choices} optionText={FullNameField}/>
 ```
 
 The choices are translated by default, so you can use translation identifiers as choices:
@@ -1001,7 +1001,7 @@ const choices = [
    { id: 456, first_name: 'Jane', last_name: 'Austen' },
 ];
 const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
-<SelectInput source="gender" choices={choices} optionText={<FullNameField />}/>
+<SelectInput source="gender" choices={choices} optionText={FullNameField}/>
 ```
 
 Enabling the `allowEmpty` props adds an empty choice (with a default `null` value, which you can overwrite with the `emptyValue` prop) on top of the options, and makes the value nullable:
diff --git a/docs/List.md b/docs/List.md
index 27ef41ac41e..39006eb2686 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -21,7 +21,7 @@ Here are all the props accepted by the `<List>` component:
 * [`actions`](#actions)
 * [`exporter`](#exporter)
 * [`bulkActionButtons`](#bulk-action-buttons)
-* [`filters`](#filters) (a React element used to display the filter form)
+* [`filters`](#filters) (a React component used to display the filter form)
 * [`perPage`](#records-per-page)
 * [`sort`](#default-sort-field)
 * [`filter`](#permanent-filter) (the permanent filter used in the REST request)
@@ -79,11 +79,11 @@ export const PostList = (props) => (
 );
 ```
 
-The title can be either a string, or an element of your own.
+The title can be either a string, or a component of your own.
 
 ### Actions
 
-You can replace the list of default actions by your own element using the `actions` prop:
+You can replace the list of default actions by your own component using the `actions` prop:
 
 ```jsx
 import Button from '@material-ui/core/Button';
@@ -95,7 +95,7 @@ const PostActions = ({
     currentSort,
     displayedFilters,
     exporter,
-    filters,
+    filters: Filters,
     filterValues,
     onUnselectItems,
     resource,
@@ -104,13 +104,15 @@ const PostActions = ({
     total
 }) => (
     <Toolbar>
-        {filters && React.cloneElement(filters, {
-            resource,
-            showFilter,
-            displayedFilters,
-            filterValues,
-            context: 'button',
-        }) }
+        {Filters &&
+            <Filters
+                resource={resource}
+                showFilter={showFilter}
+                displayedFilters={displayedFilters}
+                filterValues={filterValues}
+                context="button"
+            />
+        }
         <CreateButton basePath={basePath} />
         <ExportButton
             disabled={total === 0}
@@ -125,7 +127,7 @@ const PostActions = ({
 );
 
 export const PostList = (props) => (
-    <List {...props} actions={<PostActions />}>
+    <List {...props} actions={PostActions}>
         ...
     </List>
 );
@@ -135,7 +137,7 @@ You can also use such a custom `ListActions` prop to omit or reorder buttons bas
 
 ```jsx
 export const PostList = ({ permissions, ...props }) => (
-    <List {...props} actions={<PostActions permissions={permissions} />}>
+    <List {...props} actions={props => <PostActions permissions={permissions} {...props} />}>
         ...
     </List>
 );
@@ -224,7 +226,7 @@ Under the hood, `fetchRelatedRecords()` uses react-admin's sagas, which trigger
 
 ### Bulk Action Buttons
 
-Bulk action buttons are buttons that affect several records at once, like mass deletion for instance. In the `<Datagrid>` component, the bulk actions toolbar appears when a user ticks the checkboxes in the first column of the table. The user can then choose a button from the bulk actions toolbar. By default, all list views have a single bulk action button, the bulk delete button. You can add other bulk action buttons by passing a custom element as the `bulkActionButtons` prop of the `<List>` component:
+Bulk action buttons are buttons that affect several records at once, like mass deletion for instance. In the `<Datagrid>` component, the bulk actions toolbar appears when a user ticks the checkboxes in the first column of the table. The user can then choose a button from the bulk actions toolbar. By default, all list views have a single bulk action button, the bulk delete button. You can add other bulk action buttons by passing a custom component as the `bulkActionButtons` prop of the `<List>` component:
 
 ```jsx
 import React, { Fragment } from 'react';
@@ -241,7 +243,7 @@ const PostBulkActionButtons = props => (
 );
 
 export const PostList = (props) => (
-    <List {...props} bulkActionButtons={<PostBulkActionButtons />}>
+    <List {...props} bulkActionButtons={PostBulkActionButtons}>
         ...
     </List>
 );
@@ -364,7 +366,7 @@ Note that the `crudUpdateMany` action creator is *not* present in the `mapDispat
 
 ### Filters
 
-You can add a filter element to the list using the `filters` prop:
+You can add a filter component to the list using the `filters` prop:
 
 ```jsx
 const PostFilter = (props) => (
@@ -375,7 +377,7 @@ const PostFilter = (props) => (
 );
 
 export const PostList = (props) => (
-    <List {...props} filters={<PostFilter />}>
+    <List {...props} filters={PostFilter}>
         ...
     </List>
 );
@@ -385,12 +387,12 @@ The filter component must be a `<Filter>` with `<Input>` children.
 
 **Tip**: `<Filter>` is a special component, which renders in two ways:
 
-- as a filter button (to add new filters)
-- as a filter form (to enter filter values)
+* as a filter button (to add new filters)
+* as a filter form (to enter filter values)
 
 It does so by inspecting its `context` prop.
 
-**Tip**: Don't mix up this `filters` prop, expecting a React element, with the `filter` props, which expects an object to define permanent filters (see below).
+**Tip**: Don't mix up this `filters` prop, expecting a React component, with the `filter` props, which expects an object to define permanent filters (see below).
 
 The `Filter` 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/overrides/#overriding-with-classes)). This property accepts the following keys:
 
@@ -516,7 +518,7 @@ const PostFilter = (props) => (
 );
 
 export const PostList = (props) => (
-    <List {...props} filters={<PostFilter />} filterDefaultValues={{ is_published: true }}>
+    <List {...props} filters={PostFilter} filterDefaultValues={{ is_published: true }}>
         ...
     </List>
 );
@@ -531,7 +533,7 @@ const filterSentToDataProvider = { ...filterDefaultValues, ...filterChosenByUser
 
 ### Pagination
 
-You can replace the default pagination element by your own, using the `pagination` prop. The pagination element receives the current page, the number of records per page, the total number of records, as well as a `setPage()` function that changes the page.
+You can replace the default pagination component by your own, using the `pagination` prop. The pagination element receives the current page, the number of records per page, the total number of records, as well as a `setPage()` function that changes the page.
 
 For instance, you can modify the default pagination by adjusting the "rows per page" selector.
 
@@ -542,7 +544,7 @@ import { Pagination } from 'react-admin';
 const PostPagination = props => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} {...props} />
 
 export const PostList = (props) => (
-    <List {...props} pagination={<PostPagination />}>
+    <List {...props} pagination={PostPagination}>
         ...
     </List>
 );
@@ -564,12 +566,12 @@ const PostPagination = ({ page, perPage, total, setPage }) => {
         nbPages > 1 &&
             <Toolbar>
                 {page > 1 &&
-                    <Button color="primary" key="prev" icon={<ChevronLeft />} onClick={() => setPage(page - 1)}>
+                    <Button color="primary" key="prev" icon={ChevronLeft} onClick={() => setPage(page - 1)}>
                         Prev
                     </Button>
                 }
                 {page !== nbPages &&
-                    <Button color="primary" key="next" icon={<ChevronRight />} onClick={() => setPage(page + 1)} labelPosition="before">
+                    <Button color="primary" key="next" icon={ChevronRight} onClick={() => setPage(page + 1)} labelPosition="before">
                         Next
                     </Button>
                 }
@@ -578,7 +580,7 @@ const PostPagination = ({ page, perPage, total, setPage }) => {
 }
 
 export const PostList = (props) => (
-    <List {...props} pagination={<PostPagination />}>
+    <List {...props} pagination={PostPagination}>
         ...
     </List>
 );
@@ -600,7 +602,7 @@ const Aside = () => (
 );
 
 const PostList = props => (
-    <List aside={<Aside />} {...props}>
+    <List aside={Aside} {...props}>
         ...
     </List>
 ```
@@ -761,8 +763,8 @@ const MyDatagridRow = ({ record, resource, id, onToggleItem, children, selected,
     </TableRow>
 )
 
-const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow />} />;
-const MyDatagrid = props => <Datagrid {...props} body={<MyDatagridBody />} />;
+const MyDatagridBody = props => <DatagridBody {...props} row={MyDatagridRow} />;
+const MyDatagrid = props => <Datagrid {...props} body={MyDatagridBody} />;
 
 const PostList = props => (
     <List {...props}>
@@ -842,7 +844,7 @@ const PostPanel = ({ id, record, resource }) => (
 
 const PostList = props => (
     <List {...props}>
-        <Datagrid expand={<PostPanel />}>
+        <Datagrid expand={PostPanel}>
             <TextField source="id" />
             <TextField source="title" />
             <DateField source="published_at" />
@@ -856,9 +858,9 @@ const PostList = props => (
 
 ![expandable panel](./img/datagrid_expand.gif)
 
-The `expand` prop expects an element as value. When the user chooses to expand the row, the Datagrid clones the element, and passes the current `record`, `id`, and `resource`.
+The `expand` prop expects an component as value. When the user chooses to expand the row, the Datagrid render the component, and passes the current `record`, `id`, and `resource`.
 
-**Tip**: Since the `expand` element receives the same props as a detail view, you can actually use a `<Show>` view as element for the `expand` prop:
+**Tip**: Since the `expand` element receives the same props as a detail view, you can actually use a `<Show>` view as component for the `expand` prop:
 
 ```js
 const PostShow = props => (
@@ -875,7 +877,7 @@ const PostShow = props => (
 
 const PostList = props => (
     <List {...props}>
-        <Datagrid expand={<PostShow />}>
+        <Datagrid expand={PostShow}>
             <TextField source="id" />
             <TextField source="title" />
             <DateField source="published_at" />
@@ -888,7 +890,7 @@ const PostList = props => (
 
 The result will be the same as in the previous snippet, except that `<Show>` encloses the content inside a material-ui `<Card>`.
 
-**Tip**: You can go one step further and use an `<Edit>` view as `expand` element, albeit with a twist:
+**Tip**: You can go one step further and use an `<Edit>` view as `expand` component, albeit with a twist:
 
 ```js
 const PostEdit = props => (
@@ -908,7 +910,7 @@ const PostEdit = props => (
 
 const PostList = props => (
     <List {...props}>
-        <Datagrid expand={<PostEdit />}>
+        <Datagrid expand={PostEdit}>
             <TextField source="id" />
             <TextField source="title" />
             <DateField source="published_at" />
@@ -1127,7 +1129,7 @@ const CategoriesActions = props => (
 export const CategoriesList = (props) => (
     <List {...props} perPage={10000}>
         <Tree>
-            <NodeView actions={<CategoriesActions />}>
+            <NodeView actions={CategoriesActions}>
                 <TextField source="name" />
             </NodeView>
         </Tree>
@@ -1143,7 +1145,7 @@ export const CategoriesList = (props) => (
 export const CategoriesList = (props) => (
     <List {...props} perPage={10000}>
         <Tree enableDragAndDrop>
-            <NodeView actions={<CategoriesActions />}>
+            <NodeView actions={CategoriesActions}>
                 <TextField source="name" />
             </NodeView>
         </Tree>
@@ -1186,9 +1188,9 @@ const CommentGrid = ({ ids, data, basePath }) => (
     {ids.map(id =>
         <Card key={id} style={cardStyle}>
             <CardHeader
-                title={<TextField record={data[id]} source="author.name" />}
-                subheader={<DateField record={data[id]} source="created_at" />}
-                avatar={<Avatar icon={<PersonIcon />} />}
+                title={props => <TextField record={data[id]} source="author.name" {...props} />}
+                subheader={props => <DateField record={data[id]} source="created_at" {...props} />}
+                avatar={props => <Avatar icon={<PersonIcon />} {...props} />}
             />
             <CardContent>
                 <TextField record={data[id]} source="body" />
@@ -1243,7 +1245,7 @@ const UserFilter = ({ permissions, ...props }) =>
 export const UserList = ({ permissions, ...props }) =>
     <List
         {...props}
-        filters={<UserFilter permissions={permissions} />}
+        filters={props => <UserFilter permissions={permissions} {...props} />}
         sort={{ field: 'name', order: 'ASC' }}
     >
         <Responsive
diff --git a/docs/Show.md b/docs/Show.md
index ebb8c81a2be..54ceabcdfc8 100644
--- a/docs/Show.md
+++ b/docs/Show.md
@@ -80,7 +80,7 @@ const PostTitle = ({ record }) => {
     return <span>Post {record ? `"${record.title}"` : ''}</span>;
 };
 export const PostShow = (props) => (
-    <Show title={<PostTitle />} {...props}>
+    <Show title={PostTitle} {...props}>
         ...
     </Show>
 );
@@ -88,7 +88,7 @@ export const PostShow = (props) => (
 
 ### Actions
 
-You can replace the list of default actions by your own element using the `actions` prop:
+You can replace the list of default actions by your own component using the `actions` prop:
 
 ```jsx
 import Button from '@material-ui/core/Button';
@@ -103,7 +103,7 @@ const PostShowActions = ({ basePath, data, resource }) => (
 );
 
 export const PostShow = (props) => (
-    <Show actions={<PostShowActions />} {...props}>
+    <Show actions={PostShowActions} {...props}>
         ...
     </Show>
 );
@@ -125,7 +125,7 @@ const Aside = () => (
 );
 
 const PostShow = props => (
-    <Show aside={<Aside />} {...props}>
+    <Show aside={Aside} {...props}>
         ...
     </Show>
 ```
@@ -258,7 +258,7 @@ import {
 
 const ScrollableTabbedShowLayout = props => (
     <Show{...props}>
-        <TabbedShowLayout tabs={<TabbedShowLayoutTabs scrollable={true}/>}>
+        <TabbedShowLayout tabs={props => <TabbedShowLayoutTabs scrollable={true}{...props} />}>
             ...
         </TabbedShowLayout>
     </Show>
@@ -292,7 +292,7 @@ const PostShowActions = ({ permissions, basePath, data, resource }) => (
 );
 
 export const PostShow = ({ permissions, ...props }) => (
-    <Show actions={<PostShowActions permissions={permissions} />} {...props}>
+    <Show actions={props => <PostShowActions permissions={permissions} {...props} />} {...props}>
         <SimpleShowLayout>
             <TextField source="title" />
             <RichTextField source="body" />
diff --git a/docs/Theming.md b/docs/Theming.md
index 2e237d20960..31c17be1627 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -104,7 +104,7 @@ export const VisitorList = withStyles(listStyles)(({ classes, ...props }) => (
     <List
         classes={classes}
         {...props}
-        filters={<VisitorFilter />}
+        filters={VisitorFilter}
         sort={{ field: 'last_seen', order: 'DESC' }}
         perPage={25}
     >
@@ -399,12 +399,12 @@ const MyUserMenu = props => (
         <MenuItemLink
             to="/configuration"
             primaryText="Configuration"
-            leftIcon={<SettingsIcon />}
+            leftIcon={SettingsIcon}
         />
     </UserMenu>
 );
 
-const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} />;
+const MyAppBar = props => <AppBar {...props} userMenu={MyUserMenu} />;
 
 const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
 ```
@@ -433,9 +433,9 @@ const MyCustomIcon = withStyles(myCustomIconStyle)(
     )
 );
 
-const MyUserMenu = props => (<UserMenu {...props} icon={<MyCustomIcon />} />);
+const MyUserMenu = props => (<UserMenu {...props} icon={MyCustomIcon} />);
 
-const MyAppBar = props => <AppBar {...props} userMenu={<MyUserMenu />} />;
+const MyAppBar = props => <AppBar {...props} userMenu={MyUserMenu} />;
 ```
 {% endraw %}
 
@@ -851,7 +851,7 @@ const MyError = ({
         <div>
             <Button
                 variant="contained"
-                icon={<History />}
+                icon={History}
                 onClick={() => history.go(-1)}
             >
                 Back
diff --git a/docs/Tutorial.md b/docs/Tutorial.md
index 6fc2a2ec87a..be4d6ea9301 100644
--- a/docs/Tutorial.md
+++ b/docs/Tutorial.md
@@ -547,7 +547,7 @@ The post editing page has a slight problem: it uses the post id as main title (t
 
 export const PostEdit = props => (
 -   <Edit {...props}>
-+   <Edit title={<PostTitle />} {...props}>
++   <Edit title={PostTitle} {...props}>
         // ...
     </Edit>
 );
@@ -575,7 +575,7 @@ const PostFilter = (props) => (
 );
 
 export const PostList = (props) => (
-    <List filters={<PostFilter />} {...props}>
+    <List filters={PostFilter} {...props}>
         // ...
     </List>
 );
diff --git a/docs/index.md b/docs/index.md
index 999b6ddf3e7..5561b0e0aef 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -102,7 +102,7 @@ const PostTitle = ({ record }) => {
 };
 
 export const PostEdit = (props) => (
-    <Edit title={<PostTitle />} {...props}>
+    <Edit title={PostTitle} {...props}>
         <SimpleForm>
             <DisabledInput source="id" />
             <TextInput source="title" />
diff --git a/examples/demo/src/categories/CategoryEdit.js b/examples/demo/src/categories/CategoryEdit.js
index 09f66d1e8cd..73cdcb915b1 100644
--- a/examples/demo/src/categories/CategoryEdit.js
+++ b/examples/demo/src/categories/CategoryEdit.js
@@ -24,7 +24,7 @@ const CategoryTitle = ({ record }) => {
 };
 
 const CategoryEdit = props => (
-    <Edit title={<CategoryTitle />} {...props}>
+    <Edit title={CategoryTitle} {...props}>
         <SimpleForm>
             <TextInput source="name" />
             <ReferenceManyField
diff --git a/examples/demo/src/invoices/InvoiceList.js b/examples/demo/src/invoices/InvoiceList.js
index c2e2bafe1a7..50cb06411ce 100644
--- a/examples/demo/src/invoices/InvoiceList.js
+++ b/examples/demo/src/invoices/InvoiceList.js
@@ -22,8 +22,8 @@ const ListFilters = props => (
 );
 
 const InvoiceList = props => (
-    <List {...props} filters={<ListFilters />} perPage={25}>
-        <Datagrid rowClick="expand" expand={<InvoiceShow />}>
+    <List {...props} filters={ListFilters} perPage={25}>
+        <Datagrid rowClick="expand" expand={InvoiceShow}>
             <TextField source="id" />
             <DateField source="date" />
             <ReferenceField source="customer_id" reference="customers">
diff --git a/examples/demo/src/layout/AppBar.js b/examples/demo/src/layout/AppBar.js
index 1d57528e76d..3cd4d969475 100644
--- a/examples/demo/src/layout/AppBar.js
+++ b/examples/demo/src/layout/AppBar.js
@@ -25,14 +25,14 @@ const CustomUserMenu = props => {
             <MenuItemLink
                 to="/configuration"
                 primaryText={translate('pos.configuration')}
-                leftIcon={<SettingsIcon />}
+                leftIcon={SettingsIcon}
             />
         </UserMenu>
     );
 };
 
 const CustomAppBar = ({ classes, ...props }) => (
-    <AppBar {...props} userMenu={<CustomUserMenu />}>
+    <AppBar {...props} userMenu={CustomUserMenu}>
         <Typography
             variant="h6"
             color="inherit"
diff --git a/examples/demo/src/layout/Menu.js b/examples/demo/src/layout/Menu.js
index a9205818288..1d2dfb6bdda 100644
--- a/examples/demo/src/layout/Menu.js
+++ b/examples/demo/src/layout/Menu.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { createElement, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
@@ -48,7 +48,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     primaryText={translate(`resources.commands.name`, {
                         smart_count: 2,
                     })}
-                    leftIcon={<orders.icon />}
+                    leftIcon={orders.icon}
                     onClick={onMenuClick}
                 />
                 <MenuItemLink
@@ -56,7 +56,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     primaryText={translate(`resources.invoices.name`, {
                         smart_count: 2,
                     })}
-                    leftIcon={<invoices.icon />}
+                    leftIcon={invoices.icon}
                     onClick={onMenuClick}
                 />
             </SubMenu>
@@ -72,7 +72,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     primaryText={translate(`resources.products.name`, {
                         smart_count: 2,
                     })}
-                    leftIcon={<products.icon />}
+                    leftIcon={products.icon}
                     onClick={onMenuClick}
                 />
                 <MenuItemLink
@@ -80,7 +80,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     primaryText={translate(`resources.categories.name`, {
                         smart_count: 2,
                     })}
-                    leftIcon={<categories.icon />}
+                    leftIcon={categories.icon}
                     onClick={onMenuClick}
                 />
             </SubMenu>
@@ -96,7 +96,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     primaryText={translate(`resources.customers.name`, {
                         smart_count: 2,
                     })}
-                    leftIcon={<visitors.icon />}
+                    leftIcon={visitors.icon}
                     onClick={onMenuClick}
                 />
                 <MenuItemLink
@@ -104,7 +104,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     primaryText={translate(`resources.segments.name`, {
                         smart_count: 2,
                     })}
-                    leftIcon={<LabelIcon />}
+                    leftIcon={LabelIcon}
                     onClick={onMenuClick}
                 />
             </SubMenu>
@@ -113,7 +113,7 @@ const Menu = ({ onMenuClick, open, logout }) => {
                 primaryText={translate(`resources.reviews.name`, {
                     smart_count: 2,
                 })}
-                leftIcon={<reviews.icon />}
+                leftIcon={reviews.icon}
                 onClick={onMenuClick}
             />
             <Responsive
@@ -121,14 +121,14 @@ const Menu = ({ onMenuClick, open, logout }) => {
                     <MenuItemLink
                         to="/configuration"
                         primaryText={translate('pos.configuration')}
-                        leftIcon={<SettingsIcon />}
+                        leftIcon={SettingsIcon}
                         onClick={onMenuClick}
                     />
                 }
                 medium={null}
             />
             <Responsive
-                small={logout}
+                small={createElement(logout)}
                 medium={null} // Pass null to render nothing on larger devices
             />
         </div>
diff --git a/examples/demo/src/orders/OrderEdit.js b/examples/demo/src/orders/OrderEdit.js
index 14ced2caf15..8aedf2d302c 100644
--- a/examples/demo/src/orders/OrderEdit.js
+++ b/examples/demo/src/orders/OrderEdit.js
@@ -29,13 +29,13 @@ const editStyles = {
 };
 
 const OrderEdit = props => (
-    <Edit title={<OrderTitle />} aside={<Basket />} {...props}>
+    <Edit title={OrderTitle} aside={Basket} {...props}>
         <SimpleForm>
             <DateInput source="date" />
             <ReferenceInput source="customer_id" reference="customers">
                 <AutocompleteInput
-                    optionText={choice =>
-                        `${choice.first_name} ${choice.last_name}`
+                    optionText={({ record }) =>
+                        `${record.first_name} ${record.last_name}`
                     }
                 />
             </ReferenceInput>
diff --git a/examples/demo/src/orders/OrderList.js b/examples/demo/src/orders/OrderList.js
index a00c491206b..d45dfc22541 100644
--- a/examples/demo/src/orders/OrderList.js
+++ b/examples/demo/src/orders/OrderList.js
@@ -34,8 +34,8 @@ const OrderFilter = withStyles(filterStyles)(({ classes, ...props }) => (
         <SearchInput source="q" alwaysOn />
         <ReferenceInput source="customer_id" reference="customers">
             <AutocompleteInput
-                optionText={choice =>
-                    `${choice.first_name} ${choice.last_name}`
+                optionText={({ record }) =>
+                    `${record.first_name} ${record.last_name}`
                 }
             />
         </ReferenceInput>
@@ -169,7 +169,7 @@ const OrderList = ({ classes, ...props }) => (
         filterDefaultValues={{ status: 'ordered' }}
         sort={{ field: 'date', order: 'DESC' }}
         perPage={25}
-        filters={<OrderFilter />}
+        filters={OrderFilter}
     >
         <StyledTabbedDatagrid />
     </List>
diff --git a/examples/demo/src/products/ProductEdit.js b/examples/demo/src/products/ProductEdit.js
index 3951dc263cd..f938c049d86 100644
--- a/examples/demo/src/products/ProductEdit.js
+++ b/examples/demo/src/products/ProductEdit.js
@@ -35,7 +35,7 @@ const styles = {
 };
 
 const ProductEdit = ({ classes, ...props }) => (
-    <Edit {...props} title={<ProductTitle />}>
+    <Edit {...props} title={ProductTitle}>
         <TabbedForm>
             <FormTab label="resources.products.tabs.image">
                 <Poster />
@@ -71,7 +71,7 @@ const ProductEdit = ({ classes, ...props }) => (
                     reference="reviews"
                     target="product_id"
                     addLabel={false}
-                    pagination={<Pagination />}
+                    pagination={Pagination}
                 >
                     <Datagrid>
                         <DateField source="date" />
diff --git a/examples/demo/src/products/ProductList.js b/examples/demo/src/products/ProductList.js
index 27f9f243bfa..114f758f23a 100644
--- a/examples/demo/src/products/ProductList.js
+++ b/examples/demo/src/products/ProductList.js
@@ -48,7 +48,7 @@ export const ProductFilter = props => (
 const ProductList = props => (
     <List
         {...props}
-        filters={<ProductFilter />}
+        filters={ProductFilter}
         perPage={20}
         sort={{ field: 'id', order: 'ASC' }}
     >
diff --git a/examples/demo/src/reviews/ReviewEdit.js b/examples/demo/src/reviews/ReviewEdit.js
index 7d421a086d9..469ea769d45 100644
--- a/examples/demo/src/reviews/ReviewEdit.js
+++ b/examples/demo/src/reviews/ReviewEdit.js
@@ -63,7 +63,7 @@ const ReviewEdit = ({ classes, onCancel, ...props }) => (
                         version={controllerProps.version}
                         redirect="list"
                         resource="reviews"
-                        toolbar={<ReviewEditToolbar />}
+                        toolbar={ReviewEditToolbar}
                     >
                         <CustomerReferenceField
                             formClassName={classes.inlineField}
diff --git a/examples/demo/src/reviews/ReviewFilter.js b/examples/demo/src/reviews/ReviewFilter.js
index 9f71345c28b..866f5cfd56f 100644
--- a/examples/demo/src/reviews/ReviewFilter.js
+++ b/examples/demo/src/reviews/ReviewFilter.js
@@ -27,8 +27,8 @@ const ReviewFilter = ({ classes, ...props }) => (
         />
         <ReferenceInput source="customer_id" reference="customers">
             <AutocompleteInput
-                optionText={choice =>
-                    `${choice.first_name} ${choice.last_name}`
+                optionText={({ record }) =>
+                    `${record.first_name} ${record.last_name}`
                 }
             />
         </ReferenceInput>
diff --git a/examples/demo/src/reviews/ReviewList.js b/examples/demo/src/reviews/ReviewList.js
index 6b4110852a1..acc410eaa95 100644
--- a/examples/demo/src/reviews/ReviewList.js
+++ b/examples/demo/src/reviews/ReviewList.js
@@ -59,10 +59,8 @@ class ReviewList extends Component {
                                     className={classnames(classes.list, {
                                         [classes.listWithDrawer]: isMatch,
                                     })}
-                                    bulkActionButtons={
-                                        <ReviewsBulkActionButtons />
-                                    }
-                                    filters={<ReviewFilter />}
+                                    bulkActionButtons={ReviewsBulkActionButtons}
+                                    filters={ReviewFilter}
                                     perPage={25}
                                     sort={{ field: 'date', order: 'DESC' }}
                                 >
diff --git a/examples/demo/src/visitors/VisitorEdit.js b/examples/demo/src/visitors/VisitorEdit.js
index ba7c4443bb4..99a32243718 100644
--- a/examples/demo/src/visitors/VisitorEdit.js
+++ b/examples/demo/src/visitors/VisitorEdit.js
@@ -27,7 +27,7 @@ const VisitorTitle = ({ record }) =>
     record ? <FullNameField record={record} size={32} /> : null;
 
 const VisitorEdit = ({ classes, ...props }) => (
-    <Edit title={<VisitorTitle />} {...props}>
+    <Edit title={VisitorTitle} {...props}>
         <TabbedForm>
             <FormTab label="resources.customers.tabs.identity">
                 <TextInput
diff --git a/examples/demo/src/visitors/VisitorList.js b/examples/demo/src/visitors/VisitorList.js
index ef819b38a41..76546d0ec17 100644
--- a/examples/demo/src/visitors/VisitorList.js
+++ b/examples/demo/src/visitors/VisitorList.js
@@ -37,7 +37,7 @@ const styles = {
 const VisitorList = ({ classes, ...props }) => (
     <List
         {...props}
-        filters={<VisitorFilter />}
+        filters={VisitorFilter}
         sort={{ field: 'last_seen', order: 'DESC' }}
         perPage={25}
     >
diff --git a/examples/simple/src/comments/CommentList.js b/examples/simple/src/comments/CommentList.js
index c4e53e2b58a..c92aacb7b7d 100644
--- a/examples/simple/src/comments/CommentList.js
+++ b/examples/simple/src/comments/CommentList.js
@@ -208,8 +208,8 @@ const CommentList = props => (
         {...props}
         perPage={6}
         exporter={exporter}
-        filters={<CommentFilter />}
-        pagination={<CommentPagination />}
+        filters={CommentFilter}
+        pagination={CommentPagination}
         component="div"
     >
         <Responsive small={<CommentMobileList />} medium={<CommentGrid />} />
diff --git a/examples/simple/src/comments/PostQuickCreate.js b/examples/simple/src/comments/PostQuickCreate.js
index 82679defb5a..a7d3df33e7c 100644
--- a/examples/simple/src/comments/PostQuickCreate.js
+++ b/examples/simple/src/comments/PostQuickCreate.js
@@ -67,12 +67,13 @@ class PostQuickCreateView extends Component {
                 save={this.handleSave}
                 saving={submitting}
                 redirect={false}
-                toolbar={
+                toolbar={props => (
                     <PostQuickCreateToolbar
                         onCancel={onCancel}
                         submitting={submitting}
+                        {...props}
                     />
-                }
+                )}
                 classes={{ form: classes.form }}
             >
                 <TextInput source="title" validate={required()} />
diff --git a/examples/simple/src/posts/PostCreate.js b/examples/simple/src/posts/PostCreate.js
index e5944eb8233..9cf6601bc57 100644
--- a/examples/simple/src/posts/PostCreate.js
+++ b/examples/simple/src/posts/PostCreate.js
@@ -83,7 +83,7 @@ const getDefaultDate = () => new Date();
 const PostCreate = ({ permissions, ...props }) => (
     <Create {...props}>
         <SimpleForm
-            toolbar={<PostCreateToolbar />}
+            toolbar={PostCreateToolbar}
             defaultValue={{ average_note: 0 }}
             validate={values => {
                 const errors = {};
diff --git a/examples/simple/src/posts/PostEdit.js b/examples/simple/src/posts/PostEdit.js
index 9aa7ba03c63..4880644d316 100644
--- a/examples/simple/src/posts/PostEdit.js
+++ b/examples/simple/src/posts/PostEdit.js
@@ -44,7 +44,7 @@ const EditActions = ({ basePath, data, hasShow }) => (
 );
 
 const PostEdit = props => (
-    <Edit title={<PostTitle />} actions={<EditActions />} {...props}>
+    <Edit title={PostTitle} actions={EditActions} {...props}>
         <TabbedForm defaultValue={{ average_note: 0 }}>
             <FormTab label="post.form.summary">
                 <DisabledInput source="id" />
diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js
index d7d8500b610..8ebfd9c012a 100644
--- a/examples/simple/src/posts/PostList.js
+++ b/examples/simple/src/posts/PostList.js
@@ -94,8 +94,8 @@ const PostPanel = ({ id, record, resource }) => (
 const PostList = withStyles(styles)(({ classes, ...props }) => (
     <List
         {...props}
-        bulkActionButtons={<PostListBulkActions />}
-        filters={<PostFilter />}
+        bulkActionButtons={PostListBulkActions}
+        filters={PostFilter}
         sort={{ field: 'published_at', order: 'DESC' }}
     >
         <Responsive
@@ -109,7 +109,7 @@ const PostList = withStyles(styles)(({ classes, ...props }) => (
                 />
             }
             medium={
-                <Datagrid rowClick={rowClick} expand={<PostPanel />}>
+                <Datagrid rowClick={rowClick} expand={PostPanel}>
                     <TextField source="id" />
                     <TextField source="title" cellClassName={classes.title} />
                     <DateField
diff --git a/examples/simple/src/posts/PostShow.js b/examples/simple/src/posts/PostShow.js
index 7abce2a9f04..fcd1b07af9e 100644
--- a/examples/simple/src/posts/PostShow.js
+++ b/examples/simple/src/posts/PostShow.js
@@ -37,9 +37,9 @@ const CreateRelatedComment = ({ record }) => (
 );
 
 const PostShow = props => (
-    <ShowController title={<PostTitle />} {...props}>
+    <ShowController {...props}>
         {controllerProps => (
-            <ShowView {...props} {...controllerProps}>
+            <ShowView {...props} {...controllerProps} title={PostTitle}>
                 <TabbedShowLayout>
                     <Tab label="post.form.summary">
                         <TextField source="id" />
diff --git a/examples/simple/src/users/UserCreate.js b/examples/simple/src/users/UserCreate.js
index 460bef204ca..58a773baef5 100644
--- a/examples/simple/src/users/UserCreate.js
+++ b/examples/simple/src/users/UserCreate.js
@@ -32,8 +32,8 @@ const UserEditToolbar = ({ permissions, ...props }) => (
 );
 
 const UserCreate = ({ permissions, ...props }) => (
-    <Create {...props} aside={<Aside />}>
-        <TabbedForm toolbar={<UserEditToolbar permissions={permissions} />}>
+    <Create {...props} aside={Aside}>
+        <TabbedForm toolbar={props => <UserEditToolbar permissions={permissions} {...props} />}>
             <FormTab label="user.form.summary" path="">
                 <TextInput
                     source="name"
diff --git a/examples/simple/src/users/UserEdit.js b/examples/simple/src/users/UserEdit.js
index 3cbdc8e5c39..ef6d758c7a1 100644
--- a/examples/simple/src/users/UserEdit.js
+++ b/examples/simple/src/users/UserEdit.js
@@ -38,10 +38,10 @@ const UserEditToolbar = withStyles(toolbarStyles)(props => (
 ));
 
 const UserEdit = ({ permissions, ...props }) => (
-    <Edit title={<UserTitle />} aside={<Aside />} {...props}>
+    <Edit title={UserTitle} aside={Aside} {...props}>
         <TabbedForm
             defaultValue={{ role: 'user' }}
-            toolbar={<UserEditToolbar />}
+            toolbar={UserEditToolbar}
         >
             <FormTab label="user.form.summary" path="">
                 {permissions === 'admin' && <DisabledInput source="id" />}
diff --git a/examples/simple/src/users/UserList.js b/examples/simple/src/users/UserList.js
index 910fc0290b3..a1a3127f234 100644
--- a/examples/simple/src/users/UserList.js
+++ b/examples/simple/src/users/UserList.js
@@ -40,11 +40,11 @@ const rowClick = memoize(permissions => (id, basePath, record) => {
 const UserList = ({ permissions, ...props }) => (
     <List
         {...props}
-        filters={<UserFilter permissions={permissions} />}
+        filters={props => <UserFilter permissions={permissions} {...props} />}
         filterDefaultValues={{ role: 'user' }}
         sort={{ field: 'name', order: 'ASC' }}
-        aside={<Aside />}
-        bulkActionButtons={<UserBulkActionButtons />}
+        aside={Aside}
+        bulkActionButtons={UserBulkActionButtons}
     >
         <Responsive
             small={
@@ -58,7 +58,7 @@ const UserList = ({ permissions, ...props }) => (
             medium={
                 <Datagrid
                     rowClick={rowClick(permissions)}
-                    expand={<UserEditEmbedded />}
+                    expand={UserEditEmbedded}
                 >
                     <TextField source="id" />
                     <TextField source="name" />
diff --git a/examples/simple/src/users/UserShow.js b/examples/simple/src/users/UserShow.js
index 11734dd8ea2..e448ee92f61 100644
--- a/examples/simple/src/users/UserShow.js
+++ b/examples/simple/src/users/UserShow.js
@@ -7,7 +7,7 @@ import UserTitle from './UserTitle';
 import Aside from './Aside';
 
 const UserShow = ({ permissions, ...props }) => (
-    <Show title={<UserTitle />} aside={<Aside />} {...props}>
+    <Show title={UserTitle} aside={Aside} {...props}>
         <TabbedShowLayout>
             <Tab label="user.form.summary">
                 <TextField source="id" />
diff --git a/examples/tutorial/src/posts.js b/examples/tutorial/src/posts.js
index 61ad820384d..f861526df24 100644
--- a/examples/tutorial/src/posts.js
+++ b/examples/tutorial/src/posts.js
@@ -36,7 +36,7 @@ const PostFilter = props => (
 );
 
 export const PostList = props => (
-    <List {...props} filters={<PostFilter />}>
+    <List {...props} filters={PostFilter}>
         <Datagrid>
             <TextField source="id" />
             <ReferenceField label="User" source="userId" reference="users">
@@ -54,7 +54,7 @@ const PostTitle = ({ record }) => {
 };
 
 export const PostEdit = props => (
-    <Edit title={<PostTitle />} {...props}>
+    <Edit title={PostTitle} {...props}>
         <SimpleForm>
             <DisabledInput source="id" />
             <ReferenceInput label="User" source="userId" reference="users">
diff --git a/packages/ra-core/src/CoreAdmin.tsx b/packages/ra-core/src/CoreAdmin.tsx
index 1ab5b7e0727..68fbadc5ddc 100644
--- a/packages/ra-core/src/CoreAdmin.tsx
+++ b/packages/ra-core/src/CoreAdmin.tsx
@@ -107,7 +107,7 @@ React-admin requires a valid dataProvider function to work.`);
             logoutButton,
         } = this.props;
 
-        const logout = authProvider ? createElement(logoutButton) : null;
+        const logout = authProvider ? logoutButton : null;
 
         if (appLayout) {
             console.warn(
diff --git a/packages/ra-core/src/CoreAdminRouter.tsx b/packages/ra-core/src/CoreAdminRouter.tsx
index dfe5e1d585c..5abe43b8a1c 100644
--- a/packages/ra-core/src/CoreAdminRouter.tsx
+++ b/packages/ra-core/src/CoreAdminRouter.tsx
@@ -208,7 +208,7 @@ export class CoreAdminRouter extends Component<
                         path="/"
                         render={() =>
                             createElement(
-                              layout,
+                                layout,
                                 {
                                     dashboard,
                                     logout,
diff --git a/packages/ra-core/src/controller/ListController.tsx b/packages/ra-core/src/controller/ListController.tsx
index 7195abe6238..42cee6a95c0 100644
--- a/packages/ra-core/src/controller/ListController.tsx
+++ b/packages/ra-core/src/controller/ListController.tsx
@@ -81,7 +81,7 @@ interface Props {
  *   - sort
  *   - filter (the permanent filter to apply to the query)
  *   - actions
- *   - filters (a React Element used to display the filter form)
+ *   - filters (a React component used to display the filter form)
  *   - pagination
  *
  * @example
@@ -96,7 +96,7 @@ interface Props {
  *             title="List of posts"
  *             sort={{ field: 'published_at' }}
  *             filter={{ is_published: true }}
- *             filters={<PostFilter />}
+ *             filters={PostFilter}
  *         >
  *             <Datagrid>
  *                 <TextField source="id" />
diff --git a/packages/ra-core/src/types.ts b/packages/ra-core/src/types.ts
index de1f45dea6e..f069c1bce3d 100644
--- a/packages/ra-core/src/types.ts
+++ b/packages/ra-core/src/types.ts
@@ -104,7 +104,7 @@ export type DashboardComponent = ComponentType<WithPermissionsChildrenParams>;
 
 export interface LayoutProps {
     dashboard?: DashboardComponent;
-    logout: ReactNode;
+    logout: ComponentType;
     menu: ComponentType;
     theme: object;
     title?: TitleComponent;
diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx
index 1d6f684249e..38e0b8b2f6d 100644
--- a/packages/ra-ui-materialui/src/auth/Login.tsx
+++ b/packages/ra-ui-materialui/src/auth/Login.tsx
@@ -1,8 +1,8 @@
 import React, {
     Component,
-    ReactElement,
     ComponentType,
     HtmlHTMLAttributes,
+    ReactNode,
 } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -25,7 +25,7 @@ import DefaultLoginForm from './LoginForm';
 
 interface Props {
     backgroundImage?: string;
-    loginForm: ReactElement<any>;
+    children: ReactNode;
     staticContext?: StaticContext;
     theme: object;
 }
@@ -115,7 +115,7 @@ class Login extends Component<
             backgroundImage,
             classes,
             className,
-            loginForm,
+            children,
             staticContext,
             ...rest
         } = this.props;
@@ -133,7 +133,7 @@ class Login extends Component<
                                 <LockIcon />
                             </Avatar>
                         </div>
-                        {loginForm}
+                        {children}
                     </Card>
                     <Notification />
                 </div>
@@ -146,7 +146,7 @@ const EnhancedLogin = withStyles(styles)(Login) as ComponentType<Props>;
 
 EnhancedLogin.propTypes = {
     backgroundImage: PropTypes.string,
-    loginForm: PropTypes.element,
+    children: PropTypes.node,
     theme: PropTypes.object,
     staticContext: PropTypes.object,
 };
@@ -154,6 +154,6 @@ EnhancedLogin.propTypes = {
 EnhancedLogin.defaultProps = {
     backgroundImage: 'https://source.unsplash.com/random/1600x900/daily',
     theme: defaultTheme,
-    loginForm: <DefaultLoginForm />,
+    children: <DefaultLoginForm />,
 };
 export default EnhancedLogin;
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteButton.js
index 947194c0d53..6569de7f266 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteButton.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ComponentPropType } from 'ra-core';
 import BulkDeleteWithConfirmButton from './BulkDeleteWithConfirmButton';
 import BulkDeleteWithUndoButton from './BulkDeleteWithUndoButton';
-import Button from './Button';
 
 const BulkDeleteButton = ({ undoable, ...props }) =>
     undoable ? (
@@ -17,7 +17,7 @@ BulkDeleteButton.propTypes = {
     resource: PropTypes.string.isRequired,
     selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
     undoable: PropTypes.bool,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 BulkDeleteButton.defaultProps = {
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
index 263488cca8d..e7f6705bf53 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
@@ -6,7 +6,7 @@ import ActionDelete from '@material-ui/icons/Delete';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import inflection from 'inflection';
-import { translate, crudDeleteMany } from 'ra-core';
+import { translate, crudDeleteMany, ComponentPropType } from 'ra-core';
 
 import Confirm from '../layout/Confirm';
 import Button from './Button';
@@ -44,12 +44,12 @@ class BulkDeleteWithConfirmButton extends Component {
         label: PropTypes.string,
         resource: PropTypes.string.isRequired,
         selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
-        icon: PropTypes.element,
+        icon: ComponentPropType,
     };
 
     static defaultProps = {
         label: 'ra.action.delete',
-        icon: <ActionDelete />,
+        icon: ActionDelete,
     };
 
     state = { isOpen: false };
@@ -83,7 +83,7 @@ class BulkDeleteWithConfirmButton extends Component {
         const {
             classes,
             label,
-            icon,
+            icon: Icon,
             onClick,
             resource,
             selectedIds,
@@ -98,7 +98,7 @@ class BulkDeleteWithConfirmButton extends Component {
                     className={classes.deleteButton}
                     {...sanitizeRestProps(rest)}
                 >
-                    {icon}
+                    <Icon />
                 </Button>
                 <Confirm
                     isOpen={this.state.isOpen}
diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
index 9af97845d8f..52f3f6bd71c 100644
--- a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
+++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
@@ -5,7 +5,7 @@ import compose from 'recompose/compose';
 import ActionDelete from '@material-ui/icons/Delete';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
-import { crudDeleteMany, startUndoable } from 'ra-core';
+import { crudDeleteMany, startUndoable, ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 
@@ -44,13 +44,13 @@ class BulkDeleteWithUndoButton extends Component {
         resource: PropTypes.string.isRequired,
         startUndoable: PropTypes.func,
         selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
-        icon: PropTypes.element,
+        icon: ComponentPropType,
     };
 
     static defaultProps = {
         label: 'ra.action.delete',
         undoable: true,
-        icon: <ActionDelete />,
+        icon: ActionDelete,
     };
 
     handleClick = () => {
@@ -70,7 +70,7 @@ class BulkDeleteWithUndoButton extends Component {
     };
 
     render() {
-        const { classes, label, icon, onClick, ...rest } = this.props;
+        const { classes, label, icon: Icon, onClick, ...rest } = this.props;
         return (
             <Button
                 onClick={this.handleClick}
@@ -78,7 +78,7 @@ class BulkDeleteWithUndoButton extends Component {
                 className={classes.deleteButton}
                 {...sanitizeRestProps(rest)}
             >
-                {icon}
+                <Icon />
             </Button>
         );
     }
diff --git a/packages/ra-ui-materialui/src/button/CloneButton.js b/packages/ra-ui-materialui/src/button/CloneButton.js
index 1890b29e904..8197833326c 100644
--- a/packages/ra-ui-materialui/src/button/CloneButton.js
+++ b/packages/ra-ui-materialui/src/button/CloneButton.js
@@ -4,6 +4,7 @@ import shouldUpdate from 'recompose/shouldUpdate';
 import Queue from '@material-ui/icons/Queue';
 import { Link } from 'react-router-dom';
 import { stringify } from 'query-string'
+import { ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 
@@ -27,7 +28,7 @@ export const CloneButton = ({
     basePath = '',
     label = 'ra.action.clone',
     record = {},
-    icon = <Queue />,
+    icon: Icon = Queue,
     ...rest
 }) => (
     <Button
@@ -40,7 +41,7 @@ export const CloneButton = ({
         onClick={stopPropagation}
         {...sanitizeRestProps(rest)}
     >
-        {icon}
+        <Icon />
     </Button>
 );
 
@@ -50,7 +51,7 @@ CloneButton.propTypes = {
     classes: PropTypes.object,
     label: PropTypes.string,
     record: PropTypes.object,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 const enhance = shouldUpdate(
diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js
index a5c0afb63a8..1cbc348432e 100644
--- a/packages/ra-ui-materialui/src/button/CreateButton.js
+++ b/packages/ra-ui-materialui/src/button/CreateButton.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
-import MuiButton from '@material-ui/core/Button';
 import Fab from '@material-ui/core/Fab';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import ContentAdd from '@material-ui/icons/Add';
 import compose from 'recompose/compose';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
-import { useTranslate } from 'ra-core';
+import { useTranslate, ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 import Responsive from '../layout/Responsive';
@@ -35,7 +34,7 @@ const CreateButton = ({
     className,
     classes = {},
     label = 'ra.action.create',
-    icon = <ContentAdd />,
+    icon: Icon = ContentAdd,
     ...rest
 }) => {
     const translate = useTranslate();
@@ -50,7 +49,7 @@ const CreateButton = ({
                     aria-label={label && translate(label)}
                     {...rest}
                 >
-                    {icon}
+                    <Icon />
                 </Fab>
             }
             medium={
@@ -61,7 +60,7 @@ const CreateButton = ({
                     label={label}
                     {...rest}
                 >
-                    {icon}
+                    <Icon />
                 </Button>
             }
         />
@@ -74,7 +73,7 @@ CreateButton.propTypes = {
     classes: PropTypes.object,
     label: PropTypes.string,
     size: PropTypes.string,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 const enhance = compose(
diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.js b/packages/ra-ui-materialui/src/button/DeleteButton.js
index 7eb9340dda7..e16b140e1b3 100644
--- a/packages/ra-ui-materialui/src/button/DeleteButton.js
+++ b/packages/ra-ui-materialui/src/button/DeleteButton.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ComponentPropType } from 'ra-core';
 import DeleteWithUndoButton from './DeleteWithUndoButton';
 import DeleteWithConfirmButton from './DeleteWithConfirmButton';
 
@@ -21,7 +22,7 @@ DeleteButton.propTypes = {
     ]),
     resource: PropTypes.string,
     undoable: PropTypes.bool,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 DeleteButton.defaultProps = {
diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js
index bae35e03988..f95b2694bbd 100644
--- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js
+++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js
@@ -7,7 +7,7 @@ import { fade } from '@material-ui/core/styles/colorManipulator';
 import ActionDelete from '@material-ui/icons/Delete';
 import classnames from 'classnames';
 import inflection from 'inflection';
-import { translate, crudDelete } from 'ra-core';
+import { translate, crudDelete, ComponentPropType } from 'ra-core';
 
 import Confirm from '../layout/Confirm';
 import Button from './Button';
@@ -65,7 +65,7 @@ class DeleteWithConfirmButton extends Component {
         const {
             classes = {},
             className,
-            icon,
+            icon: Icon,
             label = 'ra.action.delete',
             onClick,
             record,
@@ -86,7 +86,7 @@ class DeleteWithConfirmButton extends Component {
                     key="button"
                     {...sanitizeRestProps(rest)}
                 >
-                    {icon}
+                    <Icon />
                 </Button>
                 <Confirm
                     isOpen={this.state.isOpen}
@@ -124,12 +124,12 @@ DeleteWithConfirmButton.propTypes = {
     ]),
     resource: PropTypes.string.isRequired,
     translate: PropTypes.func,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 DeleteWithConfirmButton.defaultProps = {
     redirect: 'list',
-    icon: <ActionDelete />,
+    icon: ActionDelete,
 };
 
 export default compose(
diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js
index c8cb8c8c96c..d33289b6770 100644
--- a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js
+++ b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js
@@ -6,7 +6,7 @@ import { withStyles, createStyles } from '@material-ui/core/styles';
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import ActionDelete from '@material-ui/icons/Delete';
 import classnames from 'classnames';
-import { translate, crudDelete, startUndoable } from 'ra-core';
+import { translate, crudDelete, startUndoable, ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 
@@ -71,7 +71,7 @@ class DeleteWithUndoButton extends Component {
             label = 'ra.action.delete',
             classes = {},
             className,
-            icon,
+            icon: Icon,
             onClick,
             ...rest
         } = this.props;
@@ -87,7 +87,7 @@ class DeleteWithUndoButton extends Component {
                 key="button"
                 {...sanitizeRestProps(rest)}
             >
-                {icon}
+                <Icon />
             </Button>
         );
     }
@@ -107,13 +107,13 @@ DeleteWithUndoButton.propTypes = {
     resource: PropTypes.string.isRequired,
     startUndoable: PropTypes.func,
     translate: PropTypes.func,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 DeleteWithUndoButton.defaultProps = {
     redirect: 'list',
     undoable: true,
-    icon: <ActionDelete />,
+    icon: ActionDelete,
 };
 
 export default compose(
diff --git a/packages/ra-ui-materialui/src/button/EditButton.js b/packages/ra-ui-materialui/src/button/EditButton.js
index ce4d3429118..e5681a2dc63 100644
--- a/packages/ra-ui-materialui/src/button/EditButton.js
+++ b/packages/ra-ui-materialui/src/button/EditButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import shouldUpdate from 'recompose/shouldUpdate';
 import ContentCreate from '@material-ui/icons/Create';
 import { Link } from 'react-router-dom';
-import { linkToRecord } from 'ra-core';
+import { linkToRecord, ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 
@@ -14,7 +14,7 @@ const EditButton = ({
     basePath = '',
     label = 'ra.action.edit',
     record = {},
-    icon = <ContentCreate />,
+    icon: Icon = ContentCreate,
     ...rest
 }) => (
     <Button
@@ -24,7 +24,7 @@ const EditButton = ({
         onClick={stopPropagation}
         {...rest}
     >
-        {icon}
+        <Icon />
     </Button>
 );
 
@@ -34,7 +34,7 @@ EditButton.propTypes = {
     classes: PropTypes.object,
     label: PropTypes.string,
     record: PropTypes.object,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 const enhance = shouldUpdate(
diff --git a/packages/ra-ui-materialui/src/button/ExportButton.js b/packages/ra-ui-materialui/src/button/ExportButton.js
index ac1826aacff..8999677fe62 100644
--- a/packages/ra-ui-materialui/src/button/ExportButton.js
+++ b/packages/ra-ui-materialui/src/button/ExportButton.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import GetApp from '@material-ui/icons/GetApp';
-import { crudGetAll, downloadCSV, CRUD_GET_MANY, GET_MANY } from 'ra-core';
+import { crudGetAll, downloadCSV, CRUD_GET_MANY, GET_MANY, ComponentPropType } from 'ra-core';
 import { unparse as convertToCSV } from 'papaparse/papaparse.min';
 
 import Button from './Button';
@@ -101,13 +101,13 @@ class ExportButton extends Component {
         maxResults: PropTypes.number.isRequired,
         resource: PropTypes.string.isRequired,
         sort: PropTypes.object,
-        icon: PropTypes.element,
+        icon: ComponentPropType,
     };
 
     static defaultProps = {
         label: 'ra.action.export',
         maxResults: 1000,
-        icon: <GetApp />,
+        icon: GetApp,
     };
 
     handleClick = () => {
@@ -143,7 +143,7 @@ class ExportButton extends Component {
     };
 
     render() {
-        const { label, icon, ...rest } = this.props;
+        const { label, icon: Icon, ...rest } = this.props;
 
         return (
             <Button
@@ -151,7 +151,7 @@ class ExportButton extends Component {
                 label={label}
                 {...sanitizeRestProps(rest)}
             >
-                {icon}
+                <Icon />
             </Button>
         );
     }
diff --git a/packages/ra-ui-materialui/src/button/ListButton.js b/packages/ra-ui-materialui/src/button/ListButton.js
index 702e8c3cd87..2ed47705590 100644
--- a/packages/ra-ui-materialui/src/button/ListButton.js
+++ b/packages/ra-ui-materialui/src/button/ListButton.js
@@ -2,28 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ActionList from '@material-ui/icons/List';
 import { Link } from 'react-router-dom';
+import { ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 
 const ListButton = ({
     basePath = '',
     label = 'ra.action.list',
-    icon,
+    icon: Icon = ActionList,
     ...rest
 }) => (
     <Button component={Link} to={basePath} label={label} {...rest}>
-        {icon}
+        <Icon />
     </Button>
 );
 
 ListButton.propTypes = {
     basePath: PropTypes.string,
     label: PropTypes.string,
-    icon: PropTypes.element,
-};
-
-ListButton.defaultProps = {
-    icon: <ActionList />,
+    icon: ComponentPropType,
 };
 
 export default ListButton;
diff --git a/packages/ra-ui-materialui/src/button/RefreshButton.js b/packages/ra-ui-materialui/src/button/RefreshButton.js
index a75ce9e39f8..be937f12555 100644
--- a/packages/ra-ui-materialui/src/button/RefreshButton.js
+++ b/packages/ra-ui-materialui/src/button/RefreshButton.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import NavigationRefresh from '@material-ui/icons/Refresh';
-import { refreshView as refreshViewAction } from 'ra-core';
+import { refreshView as refreshViewAction, ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 
@@ -10,12 +10,12 @@ class RefreshButton extends Component {
     static propTypes = {
         label: PropTypes.string,
         refreshView: PropTypes.func.isRequired,
-        icon: PropTypes.element,
+        icon: ComponentPropType,
     };
 
     static defaultProps = {
         label: 'ra.action.refresh',
-        icon: <NavigationRefresh />,
+        icon: NavigationRefresh,
     };
 
     handleClick = event => {
@@ -29,11 +29,11 @@ class RefreshButton extends Component {
     };
 
     render() {
-        const { label, refreshView, icon, ...rest } = this.props;
+        const { label, refreshView, icon: Icon, ...rest } = this.props;
 
         return (
             <Button label={label} onClick={this.handleClick} {...rest}>
-                {icon}
+                <Icon />
             </Button>
         );
     }
diff --git a/packages/ra-ui-materialui/src/button/RefreshIconButton.js b/packages/ra-ui-materialui/src/button/RefreshIconButton.js
index c936bed37e8..5e725cd8170 100644
--- a/packages/ra-ui-materialui/src/button/RefreshIconButton.js
+++ b/packages/ra-ui-materialui/src/button/RefreshIconButton.js
@@ -5,7 +5,7 @@ import compose from 'recompose/compose';
 import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import NavigationRefresh from '@material-ui/icons/Refresh';
-import { refreshView, translate } from 'ra-core';
+import { refreshView, translate, ComponentPropType } from 'ra-core';
 
 class RefreshButton extends Component {
     static propTypes = {
@@ -13,12 +13,12 @@ class RefreshButton extends Component {
         label: PropTypes.string,
         refreshView: PropTypes.func.isRequired,
         translate: PropTypes.func.isRequired,
-        icon: PropTypes.element,
+        icon: ComponentPropType,
     };
 
     static defaultProps = {
         label: 'ra.action.refresh',
-        icon: <NavigationRefresh />,
+        icon: NavigationRefresh,
     };
 
     handleClick = event => {
@@ -37,7 +37,7 @@ class RefreshButton extends Component {
             label,
             refreshView,
             translate,
-            icon,
+            icon: Icon,
             ...rest
         } = this.props;
 
@@ -50,7 +50,7 @@ class RefreshButton extends Component {
                     onClick={this.handleClick}
                     {...rest}
                 >
-                    {icon}
+                    <Icon />
                 </IconButton>
             </Tooltip>
         );
diff --git a/packages/ra-ui-materialui/src/button/SaveButton.js b/packages/ra-ui-materialui/src/button/SaveButton.js
index 4de6ae97174..6a5d44f8b56 100644
--- a/packages/ra-ui-materialui/src/button/SaveButton.js
+++ b/packages/ra-ui-materialui/src/button/SaveButton.js
@@ -7,7 +7,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import ContentSave from '@material-ui/icons/Save';
 import classnames from 'classnames';
-import { showNotification, translate } from 'ra-core';
+import { showNotification, translate, ComponentPropType } from 'ra-core';
 
 const styles = createStyles({
     button: {
@@ -57,12 +57,12 @@ export class SaveButton extends Component {
         submitOnEnter: PropTypes.bool,
         translate: PropTypes.func.isRequired,
         variant: PropTypes.oneOf(['raised', 'flat', 'fab']),
-        icon: PropTypes.element,
+        icon: ComponentPropType,
     };
 
     static defaultProps = {
         handleSubmitWithRedirect: () => () => {},
-        icon: <ContentSave />,
+        icon: ContentSave,
     };
 
     handleClick = e => {
@@ -106,7 +106,7 @@ export class SaveButton extends Component {
             submitOnEnter,
             translate,
             variant = 'contained',
-            icon,
+            icon: Icon,
             onClick,
             ...rest
         } = this.props;
@@ -128,9 +128,7 @@ export class SaveButton extends Component {
                         className={classes.iconPaddingStyle}
                     />
                 ) : (
-                    React.cloneElement(icon, {
-                        className: classes.iconPaddingStyle,
-                    })
+                    <Icon className={classes.iconPaddingStyle} />
                 )}
                 {label && translate(label, { _: label })}
             </Button>
diff --git a/packages/ra-ui-materialui/src/button/ShowButton.js b/packages/ra-ui-materialui/src/button/ShowButton.js
index dfe69d00f3e..22c035f7c24 100644
--- a/packages/ra-ui-materialui/src/button/ShowButton.js
+++ b/packages/ra-ui-materialui/src/button/ShowButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import shouldUpdate from 'recompose/shouldUpdate';
 import ImageEye from '@material-ui/icons/RemoveRedEye';
 import { Link } from 'react-router-dom';
-import { linkToRecord } from 'ra-core';
+import { linkToRecord, ComponentPropType } from 'ra-core';
 
 import Button from './Button';
 
@@ -14,7 +14,7 @@ const ShowButton = ({
     basePath = '',
     label = 'ra.action.show',
     record = {},
-    icon = <ImageEye />,
+    icon: Icon = ImageEye,
     ...rest
 }) => (
     <Button
@@ -24,7 +24,7 @@ const ShowButton = ({
         onClick={stopPropagation}
         {...rest}
     >
-        {icon}
+        <Icon />
     </Button>
 );
 
@@ -32,7 +32,7 @@ ShowButton.propTypes = {
     basePath: PropTypes.string,
     label: PropTypes.string,
     record: PropTypes.object,
-    icon: PropTypes.element,
+    icon: ComponentPropType,
 };
 
 const enhance = shouldUpdate(
diff --git a/packages/ra-ui-materialui/src/detail/Create.js b/packages/ra-ui-materialui/src/detail/Create.js
index fd55fd942c6..5e3e9c946c1 100644
--- a/packages/ra-ui-materialui/src/detail/Create.js
+++ b/packages/ra-ui-materialui/src/detail/Create.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { CreateController } from 'ra-core';
+import { CreateController, ComponentPropType } from 'ra-core';
 
 import TitleForRecord from '../layout/TitleForRecord';
+import { TitlePropType } from '../layout';
 
 const styles = createStyles({
     root: {},
@@ -44,8 +45,8 @@ const sanitizeRestProps = ({
 
 export const CreateView = withStyles(styles)(
     ({
-        actions,
-        aside,
+        actions: Actions,
+        aside: Aside,
         basePath,
         children,
         classes,
@@ -69,16 +70,16 @@ export const CreateView = withStyles(styles)(
                 record={record}
                 defaultTitle={defaultTitle}
             />
-            {actions &&
-                cloneElement(actions, {
-                    basePath,
-                    resource,
-                    hasList,
-                    ...actions.props,
-                })}
+            {Actions &&
+                <Actions
+                    basePath={basePath}
+                    hasList={hasList}
+                    resource={resource}
+                />
+            }
             <div
                 className={classnames(classes.main, {
-                    [classes.noActions]: !actions,
+                    [classes.noActions]: !Actions,
                 })}
             >
                 <Card className={classes.card}>
@@ -93,21 +94,22 @@ export const CreateView = withStyles(styles)(
                         save,
                     })}
                 </Card>
-                {aside &&
-                    cloneElement(aside, {
-                        basePath,
-                        record,
-                        resource,
-                        save,
-                    })}
+                {Aside &&
+                    <Aside
+                        basePath={basePath}
+                        record={record}
+                        resource={resource}
+                        save={save}
+                    />
+                }
             </div>
         </div>
     )
 );
 
 CreateView.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.node,
+    actions: ComponentPropType,
+    aside: ComponentPropType,
     basePath: PropTypes.string,
     children: PropTypes.element,
     classes: PropTypes.object,
@@ -119,7 +121,7 @@ CreateView.propTypes = {
     redirect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     resource: PropTypes.string,
     save: PropTypes.func,
-    title: PropTypes.any,
+    title: TitlePropType,
 };
 
 CreateView.defaultProps = {
@@ -174,8 +176,8 @@ const Create = props => (
 );
 
 Create.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.node,
+    actions: ComponentPropType,
+    aside: ComponentPropType,
     children: PropTypes.element,
     classes: PropTypes.object,
     className: PropTypes.string,
@@ -183,7 +185,7 @@ Create.propTypes = {
     hasEdit: PropTypes.bool,
     hasShow: PropTypes.bool,
     resource: PropTypes.string.isRequired,
-    title: PropTypes.any,
+    title: TitlePropType,
     record: PropTypes.object,
     hasList: PropTypes.bool,
 };
diff --git a/packages/ra-ui-materialui/src/detail/Create.spec.js b/packages/ra-ui-materialui/src/detail/Create.spec.js
index e06a72e791c..0fe0c04ee4c 100644
--- a/packages/ra-ui-materialui/src/detail/Create.spec.js
+++ b/packages/ra-ui-materialui/src/detail/Create.spec.js
@@ -20,7 +20,7 @@ describe('<Create />', () => {
         const Dummy = () => <div />;
         const Aside = () => <div id="aside">Hello</div>;
         const { queryAllByText } = renderWithRedux(
-            <Create {...defaultCreateProps} aside={<Aside />}>
+            <Create {...defaultCreateProps} aside={Aside}>
                 <Dummy />
             </Create>
         );
diff --git a/packages/ra-ui-materialui/src/detail/CreateActions.js b/packages/ra-ui-materialui/src/detail/CreateActions.js
index c274a7d54f1..30aa24506da 100644
--- a/packages/ra-ui-materialui/src/detail/CreateActions.js
+++ b/packages/ra-ui-materialui/src/detail/CreateActions.js
@@ -17,7 +17,7 @@ const sanitizeRestProps = ({
  *
  * Internal component. If you want to add or remove actions for a Create view,
  * write your own CreateActions Component. Then, in the <Create> component,
- * use it in the `actions` prop to pas a custom element.
+ * use it in the `actions` prop to pass a custom component.
  *
  * @example
  *     import Button from '@material-ui/core/Button';
@@ -32,7 +32,7 @@ const sanitizeRestProps = ({
  *     );
  *
  *     export const PostCreate = (props) => (
- *         <Create actions={<PostCreateActions />} {...props}>
+ *         <Create actions={PostCreateActions} {...props}>
  *             ...
  *         </Create>
  *     );
diff --git a/packages/ra-ui-materialui/src/detail/Edit.js b/packages/ra-ui-materialui/src/detail/Edit.js
index bb5b403de2a..6c64a921664 100644
--- a/packages/ra-ui-materialui/src/detail/Edit.js
+++ b/packages/ra-ui-materialui/src/detail/Edit.js
@@ -4,10 +4,11 @@ import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { EditController } from 'ra-core';
+import { EditController, ComponentPropType } from 'ra-core';
 
 import DefaultActions from './EditActions';
 import TitleForRecord from '../layout/TitleForRecord';
+import { TitlePropType } from '../layout';
 
 export const styles = createStyles({
     root: {},
@@ -53,8 +54,8 @@ const sanitizeRestProps = ({
 
 export const EditView = withStyles(styles)(
     ({
-        actions,
-        aside,
+        actions: Actions,
+        aside: Aside,
         basePath,
         children,
         classes,
@@ -71,8 +72,8 @@ export const EditView = withStyles(styles)(
         version,
         ...rest
     }) => {
-        if (typeof actions === 'undefined' && hasShow) {
-            actions = <DefaultActions />;
+        if (typeof Actions === 'undefined' && hasShow) {
+            Actions = DefaultActions;
         }
         if (!children) {
             return null;
@@ -87,18 +88,18 @@ export const EditView = withStyles(styles)(
                     record={record}
                     defaultTitle={defaultTitle}
                 />
-                {actions &&
-                    cloneElement(actions, {
-                        basePath,
-                        data: record,
-                        hasShow,
-                        hasList,
-                        resource,
-                        ...actions.props,
-                    })}
+                {Actions &&
+                    <Actions
+                        basePath={basePath}
+                        data={record}
+                        hasList={hasList}
+                        hasShow={hasShow}
+                        resource={resource}
+                    />
+                }
                 <div
                     className={classnames(classes.main, {
-                        [classes.noActions]: !actions,
+                        [classes.noActions]: !Actions,
                     })}
                 >
                     <Card className={classes.card}>
@@ -120,13 +121,15 @@ export const EditView = withStyles(styles)(
                             <CardContent>&nbsp;</CardContent>
                         )}
                     </Card>
-                    {aside &&
-                        React.cloneElement(aside, {
-                            basePath,
-                            record,
-                            resource,
-                            version,
-                        })}
+                    {Aside &&
+                        <Aside
+                            basePath={basePath}
+                            record={record}
+                            resource={resource}
+                            version={version}
+                            save={save}
+                        />
+                    }
                 </div>
             </div>
         );
@@ -134,8 +137,8 @@ export const EditView = withStyles(styles)(
 );
 
 EditView.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.node,
+    actions: ComponentPropType,
+    aside: ComponentPropType,
     basePath: PropTypes.string,
     children: PropTypes.element,
     classes: PropTypes.object,
@@ -147,7 +150,7 @@ EditView.propTypes = {
     redirect: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     resource: PropTypes.string,
     save: PropTypes.func,
-    title: PropTypes.any,
+    title: TitlePropType,
     version: PropTypes.number,
 };
 
@@ -204,8 +207,8 @@ const Edit = props => (
 );
 
 Edit.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.node,
+    actions: ComponentPropType,
+    aside: ComponentPropType,
     children: PropTypes.node,
     classes: PropTypes.object,
     className: PropTypes.string,
@@ -215,7 +218,7 @@ Edit.propTypes = {
     hasList: PropTypes.bool,
     id: PropTypes.any.isRequired,
     resource: PropTypes.string.isRequired,
-    title: PropTypes.any,
+    title: TitlePropType,
 };
 
 export default Edit;
diff --git a/packages/ra-ui-materialui/src/detail/Edit.spec.js b/packages/ra-ui-materialui/src/detail/Edit.spec.js
index 9949fb6b7ca..61ab374f28b 100644
--- a/packages/ra-ui-materialui/src/detail/Edit.spec.js
+++ b/packages/ra-ui-materialui/src/detail/Edit.spec.js
@@ -19,7 +19,7 @@ describe('<Edit />', () => {
     it('should display aside component', () => {
         const Aside = () => <div id="aside">Hello</div>;
         const { queryAllByText } = renderWithRedux(
-            <Edit {...defaultEditProps} aside={<Aside />}>
+            <Edit {...defaultEditProps} aside={Aside}>
                 <div />
             </Edit>
         );
diff --git a/packages/ra-ui-materialui/src/detail/EditActions.js b/packages/ra-ui-materialui/src/detail/EditActions.js
index 5fe863ade3c..104f9927c9d 100644
--- a/packages/ra-ui-materialui/src/detail/EditActions.js
+++ b/packages/ra-ui-materialui/src/detail/EditActions.js
@@ -19,7 +19,7 @@ const sanitizeRestProps = ({
  *
  * Internal component. If you want to add or remove actions for a Edit view,
  * write your own EditActions Component. Then, in the <Edit> component,
- * use it in the `actions` prop to pas a custom element.
+ * use it in the `actions` prop to pass a custom component.
  *
  * @example
  *     import Button from '@material-ui/core/Button';
@@ -34,7 +34,7 @@ const sanitizeRestProps = ({
  *     );
  *
  *     export const PostEdit = (props) => (
- *         <Edit actions={<PostEditActions />} {...props}>
+ *         <Edit actions={PostEditActions} {...props}>
  *             ...
  *         </Edit>
  *     );
diff --git a/packages/ra-ui-materialui/src/detail/Show.js b/packages/ra-ui-materialui/src/detail/Show.js
index f09a25b7895..4d86121e3d9 100644
--- a/packages/ra-ui-materialui/src/detail/Show.js
+++ b/packages/ra-ui-materialui/src/detail/Show.js
@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { ShowController } from 'ra-core';
+import { ShowController, ComponentPropType } from 'ra-core';
 
 import DefaultActions from './ShowActions';
 import TitleForRecord from '../layout/TitleForRecord';
+import { TitlePropType } from '../layout';
 
 export const styles = createStyles({
     root: {},
@@ -49,8 +50,8 @@ const sanitizeRestProps = ({
 
 export const ShowView = withStyles(styles)(
     ({
-        actions,
-        aside,
+        actions: Actions,
+        aside: Aside,
         basePath,
         children,
         classes,
@@ -65,8 +66,8 @@ export const ShowView = withStyles(styles)(
         version,
         ...rest
     }) => {
-        if (typeof actions === 'undefined' && hasEdit) {
-            actions = <DefaultActions />;
+        if (typeof Actions === 'undefined' && hasEdit) {
+            Actions = DefaultActions;
         }
         if (!children) {
             return null;
@@ -81,18 +82,18 @@ export const ShowView = withStyles(styles)(
                     record={record}
                     defaultTitle={defaultTitle}
                 />
-                {actions &&
-                    cloneElement(actions, {
-                        basePath,
-                        data: record,
-                        hasList,
-                        hasEdit,
-                        resource,
-                        ...actions.props,
-                    })}
+                {Actions &&
+                    <Actions
+                        basePath={basePath}
+                        data={record}
+                        hasList={hasList}
+                        hasEdit={hasEdit}
+                        resource={resource}
+                    />
+                }
                 <div
                     className={classnames(classes.main, {
-                        [classes.noActions]: !actions,
+                        [classes.noActions]: !Actions,
                     })}
                 >
                     <Card className={classes.card}>
@@ -104,13 +105,14 @@ export const ShowView = withStyles(styles)(
                                 version,
                             })}
                     </Card>
-                    {aside &&
-                        cloneElement(aside, {
-                            resource,
-                            basePath,
-                            record,
-                            version,
-                        })}
+                    {Aside &&
+                        <Aside
+                            basePath={basePath}
+                            record={record}
+                            resource={resource}
+                            version={version}
+                        />
+                    }
                 </div>
             </div>
         );
@@ -118,8 +120,8 @@ export const ShowView = withStyles(styles)(
 );
 
 ShowView.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.node,
+    actions: ComponentPropType,
+    aside: ComponentPropType,
     basePath: PropTypes.string,
     children: PropTypes.element,
     classes: PropTypes.object,
@@ -131,7 +133,7 @@ ShowView.propTypes = {
     record: PropTypes.object,
     resource: PropTypes.string,
     title: PropTypes.any,
-    version: PropTypes.number,
+    version: TitlePropType,
 };
 
 ShowView.defaultProps = {
@@ -187,8 +189,8 @@ const Show = props => (
 );
 
 Show.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.node,
+    actions: ComponentPropType,
+    aside: ComponentPropType,
     children: PropTypes.element,
     classes: PropTypes.object,
     className: PropTypes.string,
@@ -198,7 +200,7 @@ Show.propTypes = {
     hasShow: PropTypes.bool,
     id: PropTypes.any.isRequired,
     resource: PropTypes.string.isRequired,
-    title: PropTypes.any,
+    title: TitlePropType,
 };
 
 export default Show;
diff --git a/packages/ra-ui-materialui/src/detail/Show.spec.js b/packages/ra-ui-materialui/src/detail/Show.spec.js
index 655b7d33f8a..675c51db057 100644
--- a/packages/ra-ui-materialui/src/detail/Show.spec.js
+++ b/packages/ra-ui-materialui/src/detail/Show.spec.js
@@ -19,7 +19,7 @@ describe('<Show />', () => {
     it('should display aside component', () => {
         const Aside = () => <div id="aside">Hello</div>;
         const { queryAllByText } = renderWithRedux(
-            <Show {...defaultShowProps} aside={<Aside />}>
+            <Show {...defaultShowProps} aside={Aside}>
                 <div />
             </Show>
         );
diff --git a/packages/ra-ui-materialui/src/detail/ShowActions.js b/packages/ra-ui-materialui/src/detail/ShowActions.js
index 87466b0deab..93502b02a89 100644
--- a/packages/ra-ui-materialui/src/detail/ShowActions.js
+++ b/packages/ra-ui-materialui/src/detail/ShowActions.js
@@ -19,7 +19,7 @@ const sanitizeRestProps = ({
  *
  * Internal component. If you want to add or remove actions for a Show view,
  * write your own ShowActions Component. Then, in the <Show> component,
- * use it in the `actions` prop to pas a custom element.
+ * use it in the `actions` prop to pass a custom component.
  *
  * @example
  *     import Button from '@material-ui/core/Button';
@@ -34,7 +34,7 @@ const sanitizeRestProps = ({
  *     );
  *
  *     export const PostShow = (props) => (
- *         <Show actions={<PostShowActions />} {...props}>
+ *         <Show actions={PostShowActions} {...props}>
  *             ...
  *         </Show>
  *     );
diff --git a/packages/ra-ui-materialui/src/detail/Tab.js b/packages/ra-ui-materialui/src/detail/Tab.js
index fd353f74cc1..59e9f662cf0 100644
--- a/packages/ra-ui-materialui/src/detail/Tab.js
+++ b/packages/ra-ui-materialui/src/detail/Tab.js
@@ -2,7 +2,7 @@ import React, { Component, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import MuiTab from '@material-ui/core/Tab';
-import { translate } from 'ra-core';
+import { translate, ComponentPropType } from 'ra-core';
 import classnames from 'classnames';
 
 import Labeled from '../input/Labeled';
@@ -22,7 +22,7 @@ const sanitizeRestProps = ({
  * The `<Tab>` component accepts the following props:
  *
  * - label: The string displayed for each tab
- * - icon: The icon to show before the label (optional). Must be an element.
+ * - icon: The icon to show before the label (optional). Must be a component.
  *
  * @example
  *     // in src/posts.js
@@ -34,11 +34,11 @@ const sanitizeRestProps = ({
  *     export const PostShow = (props) => (
  *         <Show {...props}>
  *             <TabbedShowLayout>
- *                 <Tab label="Content" icon={<FavoriteIcon />}>
+ *                 <Tab label="Content" icon={FavoriteIcon}>
  *                     <TextField source="title" />
  *                     <TextField source="subtitle" />
  *                </Tab>
- *                 <Tab label="Metadata" icon={<PersonIcon />}>
+ *                 <Tab label="Metadata" icon={PersonIcon}>
  *                     <TextField source="category" />
  *                </Tab>
  *             </TabbedShowLayout>
@@ -59,12 +59,12 @@ const sanitizeRestProps = ({
  *     export default App;
  */
 class Tab extends Component {
-    renderHeader = ({ className, label, icon, value, translate, ...rest }) => (
+    renderHeader = ({ className, label, icon: Icon, value, translate, ...rest }) => (
         <MuiTab
             key={label}
             label={translate(label, { _: label })}
             value={value}
-            icon={icon}
+            icon={Icon ? <Icon /> : null}
             className={classnames('show-tab', className)}
             component={Link}
             to={value}
@@ -128,7 +128,7 @@ Tab.propTypes = {
     contentClassName: PropTypes.string,
     children: PropTypes.node,
     context: PropTypes.oneOf(['header', 'content']),
-    icon: PropTypes.element,
+    icon: ComponentPropType,
     label: PropTypes.string.isRequired,
     translate: PropTypes.func.isRequired,
     value: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js
index 5ef73bdb5d3..c0d9133a053 100644
--- a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js
+++ b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Divider from '@material-ui/core/Divider';
 import { withRouter, Route } from 'react-router-dom';
 import compose from 'recompose/compose';
-import { translate } from 'ra-core';
+import { translate, ComponentPropType } from 'ra-core';
 
 import CardContentInner from '../layout/CardContentInner';
 import TabbedShowLayoutTabs from './TabbedShowLayoutTabs';
@@ -79,7 +79,7 @@ export class TabbedShowLayout extends Component {
             translate,
             version,
             value,
-            tabs,
+            tabs: Tabs,
             ...rest
         } = this.props;
 
@@ -89,16 +89,15 @@ export class TabbedShowLayout extends Component {
                 key={version}
                 {...sanitizeRestProps(rest)}
             >
-                {cloneElement(
-                    tabs,
-                    {
-                        // The location pathname will contain the page path including the current tab path
-                        // so we can use it as a way to determine the current tab
-                        value: location.pathname,
-                        match,
-                    },
-                    children
-                )}
+                <Tabs
+                    // The location pathname will contain the page path including the current tab path
+                    // so we can use it as a way to determine the current tab
+                    value={location.pathname}
+                    match={match}
+                >
+                    {children}
+                </Tabs>
+                
                 <Divider />
                 <CardContentInner>
                     {Children.map(
@@ -136,11 +135,11 @@ TabbedShowLayout.propTypes = {
     value: PropTypes.number,
     version: PropTypes.number,
     translate: PropTypes.func,
-    tabs: PropTypes.element.isRequired,
+    tabs: ComponentPropType,
 };
 
 TabbedShowLayout.defaultProps = {
-    tabs: <TabbedShowLayoutTabs />,
+    tabs: TabbedShowLayoutTabs,
 };
 
 const enhance = compose(
diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.js b/packages/ra-ui-materialui/src/field/ReferenceManyField.js
index 0da072d0abd..b31728376e1 100644
--- a/packages/ra-ui-materialui/src/field/ReferenceManyField.js
+++ b/packages/ra-ui-materialui/src/field/ReferenceManyField.js
@@ -1,6 +1,6 @@
 import React, { Fragment, cloneElement, Children } from 'react';
 import PropTypes from 'prop-types';
-import { ReferenceManyFieldController } from 'ra-core';
+import { ReferenceManyFieldController, ComponentPropType } from 'ra-core';
 
 export const ReferenceManyFieldView = ({
     children,
@@ -10,7 +10,7 @@ export const ReferenceManyFieldView = ({
     ids,
     loadedOnce,
     page,
-    pagination,
+    pagination: Pagination,
     perPage,
     reference,
     referenceBasePath,
@@ -31,15 +31,16 @@ export const ReferenceManyFieldView = ({
             setSort,
             total,
         })}
-        {pagination &&
+        {Pagination &&
             total !== undefined &&
-            cloneElement(pagination, {
-                page,
-                perPage,
-                setPage,
-                setPerPage,
-                total,
-            })}
+            <Pagination
+                page={page}
+                perPage={perPage}
+                setPage={setPage}
+                setPerPage={setPerPage}
+                total={total}
+            />
+        }
     </Fragment>
 );
 
@@ -53,7 +54,7 @@ ReferenceManyFieldView.propTypes = {
     data: PropTypes.object,
     ids: PropTypes.array,
     loadedOnce: PropTypes.bool,
-    pagination: PropTypes.element,
+    pagination: ComponentPropType,
     reference: PropTypes.string,
     referenceBasePath: PropTypes.string,
     setSort: PropTypes.func,
diff --git a/packages/ra-ui-materialui/src/field/SelectField.spec.js b/packages/ra-ui-materialui/src/field/SelectField.spec.js
index c1e66c84e9b..5dc79a2abda 100644
--- a/packages/ra-ui-materialui/src/field/SelectField.spec.js
+++ b/packages/ra-ui-materialui/src/field/SelectField.spec.js
@@ -85,25 +85,13 @@ describe('<SelectField />', () => {
         expect(queryAllByText('hello')).toHaveLength(1);
     });
 
-    it('should use optionText with a function value as text identifier', () => {
-        const { queryAllByText } = render(
-            <SelectField
-                {...defaultProps}
-                record={{ foo: 0 }}
-                optionText={choice => choice.foobar}
-                choices={[{ id: 0, foobar: 'hello' }]}
-            />
-        );
-        expect(queryAllByText('hello')).toHaveLength(1);
-    });
-
-    it('should use optionText with an element value as text identifier', () => {
+    it('should use optionText with a component value as text identifier', () => {
         const Foobar = ({ record }) => <span>{record.foobar}</span>;
         const { queryAllByText } = render(
             <SelectField
                 {...defaultProps}
                 record={{ foo: 0 }}
-                optionText={<Foobar />}
+                optionText={Foobar}
                 choices={[{ id: 0, foobar: 'hello' }]}
             />
         );
diff --git a/packages/ra-ui-materialui/src/field/SelectField.tsx b/packages/ra-ui-materialui/src/field/SelectField.tsx
index e8145e1508b..4149fe7f84a 100644
--- a/packages/ra-ui-materialui/src/field/SelectField.tsx
+++ b/packages/ra-ui-materialui/src/field/SelectField.tsx
@@ -1,9 +1,8 @@
-import React, { SFC, ReactElement } from 'react';
+import React, { SFC, createElement, ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import pure from 'recompose/pure';
-import compose from 'recompose/compose';
-import { useTranslate } from 'ra-core';
+import { useTranslate, ComponentPropType } from 'ra-core';
 import Typography from '@material-ui/core/Typography';
 
 import sanitizeRestProps from './sanitizeRestProps';
@@ -14,13 +13,12 @@ interface Choice {
     name: string;
 }
 
-type OptionTextElement = ReactElement<{ record: Choice }>;
-type OptionText = (choice: Choice) => string | OptionTextElement;
+type OptionTextElement = ComponentType<{ record: Choice }>;
 
 interface Props extends FieldProps {
     choices: Choice[];
     optionValue: string;
-    optionText: OptionTextElement | OptionText | string;
+    optionText: OptionTextElement | string;
     translateChoice: boolean;
 }
 
@@ -50,16 +48,7 @@ interface Props extends FieldProps {
  * ];
  * <SelectField source="author_id" choices={choices} optionText="full_name" optionValue="_id" />
  *
- * `optionText` also accepts a function, so you can shape the option text at will:
- * @example
- * const choices = [
- *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
- *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
- * ];
- * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
- * <SelectField source="author_id" choices={choices} optionText={optionRenderer} />
- *
- * `optionText` also accepts a React Element, that will be cloned and receive
+ * `optionText` also accepts a React component, that will be cloned and receive
  * the related choice as the `record` prop. You can use Field components there.
  * @example
  * const choices = [
@@ -67,7 +56,7 @@ interface Props extends FieldProps {
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
  * const FullNameField = ({ record }) => <Chip>{record.first_name} {record.last_name}</Chip>;
- * <SelectField source="gender" choices={choices} optionText={<FullNameField />}/>
+ * <SelectField source="gender" choices={choices} optionText={FullNameField}/>
  *
  * The current choice is translated by default, so you can use translation identifiers as choices:
  * @example
@@ -99,11 +88,10 @@ export const SelectField: SFC<Props & InjectedFieldProps> = ({
     if (!choice) {
         return null;
     }
-    const choiceName = React.isValidElement(optionText) // eslint-disable-line no-nested-ternary
-        ? React.cloneElement(optionText, { record: choice })
-        : typeof optionText === 'function'
-        ? optionText(choice)
-        : choice[optionText];
+    const choiceName =
+        typeof optionText === 'string' // eslint-disable-line no-nested-ternary
+            ? choice[optionText]
+            : createElement(optionText, { record: choice });
     return (
         <Typography
             component="span"
@@ -134,11 +122,7 @@ EnhancedSelectField.propTypes = {
     ...Typography.propTypes,
     ...fieldPropTypes,
     choices: PropTypes.arrayOf(PropTypes.object).isRequired,
-    optionText: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.func,
-        PropTypes.element,
-    ]),
+    optionText: PropTypes.oneOfType([PropTypes.string, ComponentPropType]),
     optionValue: PropTypes.string,
     translateChoice: PropTypes.bool,
 };
diff --git a/packages/ra-ui-materialui/src/form/SimpleForm.js b/packages/ra-ui-materialui/src/form/SimpleForm.js
index a08653d1ab0..debcd544dfc 100644
--- a/packages/ra-ui-materialui/src/form/SimpleForm.js
+++ b/packages/ra-ui-materialui/src/form/SimpleForm.js
@@ -4,7 +4,7 @@ import { reduxForm } from 'redux-form';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import classnames from 'classnames';
-import { getDefaultValues, translate, REDUX_FORM_NAME } from 'ra-core';
+import { getDefaultValues, translate, REDUX_FORM_NAME, ComponentPropType } from 'ra-core';
 
 import FormInput from './FormInput';
 import Toolbar from './Toolbar';
@@ -69,7 +69,7 @@ export class SimpleForm extends Component {
             resource,
             saving,
             submitOnEnter,
-            toolbar,
+            toolbar: Toolbar,
             undoable,
             version,
             ...rest
@@ -90,20 +90,21 @@ export class SimpleForm extends Component {
                         />
                     ))}
                 </CardContentInner>
-                {toolbar &&
-                    React.cloneElement(toolbar, {
-                        basePath,
-                        handleSubmitWithRedirect: this.handleSubmitWithRedirect,
-                        handleSubmit: this.props.handleSubmit,
-                        invalid,
-                        pristine,
-                        record,
-                        redirect,
-                        resource,
-                        saving,
-                        submitOnEnter,
-                        undoable,
-                    })}
+                {Toolbar &&
+                    <Toolbar
+                        basePath={basePath}
+                        handleSubmitWithRedirect={this.handleSubmitWithRedirect}
+                        handleSubmit={this.props.handleSubmit}
+                        invalid={invalid}
+                        pristine={pristine}
+                        record={record}
+                        redirect={redirect}
+                        resource={resource}
+                        saving={saving}
+                        submitOnEnter={submitOnEnter}
+                        undoable={undoable}
+                    />
+                }
             </form>
         );
     }
@@ -127,7 +128,7 @@ SimpleForm.propTypes = {
     save: PropTypes.func, // the handler defined in the parent, which triggers the REST submission
     saving: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
     submitOnEnter: PropTypes.bool,
-    toolbar: PropTypes.element,
+    toolbar: ComponentPropType,
     undoable: PropTypes.bool,
     validate: PropTypes.func,
     version: PropTypes.number,
@@ -135,7 +136,7 @@ SimpleForm.propTypes = {
 
 SimpleForm.defaultProps = {
     submitOnEnter: true,
-    toolbar: <Toolbar />,
+    toolbar: Toolbar,
 };
 
 const enhance = compose(
diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.js b/packages/ra-ui-materialui/src/form/SimpleFormIterator.js
index f4aad671f7e..00f25cdbe88 100644
--- a/packages/ra-ui-materialui/src/form/SimpleFormIterator.js
+++ b/packages/ra-ui-materialui/src/form/SimpleFormIterator.js
@@ -71,7 +71,7 @@ export class SimpleFormIterator extends Component {
         super(props);
         // we need a unique id for each field for a proper enter/exit animation
         // but redux-form doesn't provide one (cf https://github.com/erikras/redux-form/issues/2735)
-        // so we keep an internal map between the field position and an autoincrement id
+        // so we keep an internal map between the field position and an auto-increment id
         this.nextId = props.fields.length
             ? props.fields.length
             : props.defaultValue
@@ -93,7 +93,7 @@ export class SimpleFormIterator extends Component {
 
     // Returns a boolean to indicate whether to disable the remove button for certain fields.
     // If disableRemove is a function, then call the function with the current record to
-    // determing if the button should be disabled. Otherwise, use a boolean property that
+    // determining if the button should be disabled. Otherwise, use a boolean property that
     // enables or disables the button for all of the fields.
     disableRemoveField = (record, disableRemove) => {
         if (typeof disableRemove === 'boolean') {
diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.js b/packages/ra-ui-materialui/src/form/TabbedForm.js
index 25c58dff8b1..6a9bca91eeb 100644
--- a/packages/ra-ui-materialui/src/form/TabbedForm.js
+++ b/packages/ra-ui-materialui/src/form/TabbedForm.js
@@ -13,7 +13,7 @@ import compose from 'recompose/compose';
 import Divider from '@material-ui/core/Divider';
 import Tabs from '@material-ui/core/Tabs';
 import { withStyles, createStyles } from '@material-ui/core/styles';
-import { getDefaultValues, translate, REDUX_FORM_NAME } from 'ra-core';
+import { getDefaultValues, translate, REDUX_FORM_NAME, ComponentPropType } from 'ra-core';
 
 import Toolbar from './Toolbar';
 import CardContentInner from '../layout/CardContentInner';
@@ -92,7 +92,7 @@ export class TabbedForm extends Component {
             saving,
             submitOnEnter,
             tabsWithErrors,
-            toolbar,
+            toolbar: Toolbar,
             translate,
             undoable,
             value,
@@ -189,21 +189,22 @@ export class TabbedForm extends Component {
                             )
                     )}
                 </CardContentInner>
-                {toolbar &&
-                    React.cloneElement(toolbar, {
-                        basePath,
-                        className: 'toolbar',
-                        handleSubmitWithRedirect: this.handleSubmitWithRedirect,
-                        handleSubmit: this.props.handleSubmit,
-                        invalid,
-                        pristine,
-                        record,
-                        redirect,
-                        resource,
-                        saving,
-                        submitOnEnter,
-                        undoable,
-                    })}
+                {Toolbar &&
+                    <Toolbar
+                        basePath={basePath}
+                        className="toolbar"
+                        handleSubmitWithRedirect={this.handleSubmitWithRedirect}
+                        handleSubmit={this.props.handleSubmit}
+                        invalid={invalid}
+                        pristine={pristine}
+                        record={record}
+                        redirect={redirect}
+                        resource={resource}
+                        saving={saving}
+                        submitOnEnter={submitOnEnter}
+                        undoable={undoable}
+                    />
+                }
             </form>
         );
     }
@@ -231,7 +232,7 @@ TabbedForm.propTypes = {
     saving: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
     submitOnEnter: PropTypes.bool,
     tabsWithErrors: PropTypes.arrayOf(PropTypes.string),
-    toolbar: PropTypes.element,
+    toolbar: ComponentPropType,
     translate: PropTypes.func,
     undoable: PropTypes.bool,
     validate: PropTypes.func,
@@ -241,7 +242,7 @@ TabbedForm.propTypes = {
 
 TabbedForm.defaultProps = {
     submitOnEnter: true,
-    toolbar: <Toolbar />,
+    toolbar: Toolbar,
 };
 
 const collectErrors = (state, props) => {
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js
index a7e9a0a5642..af389b43760 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import FormLabel from '@material-ui/core/FormLabel';
@@ -9,7 +9,7 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import Checkbox from '@material-ui/core/Checkbox';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import compose from 'recompose/compose';
-import { addField, translate, FieldTitle } from 'ra-core';
+import { addField, translate, FieldTitle, ComponentPropType } from 'ra-core';
 
 import defaultSanitizeRestProps from './sanitizeRestProps';
 const sanitizeRestProps = ({ setFilter, setPagination, setSort, ...rest }) =>
@@ -54,16 +54,7 @@ const styles = theme => createStyles({
  * ];
  * <CheckboxGroupInput source="recipients" choices={choices} optionText="full_name" optionValue="_id" />
  *
- * `optionText` also accepts a function, so you can shape the option text at will:
- * @example
- * const choices = [
- *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
- *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
- * ];
- * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
- * <CheckboxGroupInput source="recipients" choices={choices} optionText={optionRenderer} />
- *
- * `optionText` also accepts a React Element, that will be cloned and receive
+ * `optionText` also accepts a React component, that will be cloned and receive
  * the related choice as the `record` prop. You can use Field components there.
  * @example
  * const choices = [
@@ -71,7 +62,7 @@ const styles = theme => createStyles({
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
  * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
- * <CheckboxGroupInput source="recipients" choices={choices} optionText={<FullNameField />}/>
+ * <CheckboxGroupInput source="recipients" choices={choices} optionText={FullNameField}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
@@ -119,11 +110,9 @@ export class CheckboxGroupInput extends Component {
             translateChoice,
             classes,
         } = this.props;
-        const choiceName = React.isValidElement(optionText) // eslint-disable-line no-nested-ternary
-            ? React.cloneElement(optionText, { record: choice })
-            : typeof optionText === 'function'
-            ? optionText(choice)
-            : get(choice, optionText);
+        const choiceName = typeof optionText === 'string' // eslint-disable-line no-nested-ternary
+            ? get(choice, optionText)
+            : createElement(optionText, { record: choice });
         return (
             <FormControlLabel
                 htmlFor={`${id}_${get(choice, optionValue)}`}
@@ -213,8 +202,7 @@ CheckboxGroupInput.propTypes = {
     isRequired: PropTypes.bool,
     optionText: PropTypes.oneOfType([
         PropTypes.string,
-        PropTypes.func,
-        PropTypes.element,
+        ComponentPropType,
     ]).isRequired,
     optionValue: PropTypes.string.isRequired,
     resource: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.js b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.js
index d5a9b6aab74..50e6b3e1df0 100644
--- a/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.js
+++ b/packages/ra-ui-materialui/src/input/CheckboxGroupInput.spec.js
@@ -98,25 +98,14 @@ describe('<CheckboxGroupInput />', () => {
         expect(queryByLabelText('Bar')).not.toBeNull();
     });
 
-    it('should use optionText with a function value as text identifier', () => {
-        const { queryByLabelText } = render(
-            <CheckboxGroupInput
-                {...defaultProps}
-                optionText={choice => choice.foobar}
-                choices={[{ id: 'foo', foobar: 'Bar' }]}
-            />
-        );
-        expect(queryByLabelText('Bar')).not.toBeNull();
-    });
-
-    it('should use optionText with an element value as text identifier', () => {
+    it('should use optionText with a component value as text identifier', () => {
         const Foobar = ({ record }) => (
             <span data-testid="label">{record.foobar}</span>
         );
         const { queryByLabelText, queryByTestId } = render(
             <CheckboxGroupInput
                 {...defaultProps}
-                optionText={<Foobar />}
+                optionText={Foobar}
                 choices={[{ id: 'foo', foobar: 'Bar' }]}
             />
         );
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js
index de59b1d2ea9..dced657f497 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import FormControl from '@material-ui/core/FormControl';
@@ -9,7 +9,7 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import compose from 'recompose/compose';
-import { addField, translate, FieldTitle } from 'ra-core';
+import { addField, translate, FieldTitle, ComponentPropType } from 'ra-core';
 
 import sanitizeRestProps from './sanitizeRestProps';
 
@@ -43,16 +43,7 @@ const styles = createStyles({
  * ];
  * <RadioButtonGroupInput source="author_id" choices={choices} optionText="full_name" optionValue="_id" />
  *
- * `optionText` also accepts a function, so you can shape the option text at will:
- * @example
- * const choices = [
- *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
- *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
- * ];
- * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
- * <RadioButtonGroupInput source="author_id" choices={choices} optionText={optionRenderer} />
- *
- * `optionText` also accepts a React Element, that will be cloned and receive
+ * `optionText` also accepts a React component, that will be cloned and receive
  * the related choice as the `record` prop. You can use Field components there.
  * @example
  * const choices = [
@@ -60,7 +51,7 @@ const styles = createStyles({
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
  * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
- * <RadioButtonGroupInput source="gender" choices={choices} optionText={<FullNameField />}/>
+ * <RadioButtonGroupInput source="gender" choices={choices} optionText={FullNameField}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
@@ -89,11 +80,9 @@ export class RadioButtonGroupInput extends Component {
             translateChoice,
             source,
         } = this.props;
-        const choiceName = React.isValidElement(optionText) // eslint-disable-line no-nested-ternary
-            ? React.cloneElement(optionText, { record: choice })
-            : typeof optionText === 'function'
-            ? optionText(choice)
-            : get(choice, optionText);
+        const choiceName = typeof optionText === 'string' // eslint-disable-line no-nested-ternary
+            ? get(choice, optionText)
+            : createElement(optionText, { record: choice });
 
         const nodeId = `${source}_${get(choice, optionValue)}`;
 
@@ -177,8 +166,7 @@ RadioButtonGroupInput.propTypes = {
     options: PropTypes.object,
     optionText: PropTypes.oneOfType([
         PropTypes.string,
-        PropTypes.func,
-        PropTypes.element,
+        ComponentPropType,
     ]).isRequired,
     optionValue: PropTypes.string.isRequired,
     resource: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.js b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.js
index 8ef3368e71b..86b5ea59a0d 100644
--- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.js
+++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.js
@@ -96,23 +96,12 @@ describe('<RadioButtonGroupInput />', () => {
         expect(queryByText('Male')).not.toBeNull();
     });
 
-    it('should use optionText with a function value as text identifier', () => {
-        const { queryByText } = render(
-            <RadioButtonGroupInput
-                {...defaultProps}
-                optionText={choice => choice.foobar}
-                choices={[{ id: 'M', foobar: 'Male' }]}
-            />
-        );
-        expect(queryByText('Male')).not.toBeNull();
-    });
-
-    it('should use optionText with an element value as text identifier', () => {
+    it('should use optionText with a component value as text identifier', () => {
         const Foobar = ({ record }) => <span>{record.foobar}</span>;
         const { queryByText } = render(
             <RadioButtonGroupInput
                 {...defaultProps}
-                optionText={<Foobar />}
+                optionText={Foobar}
                 choices={[{ id: 'M', foobar: 'Male' }]}
             />
         );
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.js b/packages/ra-ui-materialui/src/input/SelectArrayInput.js
index 784b25ce3d2..457c040368b 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.js
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import Select from '@material-ui/core/Select';
@@ -11,7 +11,7 @@ import Chip from '@material-ui/core/Chip';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import compose from 'recompose/compose';
 import classnames from 'classnames';
-import { addField, translate, FieldTitle } from 'ra-core';
+import { addField, translate, FieldTitle, ComponentPropType } from 'ra-core';
 
 const sanitizeRestProps = ({
     addLabel,
@@ -94,16 +94,7 @@ const styles = theme =>
  * ];
  * <SelectArrayInput source="authors" choices={choices} optionText="full_name" optionValue="_id" />
  *
- * `optionText` also accepts a function, so you can shape the option text at will:
- * @example
- * const choices = [
- *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
- *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
- * ];
- * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
- * <SelectArrayInput source="authors" choices={choices} optionText={optionRenderer} />
- *
- * `optionText` also accepts a React Element, that will be cloned and receive
+ * `optionText` also accepts a React component, that will be cloned and receive
  * the related choice as the `record` prop. You can use Field components there.
  * @example
  * const choices = [
@@ -111,7 +102,7 @@ const styles = theme =>
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
  * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
- * <SelectArrayInput source="authors" choices={choices} optionText={<FullNameField />}/>
+ * <SelectArrayInput source="authors" choices={choices} optionText={FullNameField}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
@@ -145,14 +136,12 @@ export class SelectArrayInput extends Component {
 
     renderMenuItemOption = choice => {
         const { optionText, translate, translateChoice } = this.props;
-        if (React.isValidElement(optionText))
-            return React.cloneElement(optionText, {
+        if (typeof optionText !== 'string')
+            return createElement(optionText, {
                 record: choice,
             });
-        const choiceName =
-            typeof optionText === 'function'
-                ? optionText(choice)
-                : get(choice, optionText);
+
+        const choiceName = get(choice, optionText);
         return translateChoice
             ? translate(choiceName, { _: choiceName })
             : choiceName;
@@ -258,8 +247,7 @@ SelectArrayInput.propTypes = {
     options: PropTypes.object,
     optionText: PropTypes.oneOfType([
         PropTypes.string,
-        PropTypes.func,
-        PropTypes.element,
+        ComponentPropType,
     ]).isRequired,
     optionValue: PropTypes.string.isRequired,
     resource: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.js b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.js
index e1c7338f156..e8a1f803cbc 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.js
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.spec.js
@@ -110,24 +110,12 @@ describe('<SelectArrayInput />', () => {
         expect(queryByText('Male')).not.toBeNull();
     });
 
-    it('should use optionText with a function value as text identifier', () => {
-        const { getByRole, queryByText } = render(
-            <SelectArrayInput
-                {...defaultProps}
-                optionText={choice => choice.foobar}
-                choices={[{ id: 'M', foobar: 'Male' }]}
-            />
-        );
-        getByRole('button').click();
-        expect(queryByText('Male')).not.toBeNull();
-    });
-
-    it('should use optionText with an element value as text identifier', () => {
+    it('should use optionText with a component value as text identifier', () => {
         const Foobar = ({ record }) => <span>{record.foobar}</span>;
         const { getByRole, queryByText } = render(
             <SelectArrayInput
                 {...defaultProps}
-                optionText={<Foobar />}
+                optionText={Foobar}
                 choices={[{ id: 'M', foobar: 'Male' }]}
             />
         );
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.js b/packages/ra-ui-materialui/src/input/SelectInput.js
index 26b3a49273e..0c3e3adc61e 100644
--- a/packages/ra-ui-materialui/src/input/SelectInput.js
+++ b/packages/ra-ui-materialui/src/input/SelectInput.js
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import MenuItem from '@material-ui/core/MenuItem';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import compose from 'recompose/compose';
-import { addField, translate, FieldTitle } from 'ra-core';
+import { addField, translate, FieldTitle, ComponentPropType } from 'ra-core';
 import ResettableTextField from './ResettableTextField';
 
 const sanitizeRestProps = ({
@@ -79,16 +79,7 @@ const styles = theme =>
  * ];
  * <SelectInput source="author_id" choices={choices} optionText="full_name" optionValue="_id" />
  *
- * `optionText` also accepts a function, so you can shape the option text at will:
- * @example
- * const choices = [
- *    { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
- *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
- * ];
- * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
- * <SelectInput source="author_id" choices={choices} optionText={optionRenderer} />
- *
- * `optionText` also accepts a React Element, that will be cloned and receive
+ * `optionText` also accepts a React component, that will be cloned and receive
  * the related choice as the `record` prop. You can use Field components there.
  * @example
  * const choices = [
@@ -96,7 +87,7 @@ const styles = theme =>
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
  * const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
- * <SelectInput source="gender" choices={choices} optionText={<FullNameField />}/>
+ * <SelectInput source="gender" choices={choices} optionText={FullNameField}/>
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
@@ -167,14 +158,12 @@ export class SelectInput extends Component {
     };
     renderMenuItemOption = choice => {
         const { optionText, translate, translateChoice } = this.props;
-        if (React.isValidElement(optionText))
-            return React.cloneElement(optionText, {
+        if (typeof optionText !== 'string')
+            return createElement(optionText, {
                 record: choice,
             });
-        const choiceName =
-            typeof optionText === 'function'
-                ? optionText(choice)
-                : get(choice, optionText);
+
+        const choiceName = get(choice, optionText);
         return translateChoice
             ? translate(choiceName, { _: choiceName })
             : choiceName;
@@ -256,8 +245,7 @@ SelectInput.propTypes = {
     options: PropTypes.object,
     optionText: PropTypes.oneOfType([
         PropTypes.string,
-        PropTypes.func,
-        PropTypes.element,
+        ComponentPropType,
     ]).isRequired,
     optionValue: PropTypes.string.isRequired,
     disableValue: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/input/SelectInput.spec.js b/packages/ra-ui-materialui/src/input/SelectInput.spec.js
index 93ec9c4f1a1..7b5cd9e8c70 100644
--- a/packages/ra-ui-materialui/src/input/SelectInput.spec.js
+++ b/packages/ra-ui-materialui/src/input/SelectInput.spec.js
@@ -202,28 +202,12 @@ describe('<SelectInput />', () => {
         assert.equal(MenuItemElement1.childAt(0).text(), 'Male');
     });
 
-    it('should use optionText with a function value as text identifier', () => {
-        const wrapper = shallow(
-            <SelectInput
-                {...defaultProps}
-                optionText={choice => choice.foobar}
-                choices={[{ id: 'M', foobar: 'Male' }]}
-            />
-        );
-        const MenuItemElements = wrapper.find(
-            'WithStyles(ForwardRef(MenuItem))'
-        );
-        const MenuItemElement1 = MenuItemElements.first();
-        assert.equal(MenuItemElement1.prop('value'), 'M');
-        assert.equal(MenuItemElement1.childAt(0).text(), 'Male');
-    });
-
-    it('should use optionText with an element value as text identifier', () => {
+    it('should use optionText with a component value as text identifier', () => {
         const Foobar = ({ record }) => <span>{record.foobar}</span>;
         const wrapper = shallow(
             <SelectInput
                 {...defaultProps}
-                optionText={<Foobar />}
+                optionText={Foobar}
                 choices={[{ id: 'M', foobar: 'Male' }]}
             />
         );
diff --git a/packages/ra-ui-materialui/src/layout/AppBar.js b/packages/ra-ui-materialui/src/layout/AppBar.js
index 166be124a47..36db741faae 100644
--- a/packages/ra-ui-materialui/src/layout/AppBar.js
+++ b/packages/ra-ui-materialui/src/layout/AppBar.js
@@ -1,4 +1,4 @@
-import React, { Children, cloneElement } from 'react';
+import React, { Children } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
@@ -10,10 +10,10 @@ import { withStyles, createStyles } from '@material-ui/core/styles';
 import MenuIcon from '@material-ui/icons/Menu';
 import withWidth from '@material-ui/core/withWidth';
 import compose from 'recompose/compose';
-import { toggleSidebar as toggleSidebarAction } from 'ra-core';
+import { toggleSidebar as toggleSidebarAction, ComponentPropType } from 'ra-core';
 
 import LoadingIndicator from './LoadingIndicator';
-import UserMenu from './UserMenu';
+import DefaultUserMenu from './UserMenu';
 import HideOnScroll from './HideOnScroll';
 
 const styles = theme =>
@@ -56,7 +56,7 @@ const AppBar = ({
     open,
     title,
     toggleSidebar,
-    userMenu,
+    userMenu: UserMenu,
     width,
     ...rest
 }) => (
@@ -92,7 +92,7 @@ const AppBar = ({
                     children
                 )}
                 <LoadingIndicator />
-                {cloneElement(userMenu, { logout })}
+                <UserMenu logout={logout} />
             </Toolbar>
         </MuiAppBar>
     </HideOnScroll>
@@ -102,17 +102,15 @@ AppBar.propTypes = {
     children: PropTypes.node,
     classes: PropTypes.object,
     className: PropTypes.string,
-    logout: PropTypes.element,
+    logout: ComponentPropType,
     open: PropTypes.bool,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-        .isRequired,
     toggleSidebar: PropTypes.func.isRequired,
-    userMenu: PropTypes.node,
+    userMenu: ComponentPropType,
     width: PropTypes.string,
 };
 
 AppBar.defaultProps = {
-    userMenu: <UserMenu />,
+    userMenu: DefaultUserMenu,
 };
 
 const enhance = compose(
diff --git a/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js b/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js
index d26fa745f23..1b43127c566 100644
--- a/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js
+++ b/packages/ra-ui-materialui/src/layout/DashboardMenuItem.js
@@ -12,7 +12,7 @@ const DashboardMenuItem = ({ className, locale, onClick, ...props }) => {
             onClick={onClick}
             to="/"
             primaryText={translate('ra.page.dashboard')}
-            leftIcon={<DashboardIcon />}
+            leftIcon={DashboardIcon}
             exact
             {...props}
         />
diff --git a/packages/ra-ui-materialui/src/layout/Error.js b/packages/ra-ui-materialui/src/layout/Error.js
index 7ff4457095c..48eba59ea23 100644
--- a/packages/ra-ui-materialui/src/layout/Error.js
+++ b/packages/ra-ui-materialui/src/layout/Error.js
@@ -12,6 +12,7 @@ import History from '@material-ui/icons/History';
 
 import Title from './Title';
 import { useTranslate } from 'ra-core';
+import { TitlePropType } from '.';
 
 const styles = theme =>
     createStyles({
@@ -93,7 +94,7 @@ Error.propTypes = {
     className: PropTypes.string,
     error: PropTypes.object.isRequired,
     errorInfo: PropTypes.object,
-    title: PropTypes.string,
+    title: TitlePropType,
 };
 
 export default withStyles(styles)(Error);
diff --git a/packages/ra-ui-materialui/src/layout/Layout.js b/packages/ra-ui-materialui/src/layout/Layout.js
index ebcbbbc374b..beb381d0f06 100644
--- a/packages/ra-ui-materialui/src/layout/Layout.js
+++ b/packages/ra-ui-materialui/src/layout/Layout.js
@@ -1,4 +1,4 @@
-import React, { Component, createElement } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
@@ -12,11 +12,11 @@ import { ThemeProvider } from '@material-ui/styles';
 import compose from 'recompose/compose';
 import { ComponentPropType } from 'ra-core';
 
-import AppBar from './AppBar';
-import Sidebar from './Sidebar';
-import Menu from './Menu';
-import Notification from './Notification';
-import Error from './Error';
+import DefaultAppBar from './AppBar';
+import DefaultSidebar from './Sidebar';
+import DefaultMenu from './Menu';
+import DefaultNotification from './Notification';
+import DefaultError from './Error';
 import defaultTheme from '../defaultTheme';
 
 const styles = theme =>
@@ -93,18 +93,18 @@ class Layout extends Component {
 
     render() {
         const {
-            appBar,
+            appBar: AppBar,
             children,
             classes,
             className,
             customRoutes,
-            error,
+            error: Error,
             dashboard,
             logout,
-            menu,
-            notification,
+            menu: Menu,
+            notification: Notification,
             open,
-            sidebar,
+            sidebar: Sidebar,
             title,
             ...props
         } = this.props;
@@ -115,25 +115,22 @@ class Layout extends Component {
                 {...sanitizeRestProps(props)}
             >
                 <div className={classes.appFrame}>
-                    {createElement(appBar, { title, open, logout })}
+                    <AppBar title={title} open={open} logout={logout} />
                     <main className={classes.contentWithSidebar}>
-                        {createElement(sidebar, {
-                            children: createElement(menu, {
-                                logout,
-                                hasDashboard: !!dashboard,
-                            }),
-                        })}
+                        <Sidebar>
+                            <Menu logout={logout} hasDashboard={!!dashboard} />
+                        </Sidebar>
                         <div className={classes.content}>
                             {hasError
-                                ? createElement(error, {
-                                      error: errorMessage,
-                                      errorInfo,
-                                      title,
-                                  })
+                                ? <Error
+                                      error={errorMessage}
+                                      errorInfo={errorInfo}
+                                      title={title}
+                                  />
                                 : children}
                         </div>
                     </main>
-                    {createElement(notification)}
+                    <Notification />
                 </div>
             </div>
         );
@@ -149,11 +146,7 @@ Layout.propTypes = {
     dashboard: ComponentPropType,
     error: ComponentPropType,
     history: PropTypes.object.isRequired,
-    logout: PropTypes.oneOfType([
-        PropTypes.node,
-        PropTypes.func,
-        PropTypes.string,
-    ]),
+    logout: ComponentPropType,
     menu: ComponentPropType,
     notification: ComponentPropType,
     open: PropTypes.bool,
@@ -162,11 +155,11 @@ Layout.propTypes = {
 };
 
 Layout.defaultProps = {
-    appBar: AppBar,
-    error: Error,
-    menu: Menu,
-    notification: Notification,
-    sidebar: Sidebar,
+    appBar: DefaultAppBar,
+    error: DefaultError,
+    menu: DefaultMenu,
+    notification: DefaultNotification,
+    sidebar: DefaultSidebar,
 };
 
 const mapStateToProps = state => ({
diff --git a/packages/ra-ui-materialui/src/layout/Menu.js b/packages/ra-ui-materialui/src/layout/Menu.js
index bf1dab983ee..e101c3f5e51 100644
--- a/packages/ra-ui-materialui/src/layout/Menu.js
+++ b/packages/ra-ui-materialui/src/layout/Menu.js
@@ -5,7 +5,7 @@ import inflection from 'inflection';
 import compose from 'recompose/compose';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { getResources, useTranslate } from 'ra-core';
+import { getResources, useTranslate, ComponentPropType } from 'ra-core';
 import DefaultIcon from '@material-ui/icons/ViewList';
 
 import DashboardMenuItem from './DashboardMenuItem';
@@ -41,7 +41,7 @@ const Menu = ({
     open,
     pathname,
     resources,
-    logout,
+    logout: Logout,
     ...rest
 }) => {
     const translate = useTranslate();
@@ -59,13 +59,13 @@ const Menu = ({
                             translate
                         )}
                         leftIcon={
-                            resource.icon ? <resource.icon /> : <DefaultIcon />
+                            resource.icon ? resource.icon : DefaultIcon
                         }
                         onClick={onMenuClick}
                         dense={dense}
                     />
                 ))}
-            <Responsive xsmall={logout} medium={null} />
+            {Logout ? <Responsive xsmall={<Logout />} medium={null} /> : null}
         </div>
     );
 };
@@ -75,7 +75,7 @@ Menu.propTypes = {
     className: PropTypes.string,
     dense: PropTypes.bool,
     hasDashboard: PropTypes.bool,
-    logout: PropTypes.element,
+    logout: ComponentPropType,
     onMenuClick: PropTypes.func,
     open: PropTypes.bool,
     pathname: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/layout/MenuItemLink.js b/packages/ra-ui-materialui/src/layout/MenuItemLink.js
index 47e11bb243d..2d096b4bd28 100644
--- a/packages/ra-ui-materialui/src/layout/MenuItemLink.js
+++ b/packages/ra-ui-materialui/src/layout/MenuItemLink.js
@@ -1,10 +1,11 @@
-import React, { cloneElement, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { NavLink } from 'react-router-dom';
 import MenuItem from '@material-ui/core/MenuItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import { withStyles, createStyles } from '@material-ui/core/styles';
+import { ComponentPropType } from 'ra-core';
 
 const NavLinkRef = React.forwardRef((props, ref) => (
     <NavLink innerRef={ref} {...props} />
@@ -25,7 +26,7 @@ export class MenuItemLink extends Component {
     static propTypes = {
         classes: PropTypes.object.isRequired,
         className: PropTypes.string,
-        leftIcon: PropTypes.node,
+        leftIcon: ComponentPropType,
         onClick: PropTypes.func,
         primaryText: PropTypes.node,
         staticContext: PropTypes.object,
@@ -42,7 +43,7 @@ export class MenuItemLink extends Component {
             classes,
             className,
             primaryText,
-            leftIcon,
+            leftIcon: LeftIcon,
             staticContext,
             ...props
         } = this.props;
@@ -55,9 +56,9 @@ export class MenuItemLink extends Component {
                 {...props}
                 onClick={this.handleMenuTap}
             >
-                {leftIcon && (
+                {LeftIcon && (
                     <ListItemIcon className={classes.icon}>
-                        {cloneElement(leftIcon, { titleAccess: primaryText })}
+                        <LeftIcon titleAccess={primaryText} />
                     </ListItemIcon>
                 )}
                 {primaryText}
diff --git a/packages/ra-ui-materialui/src/layout/RecordTitle.js b/packages/ra-ui-materialui/src/layout/RecordTitle.js
deleted file mode 100644
index c2d55d9477c..00000000000
--- a/packages/ra-ui-materialui/src/layout/RecordTitle.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import TitleDeprecated from './TitleDeprecated';
-
-/**
- * @deprecated Use TitleForRecord instead
- */
-const RecordTitle = ({ defaultTitle, record, title }) =>
-    record ? (
-        <TitleDeprecated
-            title={title}
-            record={record}
-            defaultTitle={defaultTitle}
-        />
-    ) : (
-        ''
-    );
-
-RecordTitle.propTypes = {
-    defaultTitle: PropTypes.any,
-    record: PropTypes.object,
-    title: PropTypes.any,
-};
-
-export default RecordTitle;
diff --git a/packages/ra-ui-materialui/src/layout/Title.js b/packages/ra-ui-materialui/src/layout/Title.js
index af527619006..ff47875e372 100644
--- a/packages/ra-ui-materialui/src/layout/Title.js
+++ b/packages/ra-ui-materialui/src/layout/Title.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { createElement } from 'react';
+import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
-import { useTranslate, warning } from 'ra-core';
+import { useTranslate, warning, ComponentPropType } from 'ra-core';
 
 const Title = ({ className, defaultTitle, locale, record, title, ...rest }) => {
     const translate = useTranslate();
@@ -18,17 +18,19 @@ const Title = ({ className, defaultTitle, locale, record, title, ...rest }) => {
             {translate(title, { _: title })}
         </span>
     ) : (
-        React.cloneElement(title, { className, record, ...rest })
+        createElement(title, { className, record, ...rest })
     );
-    return ReactDOM.createPortal(titleElement, container);
+    return createPortal(titleElement, container);
 };
 
+export const TitlePropType = PropTypes.oneOfType([PropTypes.string, ComponentPropType]);
+
 Title.propTypes = {
     defaultTitle: PropTypes.string,
     className: PropTypes.string,
     locale: PropTypes.string,
     record: PropTypes.object,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    title: TitlePropType,
 };
 
 export default Title;
diff --git a/packages/ra-ui-materialui/src/layout/TitleDeprecated.js b/packages/ra-ui-materialui/src/layout/TitleDeprecated.js
deleted file mode 100644
index 0ac321ee8ca..00000000000
--- a/packages/ra-ui-materialui/src/layout/TitleDeprecated.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslate } from 'ra-core';
-
-/**
- * @deprecated Use Title instead
- */
-const Title = ({ className, defaultTitle, record, title, ...rest }) => {
-    const translate = useTranslate();
-    if (!title) {
-        return (
-            <span className={className} {...rest}>
-                {defaultTitle}
-            </span>
-        );
-    }
-    if (typeof title === 'string') {
-        return (
-            <span className={className} {...rest}>
-                {translate(title, { _: title })}
-            </span>
-        );
-    }
-    return React.cloneElement(title, { className, record, ...rest });
-};
-
-Title.propTypes = {
-    defaultTitle: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    locale: PropTypes.string,
-    record: PropTypes.object,
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-};
-
-export default Title;
diff --git a/packages/ra-ui-materialui/src/layout/TitleForRecord.js b/packages/ra-ui-materialui/src/layout/TitleForRecord.js
index 2db282a6d43..96f265c76a9 100644
--- a/packages/ra-ui-materialui/src/layout/TitleForRecord.js
+++ b/packages/ra-ui-materialui/src/layout/TitleForRecord.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Title from './Title';
+import Title, { TitlePropType } from './Title';
 
 const TitleForRecord = ({ defaultTitle, record, title }) =>
     record ? (
@@ -12,7 +12,7 @@ const TitleForRecord = ({ defaultTitle, record, title }) =>
 TitleForRecord.propTypes = {
     defaultTitle: PropTypes.any,
     record: PropTypes.object,
-    title: PropTypes.any,
+    title: TitlePropType,
 };
 
 export default TitleForRecord;
diff --git a/packages/ra-ui-materialui/src/layout/UserMenu.js b/packages/ra-ui-materialui/src/layout/UserMenu.js
index 74ffcac3df1..fab4d8eac00 100644
--- a/packages/ra-ui-materialui/src/layout/UserMenu.js
+++ b/packages/ra-ui-materialui/src/layout/UserMenu.js
@@ -4,13 +4,13 @@ import Tooltip from '@material-ui/core/Tooltip';
 import IconButton from '@material-ui/core/IconButton';
 import Menu from '@material-ui/core/Menu';
 import AccountCircle from '@material-ui/icons/AccountCircle';
-import { translate } from 'ra-core';
+import { translate, ComponentPropType } from 'ra-core';
 
 class UserMenu extends React.Component {
     static propTypes = {
         children: PropTypes.node,
         label: PropTypes.string.isRequired,
-        logout: PropTypes.node,
+        logout: ComponentPropType,
         icon: PropTypes.node,
         translate: PropTypes.func.isRequired,
     };
@@ -38,8 +38,8 @@ class UserMenu extends React.Component {
     };
 
     render() {
-        const { children, label, icon, logout, translate } = this.props;
-        if (!logout && !children) return null;
+        const { children, label, icon, logout: Logout, translate } = this.props;
+        if (!Logout && !children) return null;
         const { anchorEl } = this.state;
         const open = Boolean(anchorEl);
 
@@ -74,7 +74,7 @@ class UserMenu extends React.Component {
                         isValidElement(menuItem) ?
                         cloneElement(menuItem, { onClick: this.handleClose }) : null
                     )}
-                    {logout}
+                    <Logout />
                 </Menu>
             </div>
         );
diff --git a/packages/ra-ui-materialui/src/layout/index.js b/packages/ra-ui-materialui/src/layout/index.js
index fa2e9b76ec2..09644f63b43 100644
--- a/packages/ra-ui-materialui/src/layout/index.js
+++ b/packages/ra-ui-materialui/src/layout/index.js
@@ -13,10 +13,9 @@ import Menu from './Menu';
 import MenuItemLink from './MenuItemLink';
 import NotFound from './NotFound';
 import Notification from './Notification';
-import RecordTitle from './RecordTitle';
 import Responsive from './Responsive';
 import Sidebar from './Sidebar';
-import Title from './Title';
+import Title, { TitlePropType } from './Title';
 import TitleForRecord from './TitleForRecord';
 import TopToolbar from './TopToolbar';
 import UserMenu from './UserMenu';
@@ -37,11 +36,11 @@ export {
     MenuItemLink,
     NotFound,
     Notification,
-    RecordTitle,
     Responsive,
     Sidebar,
     Title,
     TitleForRecord,
+    TitlePropType,
     TopToolbar,
     UserMenu,
 };
diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js
index 52d2f37cbc2..5fbe071f7b0 100644
--- a/packages/ra-ui-materialui/src/list/Datagrid.js
+++ b/packages/ra-ui-materialui/src/list/Datagrid.js
@@ -1,13 +1,12 @@
-import React, { Component, isValidElement, Children, cloneElement } from 'react';
+import React, { Component, isValidElement, Children } from 'react';
 import PropTypes from 'prop-types';
-import { sanitizeListRestProps } from 'ra-core';
+import { sanitizeListRestProps, ComponentPropType } from 'ra-core';
 import { withStyles, createStyles } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Checkbox from '@material-ui/core/Checkbox';
-
 import classnames from 'classnames';
 
 import DatagridHeaderCell from './DatagridHeaderCell';
@@ -117,7 +116,7 @@ class Datagrid extends Component {
     render() {
         const {
             basePath,
-            body,
+            body: Body,
             children,
             classes,
             className,
@@ -219,27 +218,25 @@ class Datagrid extends Component {
                         )}
                     </TableRow>
                 </TableHead>
-                {cloneElement(
-                    body,
-                    {
-                        basePath,
-                        className: classes.tbody,
-                        classes,
-                        expand,
-                        rowClick,
-                        data,
-                        hasBulkActions,
-                        hover,
-                        ids,
-                        isLoading,
-                        onToggleItem,
-                        resource,
-                        rowStyle,
-                        selectedIds,
-                        version,
-                    },
-                    children
-                )}
+                <Body
+                    basePath={basePath}
+                    className={classes.tbody}
+                    classes={classes}
+                    expand={expand}
+                    rowClick={rowClick}
+                    data={data}
+                    hasBulkActions={hasBulkActions}
+                    hover={hover}
+                    ids={ids}
+                    isLoading={isLoading}
+                    onToggleItem={onToggleItem}
+                    resource={resource}
+                    rowStyle={rowStyle}
+                    selectedIds={selectedIds}
+                    version={version}
+                >
+                    {children}
+                </Body>
             </Table>
         );
     }
@@ -247,7 +244,7 @@ class Datagrid extends Component {
 
 Datagrid.propTypes = {
     basePath: PropTypes.string,
-    body: PropTypes.element.isRequired,
+    body: ComponentPropType,
     children: PropTypes.node.isRequired,
     classes: PropTypes.object,
     className: PropTypes.string,
@@ -256,7 +253,7 @@ Datagrid.propTypes = {
         order: PropTypes.string,
     }),
     data: PropTypes.object.isRequired,
-    expand: PropTypes.node,
+    expand: ComponentPropType,
     hasBulkActions: PropTypes.bool.isRequired,
     hover: PropTypes.bool,
     ids: PropTypes.arrayOf(PropTypes.any).isRequired,
@@ -277,7 +274,7 @@ Datagrid.defaultProps = {
     hasBulkActions: false,
     ids: [],
     selectedIds: [],
-    body: <DatagridBody />,
+    body: DatagridBody,
 };
 
 export default withStyles(styles)(Datagrid);
diff --git a/packages/ra-ui-materialui/src/list/DatagridBody.js b/packages/ra-ui-materialui/src/list/DatagridBody.js
index 3c65251f591..408c623861d 100644
--- a/packages/ra-ui-materialui/src/list/DatagridBody.js
+++ b/packages/ra-ui-materialui/src/list/DatagridBody.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import shouldUpdate from 'recompose/shouldUpdate';
 import TableBody from '@material-ui/core/TableBody';
 import classnames from 'classnames';
+import { ComponentPropType } from 'ra-core';
 
 import DatagridRow from './DatagridRow';
 
@@ -19,7 +20,7 @@ const DatagridBody = ({
     isLoading,
     onToggleItem,
     resource,
-    row,
+    row: Row,
     rowClick,
     rowStyle,
     selectedIds,
@@ -29,30 +30,28 @@ const DatagridBody = ({
 }) => (
     <TableBody className={classnames('datagrid-body', className)} {...rest}>
         {ids.map((id, rowIndex) =>
-            React.cloneElement(
-                row,
-                {
-                    basePath,
-                    classes,
-                    className: classnames(classes.row, {
-                        [classes.rowEven]: rowIndex % 2 === 0,
-                        [classes.rowOdd]: rowIndex % 2 !== 0,
-                        [classes.clickableRow]: rowClick,
-                    }),
-                    expand,
-                    hasBulkActions,
-                    hover,
-                    id,
-                    key: id,
-                    onToggleItem,
-                    record: data[id],
-                    resource,
-                    rowClick,
-                    selected: selectedIds.includes(id),
-                    style: rowStyle ? rowStyle(data[id], rowIndex) : null,
-                },
-                children
-            )
+            <Row
+                basePath={basePath}
+                classes={classes}
+                className={classnames(classes.row, {
+                    [classes.rowEven]: rowIndex % 2 === 0,
+                    [classes.rowOdd]: rowIndex % 2 !== 0,
+                    [classes.clickableRow]: rowClick,
+                })}
+                expand={expand}
+                hasBulkActions={hasBulkActions}
+                hover={hover}
+                id={id}
+                key={id}
+                onToggleItem={onToggleItem}
+                record={data[id]}
+                resource={resource}
+                rowClick={rowClick}
+                selected={selectedIds.includes(id)}
+                style={rowStyle ? rowStyle(data[id], rowIndex) : null}
+            >
+                {children}
+            </Row>
         )}
     </TableBody>
 );
@@ -63,14 +62,14 @@ DatagridBody.propTypes = {
     className: PropTypes.string,
     children: PropTypes.node,
     data: PropTypes.object.isRequired,
-    expand: PropTypes.node,
+    expand: ComponentPropType,
     hasBulkActions: PropTypes.bool.isRequired,
     hover: PropTypes.bool,
     ids: PropTypes.arrayOf(PropTypes.any).isRequired,
     isLoading: PropTypes.bool,
     onToggleItem: PropTypes.func,
     resource: PropTypes.string,
-    row: PropTypes.element.isRequired,
+    row: ComponentPropType,
     rowClick: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     rowStyle: PropTypes.func,
     selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired,
@@ -82,7 +81,7 @@ DatagridBody.defaultProps = {
     data: {},
     hasBulkActions: false,
     ids: [],
-    row: <DatagridRow />,
+    row: DatagridRow,
 };
 
 const areArraysEqual = (arr1, arr2) =>
diff --git a/packages/ra-ui-materialui/src/list/DatagridRow.js b/packages/ra-ui-materialui/src/list/DatagridRow.js
index d3f15fdba87..75a181b2ce2 100644
--- a/packages/ra-ui-materialui/src/list/DatagridRow.js
+++ b/packages/ra-ui-materialui/src/list/DatagridRow.js
@@ -9,7 +9,7 @@ import TableRow from '@material-ui/core/TableRow';
 import Checkbox from '@material-ui/core/Checkbox';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import classnames from 'classnames';
-import { linkToRecord } from 'ra-core';
+import { linkToRecord, ComponentPropType } from 'ra-core';
 
 import DatagridCell from './DatagridCell';
 
@@ -106,7 +106,7 @@ class DatagridRow extends Component {
             children,
             classes,
             className,
-            expand,
+            expand: Expand,
             hasBulkActions,
             hover,
             id,
@@ -128,7 +128,7 @@ class DatagridRow extends Component {
                     onClick={this.handleClick}
                     {...sanitizeRestProps(rest)}
                 >
-                    {expand && (
+                    {Expand && (
                         <TableCell
                             padding="none"
                             className={classes.expandIconCell}
@@ -171,15 +171,15 @@ class DatagridRow extends Component {
                         ) : null
                     )}
                 </TableRow>
-                {expand && expanded && (
+                {Expand && expanded && (
                     <TableRow key={`${id}-expand`}>
                         <TableCell colSpan={colSpan} role="expand-content">
-                            {React.cloneElement(expand, {
-                                record,
-                                basePath,
-                                resource,
-                                id: String(id),
-                            })}
+                            <Expand
+                                record={record}
+                                basePath={basePath}
+                                resource={resource}
+                                id={String(id)}
+                            />
                         </TableCell>
                     </TableRow>
                 )}
@@ -193,7 +193,7 @@ DatagridRow.propTypes = {
     children: PropTypes.node,
     classes: PropTypes.object,
     className: PropTypes.string,
-    expand: PropTypes.node,
+    expand: ComponentPropType,
     hasBulkActions: PropTypes.bool.isRequired,
     hover: PropTypes.bool,
     id: PropTypes.any,
diff --git a/packages/ra-ui-materialui/src/list/List.js b/packages/ra-ui-materialui/src/list/List.js
index 07a8373143c..c4b195d6aca 100644
--- a/packages/ra-ui-materialui/src/list/List.js
+++ b/packages/ra-ui-materialui/src/list/List.js
@@ -1,5 +1,5 @@
 /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
-import React, { isValidElement, Children, cloneElement } from 'react';
+import React, { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import Card from '@material-ui/core/Card';
 import classnames from 'classnames';
@@ -10,7 +10,7 @@ import {
     getListControllerProps,
 } from 'ra-core';
 
-import Title from '../layout/Title';
+import Title, { TitlePropType } from '../layout/Title';
 import ListToolbar from './ListToolbar';
 import DefaultPagination from './Pagination';
 import BulkDeleteButton from '../button/BulkDeleteButton';
@@ -108,7 +108,21 @@ const sanitizeRestProps = ({
 }) => rest;
 
 export const ListView = withStyles(styles)(({ // component props
-    actions, aside, filter, filters, bulkActions, bulkActionButtons, pagination, children, className, classes, component, exporter, title, ...rest }) => {
+    actions: Actions,
+    aside: Aside,
+    filter,
+    filters: Filters,
+    bulkActions: BulkActions,
+    bulkActionButtons: BulkActionButtons,
+    pagination: Pagination,
+    children,
+    className,
+    classes,
+    component,
+    exporter,
+    title,
+    ...rest
+}) => {
     // overridable by user // deprecated
     const { defaultTitle, version } = rest;
     const controllerProps = getListControllerProps(rest);
@@ -120,12 +134,12 @@ export const ListView = withStyles(styles)(({ // component props
         >
             <Title title={title} defaultTitle={defaultTitle} />
 
-            {(filters || actions) && (
+            {(Filters || Actions) && (
                 <ListToolbar
-                    filters={filters}
+                    filters={Filters}
                     {...controllerProps}
-                    actions={actions}
-                    bulkActions={bulkActions}
+                    actions={Actions}
+                    bulkActions={BulkActions}
                     exporter={exporter}
                     permanentFilter={filter}
                 />
@@ -138,35 +152,35 @@ export const ListView = withStyles(styles)(({ // component props
                     })}
                     key={version}
                 >
-                    {bulkActions !== false &&
-                        bulkActionButtons !== false &&
-                        bulkActionButtons &&
-                        !bulkActions && (
+                    {BulkActions !== false &&
+                        BulkActionButtons !== false &&
+                        BulkActionButtons &&
+                        !BulkActions && (
                             <BulkActionsToolbar {...controllerProps}>
-                                {bulkActionButtons}
+                                <BulkActionButtons />
                             </BulkActionsToolbar>
                         )}
                     {children &&
                         cloneElement(Children.only(children), {
                             ...controllerProps,
                             hasBulkActions:
-                                bulkActions !== false &&
-                                bulkActionButtons !== false,
+                                BulkActions !== false &&
+                                BulkActionButtons !== false,
                         })}
-                    {pagination && cloneElement(pagination, controllerProps)}
+                    {Pagination && <Pagination {...controllerProps} />}
                 </Content>
-                {aside && cloneElement(aside, controllerProps)}
+                {Aside && <Aside {...controllerProps}  />}
             </div>
         </div>
     );
 });
 
 ListView.propTypes = {
-    actions: PropTypes.element,
-    aside: PropTypes.node,
+    actions: ComponentPropType,
+    aside: ComponentPropType,
     basePath: PropTypes.string,
-    bulkActions: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
-    bulkActionButtons: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+    bulkActions: PropTypes.oneOfType([PropTypes.bool, ComponentPropType]),
+    bulkActionButtons: PropTypes.oneOfType([PropTypes.bool, ComponentPropType]),
     children: PropTypes.element,
     className: PropTypes.string,
     classes: PropTypes.object,
@@ -180,7 +194,7 @@ ListView.propTypes = {
     displayedFilters: PropTypes.object,
     exporter: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
     filterDefaultValues: PropTypes.object,
-    filters: PropTypes.element,
+    filters: ComponentPropType,
     filterValues: PropTypes.object,
     hasCreate: PropTypes.bool,
     hideFilter: PropTypes.func,
@@ -190,7 +204,7 @@ ListView.propTypes = {
     onToggleItem: PropTypes.func,
     onUnselectItems: PropTypes.func,
     page: PropTypes.number,
-    pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+    pagination: PropTypes.oneOfType([PropTypes.bool, ComponentPropType]),
     perPage: PropTypes.number,
     refresh: PropTypes.func,
     resource: PropTypes.string,
@@ -200,18 +214,18 @@ ListView.propTypes = {
     setPerPage: PropTypes.func,
     setSort: PropTypes.func,
     showFilter: PropTypes.func,
-    title: PropTypes.any,
+    title: TitlePropType,
     total: PropTypes.number,
     translate: PropTypes.func,
     version: PropTypes.number,
 };
 
 ListView.defaultProps = {
-    actions: <DefaultActions />,
+    actions: DefaultActions,
     classes: {},
     component: Card,
-    bulkActionButtons: <DefaultBulkActionButtons />,
-    pagination: <DefaultPagination />,
+    bulkActionButtons: DefaultBulkActionButtons,
+    pagination: DefaultPagination,
 };
 
 /**
@@ -230,7 +244,7 @@ ListView.defaultProps = {
  *   - sort
  *   - filter (the permanent filter to apply to the query)
  *   - actions
- *   - filters (a React Element used to display the filter form)
+ *   - filters (a React component used to display the filter form)
  *   - pagination
  *
  * @example
@@ -245,7 +259,7 @@ ListView.defaultProps = {
  *             title="List of posts"
  *             sort={{ field: 'published_at' }}
  *             filter={{ is_published: true }}
- *             filters={<PostFilter />}
+ *             filters={PostFilter}
  *         >
  *             <Datagrid>
  *                 <TextField source="id" />
@@ -263,23 +277,23 @@ const List = props => (
 
 List.propTypes = {
     // the props you can change
-    actions: PropTypes.element,
-    aside: PropTypes.node,
-    bulkActions: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
-    bulkActionButtons: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+    actions: ComponentPropType,
+    aside: ComponentPropType,
+    bulkActions: PropTypes.oneOfType([ComponentPropType, PropTypes.bool]),
+    bulkActionButtons: PropTypes.oneOfType([ComponentPropType, PropTypes.bool]),
     children: PropTypes.node,
     classes: PropTypes.object,
     className: PropTypes.string,
     filter: PropTypes.object,
     filterDefaultValues: PropTypes.object,
-    filters: PropTypes.element,
-    pagination: PropTypes.element,
+    filters: ComponentPropType,
+    pagination: ComponentPropType,
     perPage: PropTypes.number.isRequired,
     sort: PropTypes.shape({
         field: PropTypes.string,
         order: PropTypes.string,
     }),
-    title: PropTypes.any,
+    title: TitlePropType,
     // the props managed by react-admin
     authProvider: PropTypes.func,
     hasCreate: PropTypes.bool.isRequired,
diff --git a/packages/ra-ui-materialui/src/list/List.spec.js b/packages/ra-ui-materialui/src/list/List.spec.js
index a6fab61c43f..0781e4ed66d 100644
--- a/packages/ra-ui-materialui/src/list/List.spec.js
+++ b/packages/ra-ui-materialui/src/list/List.spec.js
@@ -42,8 +42,8 @@ describe('<List />', () => {
         const Datagrid = () => <div>datagrid</div>;
         const { queryAllByText, debug } = renderWithRedux(
             <ListView
-                filters={<Filters />}
-                pagination={<Pagination />}
+                filters={Filters}
+                pagination={Pagination}
                 {...defaultProps}
             >
                 <Datagrid />
@@ -88,7 +88,7 @@ describe('<List />', () => {
         const Dummy = () => <div />;
         const Aside = () => <div id="aside">Hello</div>;
         const { queryAllByText } = renderWithRedux(
-            <List {...defaultListProps} aside={<Aside />}>
+            <List {...defaultListProps} aside={Aside}>
                 <Dummy />
             </List>,
             defaultStateForList
diff --git a/packages/ra-ui-materialui/src/list/ListActions.js b/packages/ra-ui-materialui/src/list/ListActions.js
index 64a70ad55d2..ac93d57b6d8 100644
--- a/packages/ra-ui-materialui/src/list/ListActions.js
+++ b/packages/ra-ui-materialui/src/list/ListActions.js
@@ -1,17 +1,17 @@
-import React, { cloneElement } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import onlyUpdateForKeys from 'recompose/onlyUpdateForKeys';
-import { sanitizeListRestProps } from 'ra-core';
+import { sanitizeListRestProps, ComponentPropType } from 'ra-core';
 
 import TopToolbar from '../layout/TopToolbar';
 import { CreateButton, ExportButton } from '../button';
 
 const ListActions = ({
-    bulkActions,
+    bulkActions: BulkActions,
     currentSort,
     className,
     resource,
-    filters,
+    filters: Filters,
     displayedFilters,
     exporter,
     filterValues,
@@ -25,22 +25,24 @@ const ListActions = ({
     ...rest
 }) => (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
-        {bulkActions &&
-            cloneElement(bulkActions, {
-                basePath,
-                filterValues,
-                resource,
-                selectedIds,
-                onUnselectItems,
-            })}
-        {filters &&
-            cloneElement(filters, {
-                resource,
-                showFilter,
-                displayedFilters,
-                filterValues,
-                context: 'button',
-            })}
+        {BulkActions &&
+            <BulkActions
+                basePath={basePath}
+                filterValues={filterValues}
+                resource={resource}
+                selectedIds={selectedIds}
+                onUnselectItems={onUnselectItems}
+            />
+        }
+        {Filters &&
+            <Filters
+                resource={resource}
+                showFilter={showFilter}
+                displayedFilters={displayedFilters}
+                filterValues={filterValues}
+                context="button"
+            />
+        }
         {hasCreate && <CreateButton basePath={basePath} />}
         {exporter !== false && (
             <ExportButton
@@ -55,13 +57,13 @@ const ListActions = ({
 );
 
 ListActions.propTypes = {
-    bulkActions: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+    bulkActions: PropTypes.oneOfType([ComponentPropType, PropTypes.bool]),
     basePath: PropTypes.string,
     className: PropTypes.string,
     currentSort: PropTypes.object,
     displayedFilters: PropTypes.object,
     exporter: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-    filters: PropTypes.element,
+    filters: ComponentPropType,
     filterValues: PropTypes.object,
     hasCreate: PropTypes.bool,
     resource: PropTypes.string,
diff --git a/packages/ra-ui-materialui/src/list/ListToolbar.js b/packages/ra-ui-materialui/src/list/ListToolbar.js
index 41904569e96..67bf3ae28e7 100644
--- a/packages/ra-ui-materialui/src/list/ListToolbar.js
+++ b/packages/ra-ui-materialui/src/list/ListToolbar.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Toolbar from '@material-ui/core/Toolbar';
 import { makeStyles } from '@material-ui/core/styles';
+import { ComponentPropType } from 'ra-core';
 
 const useStyles = makeStyles(theme => ({
     toolbar: {
@@ -28,10 +29,10 @@ const useStyles = makeStyles(theme => ({
 
 const ListToolbar = ({
     classes = {},
-    filters,
+    filters: Filters,
     filterValues, // dynamically set via the UI by the user
     permanentFilter, // set in the List component by the developer
-    actions,
+    actions: Actions,
     bulkActions,
     exporter,
     ...rest
@@ -39,34 +40,33 @@ const ListToolbar = ({
     const styles = useStyles({ classes });
     return (
         <Toolbar className={styles.toolbar}>
-            {filters &&
-                React.cloneElement(filters, {
-                    ...rest,
-                    filterValues,
-                    context: 'form',
-                })}
+            {Filters &&
+                <Filters {...rest}
+                    filterValues={filterValues}
+                    context="form"
+                />
+            }
             <span />
-            {actions &&
-                React.cloneElement(actions, {
-                    ...rest,
-                    className: styles.actions,
-                    bulkActions,
-                    exporter,
-                    filters,
-                    filterValues,
-                    permanentFilter,
-                    ...actions.props,
-                })}
+            {Actions &&
+                <Actions {...rest}
+                    className={styles.actions}
+                    bulkActions={bulkActions}
+                    exporter={exporter}
+                    filters={Filters}
+                    filterValues={filterValues}
+                    permanentFilter={permanentFilter}
+                />
+            }
         </Toolbar>
     );
 };
 
 ListToolbar.propTypes = {
     classes: PropTypes.object,
-    filters: PropTypes.element,
+    filters: ComponentPropType,
     permanentFilter: PropTypes.object,
-    actions: PropTypes.element,
-    bulkActions: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+    actions: ComponentPropType,
+    bulkActions: PropTypes.oneOfType([ComponentPropType, PropTypes.bool]),
     exporter: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
 };