From ca1d6ccb1f6b25c8f06a408773e6402cc469ab49 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 14 Apr 2019 16:36:37 +0200
Subject: [PATCH] review

---
 docs/src/pages/demos/lists/AlignItemsList.tsx |  7 ++++
 docs/src/pages/demos/lists/CheckboxList.tsx   | 12 +++++-
 .../demos/lists/CheckboxListSecondary.tsx     |  8 +++-
 docs/src/pages/demos/lists/FolderList.tsx     | 25 +++++++----
 docs/src/pages/demos/lists/InsetList.tsx      |  2 +-
 .../instapaper/components/atoms/Badge.js      |  6 ++-
 .../components/molecules/ListItemIcon.js      |  6 ++-
 .../modules/components/LayoutBody.js          |  5 ++-
 .../tweeper/components/atoms/Badge.js         |  6 ++-
 .../components/molecules/ListItemIcon.js      |  6 ++-
 .../src/ToggleButton/ToggleButton.js          |  2 +
 packages/material-ui/src/AppBar/AppBar.js     |  6 ++-
 .../material-ui/src/Container/Container.js    | 18 ++++----
 .../src/DialogActions/DialogActions.js        |  6 ++-
 .../src/DialogContent/DialogContent.js        |  6 ++-
 .../ExpansionPanelDetails.js                  |  8 +++-
 .../material-ui/src/FormGroup/FormGroup.js    |  6 ++-
 packages/material-ui/src/Icon/Icon.js         |  6 ++-
 .../material-ui/src/InputLabel/InputLabel.js  |  5 ++-
 packages/material-ui/src/Link/Link.js         |  6 ++-
 .../src/NativeSelect/NativeSelectInput.js     |  5 ++-
 .../material-ui/src/TableCell/TableCell.js    |  5 ++-
 packages/material-ui/src/Toolbar/Toolbar.js   | 42 +++++++++++--------
 23 files changed, 139 insertions(+), 65 deletions(-)

diff --git a/docs/src/pages/demos/lists/AlignItemsList.tsx b/docs/src/pages/demos/lists/AlignItemsList.tsx
index 5e3371f8e5925d..e261aafbf86ed1 100644
--- a/docs/src/pages/demos/lists/AlignItemsList.tsx
+++ b/docs/src/pages/demos/lists/AlignItemsList.tsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem, { ListItemProps } from '@material-ui/core/ListItem';
+import Divider from '@material-ui/core/Divider';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
@@ -47,6 +48,9 @@ function AlignItemsList(props: AlignItemListProps) {
           }
         />
       </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
@@ -68,6 +72,9 @@ function AlignItemsList(props: AlignItemListProps) {
           }
         />
       </ListItem>
+      <li>
+        <Divider variant="inset" />
+      </li>
       <ListItem alignItems="flex-start">
         <ListItemAvatar>
           <Avatar alt="Remy Sharp" src="/static/images/avatar/3.jpg" />
diff --git a/docs/src/pages/demos/lists/CheckboxList.tsx b/docs/src/pages/demos/lists/CheckboxList.tsx
index 5ee653e994800a..b012bfa623c3c0 100644
--- a/docs/src/pages/demos/lists/CheckboxList.tsx
+++ b/docs/src/pages/demos/lists/CheckboxList.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import Checkbox from '@material-ui/core/Checkbox';
@@ -39,10 +40,17 @@ function CheckboxList() {
     <List className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} role={undefined} dense button onClick={handleToggle(value)}>
-          <Checkbox checked={checked.indexOf(value) !== -1} tabIndex={-1} disableRipple />
+          <ListItemIcon>
+            <Checkbox
+              edge="start"
+              checked={checked.indexOf(value) !== -1}
+              tabIndex={-1}
+              disableRipple
+            />
+          </ListItemIcon>
           <ListItemText primary={`Line item ${value + 1}`} />
           <ListItemSecondaryAction>
-            <IconButton aria-label="Comments">
+            <IconButton edge="end" aria-label="Comments">
               <CommentIcon />
             </IconButton>
           </ListItemSecondaryAction>
diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.tsx b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
index bd3c208821f4fb..06fa84c7946c09 100644
--- a/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
+++ b/docs/src/pages/demos/lists/CheckboxListSecondary.tsx
@@ -36,7 +36,7 @@ function CheckboxListSecondary() {
   };
 
   return (
-    <List dense className={classes.root}>
+    <List className={classes.root}>
       {[0, 1, 2, 3].map(value => (
         <ListItem key={value} button>
           <ListItemAvatar>
@@ -44,7 +44,11 @@ function CheckboxListSecondary() {
           </ListItemAvatar>
           <ListItemText primary={`Line item ${value + 1}`} />
           <ListItemSecondaryAction>
-            <Checkbox onChange={handleToggle(value)} checked={checked.indexOf(value) !== -1} />
+            <Checkbox
+              edge="end"
+              onChange={handleToggle(value)}
+              checked={checked.indexOf(value) !== -1}
+            />
           </ListItemSecondaryAction>
         </ListItem>
       ))}
diff --git a/docs/src/pages/demos/lists/FolderList.tsx b/docs/src/pages/demos/lists/FolderList.tsx
index 164b6528e0896a..f1c1a3bb2e06de 100644
--- a/docs/src/pages/demos/lists/FolderList.tsx
+++ b/docs/src/pages/demos/lists/FolderList.tsx
@@ -4,6 +4,7 @@ import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/s
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
 import Avatar from '@material-ui/core/Avatar';
 import ImageIcon from '@material-ui/icons/Image';
 import WorkIcon from '@material-ui/icons/Work';
@@ -25,21 +26,27 @@ function FolderList(props: FolderListProps) {
   return (
     <List className={classes.root}>
       <ListItem>
-        <Avatar>
-          <ImageIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <ImageIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Photos" secondary="Jan 9, 2014" />
       </ListItem>
       <ListItem>
-        <Avatar>
-          <WorkIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <WorkIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Work" secondary="Jan 7, 2014" />
       </ListItem>
       <ListItem>
-        <Avatar>
-          <BeachAccessIcon />
-        </Avatar>
+        <ListItemAvatar>
+          <Avatar>
+            <BeachAccessIcon />
+          </Avatar>
+        </ListItemAvatar>
         <ListItemText primary="Vacation" secondary="July 20, 2014" />
       </ListItem>
     </List>
diff --git a/docs/src/pages/demos/lists/InsetList.tsx b/docs/src/pages/demos/lists/InsetList.tsx
index 4d7e5a1b5125f3..85ae73516c2959 100644
--- a/docs/src/pages/demos/lists/InsetList.tsx
+++ b/docs/src/pages/demos/lists/InsetList.tsx
@@ -26,7 +26,7 @@ function InsetList(props: InsetListProps) {
         <ListItemIcon>
           <StarIcon />
         </ListItemIcon>
-        <ListItemText inset primary="Chelsea Otakan" />
+        <ListItemText primary="Chelsea Otakan" />
       </ListItem>
       <ListItem button>
         <ListItemText inset primary="Eric Hoffman" />
diff --git a/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js b/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js
index d516a08068f594..9d876b040d191a 100644
--- a/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js
+++ b/docs/src/pages/premium-themes/instapaper/components/atoms/Badge.js
@@ -3,8 +3,10 @@ import clsx from 'clsx';
 import MuiBadge from '@material-ui/core/Badge';
 import { BADGE } from '../../theme/core';
 
-const Badge = ({ className, dotted, ...props }) => (
-  <MuiBadge className={clsx(BADGE.root, className, dotted && BADGE.dotted)} {...props} />
+const Badge = ({ className, dotted, children, ...props }) => (
+  <MuiBadge className={clsx(BADGE.root, className, dotted && BADGE.dotted)} {...props}>
+    {children}
+  </MuiBadge>
 );
 
 export default Badge;
diff --git a/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js b/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js
index 4b2f4fa8d72a13..3c0bc3dfeae458 100644
--- a/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js
+++ b/docs/src/pages/premium-themes/instapaper/components/molecules/ListItemIcon.js
@@ -3,11 +3,13 @@ import clsx from 'clsx';
 import MuiListItemIcon from '@material-ui/core/ListItemIcon';
 import { LIST_ITEM_ICON } from '../../theme/core';
 
-const ListItemIcon = ({ className, subcategory, ...props }) => (
+const ListItemIcon = ({ className, children, subcategory, ...props }) => (
   <MuiListItemIcon
     className={clsx(LIST_ITEM_ICON.root, className, subcategory && LIST_ITEM_ICON.subcategory)}
     {...props}
-  />
+  >
+    {children}
+  </MuiListItemIcon>
 );
 
 export default ListItemIcon;
diff --git a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
index 7c63699fc994f1..225d5d10954787 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
+++ b/docs/src/pages/premium-themes/onepirate/modules/components/LayoutBody.js
@@ -77,6 +77,7 @@ const styles = theme => ({
 
 function LayoutBody(props) {
   const {
+    children,
     classes,
     className,
     component: Component,
@@ -103,7 +104,9 @@ function LayoutBody(props) {
       )}
       style={style}
       {...other}
-    />
+    >
+      {children}
+    </Component>
   );
 }
 
diff --git a/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js b/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js
index 3afe3189c842eb..5780da76cff575 100644
--- a/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js
+++ b/docs/src/pages/premium-themes/tweeper/components/atoms/Badge.js
@@ -3,14 +3,16 @@ import clsx from 'clsx';
 import MuiBadge from '@material-ui/core/Badge';
 import { BADGE } from '../../theme/core';
 
-const Badge = ({ className, dotted, number, ...props }) => (
+const Badge = ({ className, dotted, number, children, ...props }) => (
   <MuiBadge
     className={clsx(BADGE.root, className, dotted && BADGE.dotted, number && BADGE.number)}
     classes={{
       badge: BADGE.badge,
     }}
     {...props}
-  />
+  >
+    {children}
+  </MuiBadge>
 );
 
 export default Badge;
diff --git a/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js b/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js
index 4b2f4fa8d72a13..3c0bc3dfeae458 100644
--- a/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js
+++ b/docs/src/pages/premium-themes/tweeper/components/molecules/ListItemIcon.js
@@ -3,11 +3,13 @@ import clsx from 'clsx';
 import MuiListItemIcon from '@material-ui/core/ListItemIcon';
 import { LIST_ITEM_ICON } from '../../theme/core';
 
-const ListItemIcon = ({ className, subcategory, ...props }) => (
+const ListItemIcon = ({ className, children, subcategory, ...props }) => (
   <MuiListItemIcon
     className={clsx(LIST_ITEM_ICON.root, className, subcategory && LIST_ITEM_ICON.subcategory)}
     {...props}
-  />
+  >
+    {children}
+  </MuiListItemIcon>
 );
 
 export default ListItemIcon;
diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
index 1ba3f715d666b7..fb0b1006ecd9d0 100644
--- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
+++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js
@@ -170,4 +170,6 @@ ToggleButton.defaultProps = {
   disableRipple: false,
 };
 
+ToggleButton.muiName = 'ToggleButton';
+
 export default withStyles(styles, { name: 'MuiToggleButton' })(ToggleButton);
diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js
index d06b8261f7a8b3..deebced5560b83 100644
--- a/packages/material-ui/src/AppBar/AppBar.js
+++ b/packages/material-ui/src/AppBar/AppBar.js
@@ -69,7 +69,7 @@ export const styles = theme => {
 };
 
 const AppBar = React.forwardRef(function AppBar(props, ref) {
-  const { classes, className, color, position, ...other } = props;
+  const { children, classes, className, color, position, ...other } = props;
 
   return (
     <Paper
@@ -87,7 +87,9 @@ const AppBar = React.forwardRef(function AppBar(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </Paper>
   );
 });
 
diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
index 860ee2a9179f4a..c06cf730e762df 100644
--- a/packages/material-ui/src/Container/Container.js
+++ b/packages/material-ui/src/Container/Container.js
@@ -10,15 +10,15 @@ export const styles = theme => ({
     marginLeft: 'auto',
     boxSizing: 'border-box',
     marginRight: 'auto',
-    paddingLeft: 16,
-    paddingRight: 16,
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      paddingLeft: 24,
-      paddingRight: 24,
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
     },
     [theme.breakpoints.up('md')]: {
-      paddingLeft: 32,
-      paddingRight: 32,
+      paddingLeft: theme.spacing(4),
+      paddingRight: theme.spacing(4),
     },
   },
   fixed: Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
@@ -59,7 +59,7 @@ export const styles = theme => ({
 });
 
 const Container = React.forwardRef(function Container(props, ref) {
-  const { classes, className, component: Component, fixed, maxWidth, ...other } = props;
+  const { children, classes, className, component: Component, fixed, maxWidth, ...other } = props;
 
   return (
     <Component
@@ -73,7 +73,9 @@ const Container = React.forwardRef(function Container(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </Component>
   );
 });
 
diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js
index 9ac699f8d81417..42f0f09a55f3b8 100644
--- a/packages/material-ui/src/DialogActions/DialogActions.js
+++ b/packages/material-ui/src/DialogActions/DialogActions.js
@@ -22,7 +22,7 @@ export const styles = {
 };
 
 const DialogActions = React.forwardRef(function DialogActions(props, ref) {
-  const { disableActionSpacing, classes, className, ...other } = props;
+  const { disableActionSpacing, children, classes, className, ...other } = props;
 
   return (
     <div
@@ -35,7 +35,9 @@ const DialogActions = React.forwardRef(function DialogActions(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </div>
   );
 });
 
diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
index 3b80df1163b60c..e7ba6da2f875aa 100644
--- a/packages/material-ui/src/DialogContent/DialogContent.js
+++ b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -19,7 +19,7 @@ export const styles = theme => ({
 });
 
 const DialogContent = React.forwardRef(function DialogContent(props, ref) {
-  const { classes, className, dividers, ...other } = props;
+  const { classes, children, className, dividers, ...other } = props;
 
   return (
     <div
@@ -32,7 +32,9 @@ const DialogContent = React.forwardRef(function DialogContent(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </div>
   );
 });
 
diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
index fec59e7552114f..d47cfaefb04088 100644
--- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
+++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js
@@ -12,9 +12,13 @@ export const styles = {
 };
 
 const ExpansionPanelDetails = React.forwardRef(function ExpansionPanelDetails(props, ref) {
-  const { classes, className, ...other } = props;
+  const { classes, children, className, ...other } = props;
 
-  return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
+  return (
+    <div className={clsx(classes.root, className)} ref={ref} {...other}>
+      {children}
+    </div>
+  );
 });
 
 ExpansionPanelDetails.propTypes = {
diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js
index 52674aeef0d2d5..d74dd29e2eb36b 100644
--- a/packages/material-ui/src/FormGroup/FormGroup.js
+++ b/packages/material-ui/src/FormGroup/FormGroup.js
@@ -22,7 +22,7 @@ export const styles = {
  * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
  */
 const FormGroup = React.forwardRef(function FormGroup(props, ref) {
-  const { classes, className, row, ...other } = props;
+  const { classes, className, children, row, ...other } = props;
 
   return (
     <div
@@ -35,7 +35,9 @@ const FormGroup = React.forwardRef(function FormGroup(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </div>
   );
 });
 
diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js
index e876f580bb18a7..1b47c06a6feb95 100644
--- a/packages/material-ui/src/Icon/Icon.js
+++ b/packages/material-ui/src/Icon/Icon.js
@@ -50,7 +50,7 @@ export const styles = theme => ({
 });
 
 const Icon = React.forwardRef(function Icon(props, ref) {
-  const { classes, className, color, component: Component, fontSize, ...other } = props;
+  const { children, classes, className, color, component: Component, fontSize, ...other } = props;
 
   return (
     <Component
@@ -66,7 +66,9 @@ const Icon = React.forwardRef(function Icon(props, ref) {
       aria-hidden="true"
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </Component>
   );
 });
 
diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
index 2616933acfe34a..d02166a8b27d33 100644
--- a/packages/material-ui/src/InputLabel/InputLabel.js
+++ b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -85,6 +85,7 @@ export const styles = theme => ({
 
 const InputLabel = React.forwardRef(function InputLabel(props, ref) {
   const {
+    children,
     classes,
     className,
     disableAnimation,
@@ -130,7 +131,9 @@ const InputLabel = React.forwardRef(function InputLabel(props, ref) {
       }}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </FormLabel>
   );
 });
 
diff --git a/packages/material-ui/src/Link/Link.js b/packages/material-ui/src/Link/Link.js
index 07390e453c987d..58ccc5e643a369 100644
--- a/packages/material-ui/src/Link/Link.js
+++ b/packages/material-ui/src/Link/Link.js
@@ -50,7 +50,7 @@ export const styles = {
 };
 
 const Link = React.forwardRef(function Link(props, ref) {
-  const { classes, className, component, TypographyClasses, underline, ...other } = props;
+  const { children, classes, className, component, TypographyClasses, underline, ...other } = props;
 
   return (
     <Typography
@@ -66,7 +66,9 @@ const Link = React.forwardRef(function Link(props, ref) {
       component={component}
       ref={ref}
       {...other}
-    />
+    >
+      {children}
+    </Typography>
   );
 });
 
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index d6344dc1b7be39..e7f86354a28279 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -7,6 +7,7 @@ import clsx from 'clsx';
  */
 const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
   const {
+    children,
     classes,
     className,
     disabled,
@@ -37,7 +38,9 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref
         value={value}
         ref={inputRef || ref}
         {...other}
-      />
+      >
+        {children}
+      </select>
       <IconComponent className={classes.icon} />
     </div>
   );
diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js
index 38237d92d22d78..9a8661e8564877 100644
--- a/packages/material-ui/src/TableCell/TableCell.js
+++ b/packages/material-ui/src/TableCell/TableCell.js
@@ -101,6 +101,7 @@ export const styles = theme => ({
 const TableCell = React.forwardRef(function TableCell(props, ref) {
   const {
     align,
+    children,
     classes,
     className,
     component,
@@ -154,7 +155,9 @@ const TableCell = React.forwardRef(function TableCell(props, ref) {
       aria-sort={ariaSort}
       scope={scope}
       {...other}
-    />
+    >
+      {children}
+    </Component>
   );
 });
 
diff --git a/packages/material-ui/src/Toolbar/Toolbar.js b/packages/material-ui/src/Toolbar/Toolbar.js
index 6612d8b2e3d236..9db0b735f5f829 100644
--- a/packages/material-ui/src/Toolbar/Toolbar.js
+++ b/packages/material-ui/src/Toolbar/Toolbar.js
@@ -12,11 +12,11 @@ export const styles = theme => ({
   },
   /* Styles applied to the root element if `disableGutters={false}`. */
   gutters: {
-    paddingLeft: 16,
-    paddingRight: 16,
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
-      paddingLeft: 24,
-      paddingRight: 24,
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
     },
   },
   /* Styles applied to the root element if `variant="regular"`. */
@@ -28,21 +28,29 @@ export const styles = theme => ({
 });
 
 const Toolbar = React.forwardRef(function Toolbar(props, ref) {
-  const { classes, className, component: Component, disableGutters, variant, ...other } = props;
+  const {
+    children,
+    classes,
+    className: classNameProp,
+    component: Component,
+    disableGutters,
+    variant,
+    ...other
+  } = props;
+
+  const className = clsx(
+    classes.root,
+    classes[variant],
+    {
+      [classes.gutters]: !disableGutters,
+    },
+    classNameProp,
+  );
 
   return (
-    <Component
-      className={clsx(
-        classes.root,
-        classes[variant],
-        {
-          [classes.gutters]: !disableGutters,
-        },
-        className,
-      )}
-      ref={ref}
-      {...other}
-    />
+    <Component className={className} ref={ref} {...other}>
+      {children}
+    </Component>
   );
 });