diff --git a/docs/src/pages/demos/lists/CheckboxListSecondary.js b/docs/src/pages/demos/lists/CheckboxListSecondary.js
index 9fc68be9c53b4d..bcb8ca71945def 100644
--- a/docs/src/pages/demos/lists/CheckboxListSecondary.js
+++ b/docs/src/pages/demos/lists/CheckboxListSecondary.js
@@ -42,9 +42,9 @@ class CheckboxListSecondary extends React.Component {
 
     return (
       <div className={classes.root}>
-        <List>
+        <List dense>
           {[0, 1, 2, 3].map(value => (
-            <ListItem key={value} dense button>
+            <ListItem key={value} button>
               <Avatar alt="Remy Sharp" src="/static/images/remy.jpg" />
               <ListItemText primary={`Line item ${value + 1}`} />
               <ListItemSecondaryAction>
diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js
index 0e249883b6cc10..a12395bf22251a 100644
--- a/packages/material-ui/src/List/List.js
+++ b/packages/material-ui/src/List/List.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
+import ListContext from './ListContext';
 
 export const styles = {
   /* Styles applied to the root element. */
@@ -27,41 +28,37 @@ export const styles = {
   },
 };
 
-class List extends React.Component {
-  getChildContext() {
-    return {
-      dense: this.props.dense,
-    };
-  }
+function List(props) {
+  const {
+    children,
+    classes,
+    className,
+    component: Component,
+    dense,
+    disablePadding,
+    subheader,
+    ...other
+  } = props;
 
-  render() {
-    const {
-      children,
-      classes,
-      className: classNameProp,
-      component: Component,
-      dense,
-      disablePadding,
-      subheader,
-      ...other
-    } = this.props;
-    const className = classNames(
-      classes.root,
-      {
-        [classes.dense]: dense && !disablePadding,
-        [classes.padding]: !disablePadding,
-        [classes.subheader]: subheader,
-      },
-      classNameProp,
-    );
-
-    return (
-      <Component className={className} {...other}>
+  return (
+    <Component
+      className={classNames(
+        classes.root,
+        {
+          [classes.dense]: dense && !disablePadding,
+          [classes.padding]: !disablePadding,
+          [classes.subheader]: subheader,
+        },
+        className,
+      )}
+      {...other}
+    >
+      <ListContext.Provider value={{ dense }}>
         {subheader}
         {children}
-      </Component>
-    );
-  }
+      </ListContext.Provider>
+    </Component>
+  );
 }
 
 List.propTypes = {
@@ -105,8 +102,4 @@ List.defaultProps = {
   disablePadding: false,
 };
 
-List.childContextTypes = {
-  dense: PropTypes.bool,
-};
-
 export default withStyles(styles, { name: 'MuiList' })(List);
diff --git a/packages/material-ui/src/List/List.test.js b/packages/material-ui/src/List/List.test.js
index db69d0c1b07df3..45103a130e143b 100644
--- a/packages/material-ui/src/List/List.test.js
+++ b/packages/material-ui/src/List/List.test.js
@@ -61,13 +61,13 @@ describe('<List />', () => {
     it('should forward the context', () => {
       const wrapper1 = shallow(<List />);
       assert.strictEqual(
-        wrapper1.instance().getChildContext().dense,
+        wrapper1.hasClass(classes.dense),
         false,
         'dense should be false by default',
       );
 
       const wrapper2 = shallow(<List dense />);
-      assert.strictEqual(wrapper2.instance().getChildContext().dense, true);
+      assert.strictEqual(wrapper2.hasClass(classes.dense), true);
     });
   });
 });
diff --git a/packages/material-ui/src/List/ListContext.d.ts b/packages/material-ui/src/List/ListContext.d.ts
new file mode 100644
index 00000000000000..13f6b8d08080f2
--- /dev/null
+++ b/packages/material-ui/src/List/ListContext.d.ts
@@ -0,0 +1,4 @@
+import { Context } from 'react';
+
+declare const ListContext: Context<{ dense?: boolean }>;
+export default ListContext;
diff --git a/packages/material-ui/src/List/ListContext.js b/packages/material-ui/src/List/ListContext.js
new file mode 100644
index 00000000000000..6e74dad43e9390
--- /dev/null
+++ b/packages/material-ui/src/List/ListContext.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+const ListContext = React.createContext({});
+
+export default ListContext;
diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
index 9ddc6821ff1ff4..da1255eb383bf6 100644
--- a/packages/material-ui/src/ListItem/ListItem.js
+++ b/packages/material-ui/src/ListItem/ListItem.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
 import { isMuiElement } from '../utils/reactHelpers';
+import MergeListContext from './MergeListContext';
 
 export const styles = theme => ({
   /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
@@ -73,90 +74,88 @@ export const styles = theme => ({
   selected: {},
 });
 
-class ListItem extends React.Component {
-  getChildContext() {
-    return {
-      dense: this.props.dense || this.context.dense || false,
-    };
-  }
-
-  render() {
-    const {
-      button,
-      children: childrenProp,
-      classes,
-      className: classNameProp,
-      component: componentProp,
-      ContainerComponent,
-      ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
-      dense,
-      disabled,
-      disableGutters,
-      divider,
-      focusVisibleClassName,
-      selected,
-      ...other
-    } = this.props;
-
-    const isDense = dense || this.context.dense || false;
-    const children = React.Children.toArray(childrenProp);
-    const hasAvatar = children.some(value => isMuiElement(value, ['ListItemAvatar']));
-    const hasSecondaryAction =
-      children.length && isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
-
-    const className = classNames(
-      classes.root,
-      classes.default,
-      {
-        [classes.dense]: isDense || hasAvatar,
-        [classes.gutters]: !disableGutters,
-        [classes.divider]: divider,
-        [classes.disabled]: disabled,
-        [classes.button]: button,
-        [classes.secondaryAction]: hasSecondaryAction,
-        [classes.selected]: selected,
-      },
-      classNameProp,
-    );
-
-    const componentProps = { className, disabled, ...other };
-    let Component = componentProp || 'li';
-
-    if (button) {
-      componentProps.component = componentProp || 'div';
-      componentProps.focusVisibleClassName = classNames(
-        classes.focusVisible,
-        focusVisibleClassName,
-      );
-      Component = ButtonBase;
-    }
-
-    if (hasSecondaryAction) {
-      // Use div by default.
-      Component = !componentProps.component && !componentProp ? 'div' : Component;
-
-      // Avoid nesting of li > li.
-      if (ContainerComponent === 'li') {
-        if (Component === 'li') {
-          Component = 'div';
-        } else if (componentProps.component === 'li') {
-          componentProps.component = 'div';
+function ListItem(props) {
+  const {
+    button,
+    children: childrenProp,
+    classes,
+    className: classNameProp,
+    component: componentProp,
+    ContainerComponent,
+    ContainerProps: { className: ContainerClassName, ...ContainerProps } = {},
+    dense: denseProp,
+    disabled,
+    disableGutters,
+    divider,
+    focusVisibleClassName,
+    selected,
+    ...other
+  } = props;
+
+  return (
+    <MergeListContext dense={denseProp}>
+      {({ dense }) => {
+        const children = React.Children.toArray(childrenProp);
+        const hasAvatar = children.some(value => isMuiElement(value, ['ListItemAvatar']));
+        const hasSecondaryAction =
+          children.length &&
+          isMuiElement(children[children.length - 1], ['ListItemSecondaryAction']);
+
+        const className = classNames(
+          classes.root,
+          classes.default,
+          {
+            [classes.dense]: dense || hasAvatar,
+            [classes.gutters]: !disableGutters,
+            [classes.divider]: divider,
+            [classes.disabled]: disabled,
+            [classes.button]: button,
+            [classes.secondaryAction]: hasSecondaryAction,
+            [classes.selected]: selected,
+          },
+          classNameProp,
+        );
+
+        const componentProps = { className, disabled, ...other };
+        let Component = componentProp || 'li';
+
+        if (button) {
+          componentProps.component = componentProp || 'div';
+          componentProps.focusVisibleClassName = classNames(
+            classes.focusVisible,
+            focusVisibleClassName,
+          );
+          Component = ButtonBase;
         }
-      }
 
-      return (
-        <ContainerComponent
-          className={classNames(classes.container, ContainerClassName)}
-          {...ContainerProps}
-        >
-          <Component {...componentProps}>{children}</Component>
-          {children.pop()}
-        </ContainerComponent>
-      );
-    }
+        if (hasSecondaryAction) {
+          // Use div by default.
+          Component = !componentProps.component && !componentProp ? 'div' : Component;
+
+          // Avoid nesting of li > li.
+          if (ContainerComponent === 'li') {
+            if (Component === 'li') {
+              Component = 'div';
+            } else if (componentProps.component === 'li') {
+              componentProps.component = 'div';
+            }
+          }
+
+          return (
+            <ContainerComponent
+              className={classNames(classes.container, ContainerClassName)}
+              {...ContainerProps}
+            >
+              <Component {...componentProps}>{children}</Component>
+              {children.pop()}
+            </ContainerComponent>
+          );
+        }
 
-    return <Component {...componentProps}>{children}</Component>;
-  }
+        return <Component {...componentProps}>{children}</Component>;
+      }}
+    </MergeListContext>
+  );
 }
 
 ListItem.propTypes = {
@@ -228,12 +227,4 @@ ListItem.defaultProps = {
   selected: false,
 };
 
-ListItem.contextTypes = {
-  dense: PropTypes.bool,
-};
-
-ListItem.childContextTypes = {
-  dense: PropTypes.bool,
-};
-
 export default withStyles(styles, { name: 'MuiListItem' })(ListItem);
diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js
index 8144700dabd4f4..433fab71185cb0 100644
--- a/packages/material-ui/src/ListItem/ListItem.test.js
+++ b/packages/material-ui/src/ListItem/ListItem.test.js
@@ -1,175 +1,188 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { getClasses, createMount } from '../test-utils';
 import ListItemText from '../ListItemText';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
 import ListItem from './ListItem';
 import ListItemAvatar from '../ListItemAvatar';
 import Avatar from '../Avatar';
 import ButtonBase from '../ButtonBase';
+import ListContext from '../List/ListContext';
+import MergeListContext from './MergeListContext';
 
 describe('<ListItem />', () => {
-  let shallow;
+  let mount;
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<ListItem />);
+    mount = createMount();
+  });
+
+  after(() => {
+    mount.cleanUp();
   });
 
   it('should render a div', () => {
-    const wrapper = shallow(<ListItem component="div" />);
-    assert.strictEqual(wrapper.name(), 'div');
+    const wrapper = mount(<ListItem component="div" />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.name(), 'div');
   });
 
   it('should render a li', () => {
-    const wrapper = shallow(<ListItem />);
-    assert.strictEqual(wrapper.name(), 'li');
+    const wrapper = mount(<ListItem />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.name(), 'li');
   });
 
   it('should render with the user, root and gutters classes', () => {
-    const wrapper = shallow(<ListItem className="woofListItem" />);
-    assert.strictEqual(wrapper.hasClass('woofListItem'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.gutters), true);
+    const wrapper = mount(<ListItem className="woofListItem" />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass('woofListItem'), true);
+    assert.strictEqual(listItem.hasClass(classes.root), true);
+    assert.strictEqual(listItem.hasClass(classes.gutters), true);
   });
 
   it('should render with the selected class', () => {
-    const wrapper = shallow(<ListItem selected />);
-    assert.strictEqual(wrapper.hasClass(classes.selected), true);
+    const wrapper = mount(<ListItem selected />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass(classes.selected), true);
   });
 
   it('should disable the gutters', () => {
-    const wrapper = shallow(<ListItem disableGutters />);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(
-      wrapper.hasClass(classes.gutters),
-      false,
-      'should not have the gutters class',
-    );
+    const wrapper = mount(<ListItem disableGutters />);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass(classes.root), true);
+    assert.strictEqual(listItem.hasClass(classes.gutters), false);
   });
 
   it('should use dense class when ListItemAvatar is present', () => {
-    const wrapper = shallow(
-      <ListItem>
-        <ListItemAvatar>
-          <Avatar />
-        </ListItemAvatar>
-      </ListItem>,
-      {
-        context: {
-          dense: false,
-        },
-      },
+    const wrapper = mount(
+      <ListContext.Provider value={{ dense: false }}>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar />
+          </ListItemAvatar>
+        </ListItem>
+      </ListContext.Provider>,
     );
-
-    assert.strictEqual(wrapper.hasClass(classes.dense), true);
+    const listItem = wrapper.find(MergeListContext).childAt(0);
+    assert.strictEqual(listItem.hasClass(classes.dense), true);
   });
 
   describe('prop: button', () => {
     it('should render a div', () => {
-      const wrapper = shallow(<ListItem button />);
-      assert.strictEqual(wrapper.props().component, 'div');
+      const wrapper = mount(<ListItem button />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'div');
     });
   });
 
   describe('prop: component', () => {
     it('should change the component', () => {
-      const wrapper = shallow(<ListItem button component="a" />);
-      assert.strictEqual(wrapper.props().component, 'a');
+      const wrapper = mount(<ListItem button component="a" />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'a');
     });
 
     it('should change the component', () => {
-      const wrapper = shallow(<ListItem button component="li" />);
-      assert.strictEqual(wrapper.props().component, 'li');
+      const wrapper = mount(<ListItem button component="li" />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'li');
     });
   });
 
   describe('context: dense', () => {
     it('should forward the context', () => {
-      const wrapper = shallow(<ListItem />);
-      assert.strictEqual(
-        wrapper.instance().getChildContext().dense,
-        false,
-        'dense should be false by default',
+      let context = null;
+      const wrapper = mount(
+        <ListItem>
+          <ListContext.Consumer>
+            {options => {
+              context = options;
+            }}
+          </ListContext.Consumer>
+        </ListItem>,
       );
-
+      assert.strictEqual(context.dense, false);
       wrapper.setProps({ dense: true });
-      assert.strictEqual(
-        wrapper.instance().getChildContext().dense,
-        true,
-        'dense should be true when set',
-      );
+      assert.strictEqual(context.dense, true);
     });
   });
 
   describe('secondary action', () => {
     it('should wrap with a container', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem>
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'li');
-      assert.strictEqual(wrapper.childAt(0).type(), 'div');
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'li');
+      assert.strictEqual(listItem.childAt(0).type(), 'div');
     });
 
     it('should accept a component property', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem component="span">
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'li');
-      assert.strictEqual(wrapper.childAt(0).type(), 'span');
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'li');
+      assert.strictEqual(listItem.childAt(0).type(), 'span');
     });
 
     it('should accet a button property', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem button>
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'li');
-      assert.strictEqual(wrapper.childAt(0).type(), ButtonBase);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'li');
+      assert.strictEqual(listItem.childAt(0).type(), ButtonBase);
     });
 
     it('should accept a ContainerComponent property', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem ContainerComponent="div">
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.type(), 'div');
-      assert.strictEqual(wrapper.childAt(0).type(), 'div');
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.type(), 'div');
+      assert.strictEqual(listItem.childAt(0).type(), 'div');
     });
 
     it('should allow customization of the wrapper', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItem ContainerProps={{ className: 'bubu' }}>
           <ListItemText primary="primary" />
           <ListItemSecondaryAction />
         </ListItem>,
       );
-      assert.strictEqual(wrapper.hasClass(classes.container), true);
-      assert.strictEqual(wrapper.hasClass('bubu'), true);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.hasClass(classes.container), true);
+      assert.strictEqual(listItem.hasClass('bubu'), true);
     });
   });
 
   describe('prop: focusVisibleClassName', () => {
     it('should merge the class names', () => {
-      const wrapper = shallow(<ListItem button focusVisibleClassName="focusVisibleClassName" />);
-      assert.strictEqual(wrapper.props().component, 'div');
+      const wrapper = mount(<ListItem button focusVisibleClassName="focusVisibleClassName" />);
+      const listItem = wrapper.find(MergeListContext).childAt(0);
+      assert.strictEqual(listItem.props().component, 'div');
       assert.strictEqual(
-        wrapper.props().focusVisibleClassName,
+        listItem.props().focusVisibleClassName,
         `${classes.focusVisible} focusVisibleClassName`,
       );
     });
diff --git a/packages/material-ui/src/ListItem/MergeListContext.d.ts b/packages/material-ui/src/ListItem/MergeListContext.d.ts
new file mode 100644
index 00000000000000..4502151b2170e2
--- /dev/null
+++ b/packages/material-ui/src/ListItem/MergeListContext.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface MergeWithListContextProps {
+  dense?: boolean;
+}
+
+declare const MergeWithListContext: React.ComponentType<MergeWithListContextProps>;
+
+export default MergeWithListContext;
diff --git a/packages/material-ui/src/ListItem/MergeListContext.js b/packages/material-ui/src/ListItem/MergeListContext.js
new file mode 100644
index 00000000000000..0f9c948a89aca2
--- /dev/null
+++ b/packages/material-ui/src/ListItem/MergeListContext.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ListContext from '../List/ListContext';
+
+/**
+ * @ignore - internal component.
+ *
+ * Consumes a context and passes that context merged with its props.
+ */
+function MergeListContext(props) {
+  const { children, dense: denseProp } = props;
+  return (
+    <ListContext.Consumer>
+      {context => {
+        const childContext = { dense: denseProp || context.dense || false };
+
+        return (
+          <ListContext.Provider value={childContext}>{children(childContext)}</ListContext.Provider>
+        );
+      }}
+    </ListContext.Consumer>
+  );
+}
+
+MergeListContext.propTypes = {
+  children: PropTypes.func.isRequired,
+  dense: PropTypes.bool.isRequired,
+};
+
+export default MergeListContext;
diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
index 5f842d7f23c89f..d90735c1c92097 100644
--- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
+++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
+import ListContext from '../List/ListContext';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -23,30 +24,36 @@ export const styles = theme => ({
 /**
  * This is a simple wrapper to apply the `dense` mode styles to `Avatar`.
  */
-function ListItemAvatar(props, context) {
-  const { children, classes, className: classNameProp, ...other } = props;
+function ListItemAvatar(props) {
+  const { children, classes, className, ...other } = props;
 
-  if (context.dense === undefined) {
-    warning(
-      false,
-      `Material-UI: <ListItemAvatar> is a simple wrapper to apply the dense styles
-      to <Avatar>. You do not need it unless you are controlling the <List> dense property.`,
-    );
-    return props.children;
-  }
+  return (
+    <ListContext.Consumer>
+      {context => {
+        if (context.dense === undefined) {
+          warning(
+            false,
+            `Material-UI: <ListItemAvatar> is a simple wrapper to apply the dense styles
+        to <Avatar>. You do not need it unless you are controlling the <List> dense property.`,
+          );
+          return props.children;
+        }
 
-  return React.cloneElement(children, {
-    className: classNames(
-      { [classes.root]: context.dense },
-      classNameProp,
-      children.props.className,
-    ),
-    childrenClassName: classNames(
-      { [classes.icon]: context.dense },
-      children.props.childrenClassName,
-    ),
-    ...other,
-  });
+        return React.cloneElement(children, {
+          className: classNames(
+            { [classes.root]: context.dense },
+            className,
+            children.props.className,
+          ),
+          childrenClassName: classNames(
+            { [classes.icon]: context.dense },
+            children.props.childrenClassName,
+          ),
+          ...other,
+        });
+      }}
+    </ListContext.Consumer>
+  );
 }
 
 ListItemAvatar.propTypes = {
@@ -65,10 +72,6 @@ ListItemAvatar.propTypes = {
   className: PropTypes.string,
 };
 
-ListItemAvatar.contextTypes = {
-  dense: PropTypes.bool,
-};
-
 ListItemAvatar.muiName = 'ListItemAvatar';
 
 export default withStyles(styles, { name: 'MuiListItemAvatar' })(ListItemAvatar);
diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js
index 43fc4dd18079f2..0accb23686e001 100644
--- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js
+++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.test.js
@@ -1,38 +1,40 @@
 import React from 'react';
 import { assert } from 'chai';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
-import { createShallow, getClasses } from '../test-utils';
+import { createMount, getClasses } from '../test-utils';
 import Avatar from '../Avatar';
 import ListItemAvatar from './ListItemAvatar';
+import ListContext from '../List/ListContext';
 
 describe('<ListItemAvatar />', () => {
-  let shallow;
+  let mount;
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
+    mount = createMount();
     classes = getClasses(
       <ListItemAvatar className="foo">
         <Avatar className="bar" />
       </ListItemAvatar>,
-      { context: { dense: true } },
     );
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('should render with the user and root classes', () => {
-    const wrapper = shallow(
-      <ListItemAvatar className="foo">
-        <Avatar className="bar" />
-      </ListItemAvatar>,
-      {
-        context: {
-          dense: true,
-        },
-      },
+    const wrapper = mount(
+      <ListContext.Provider value={{ dense: true }}>
+        <ListItemAvatar className="foo">
+          <Avatar className="bar" />
+        </ListItemAvatar>
+      </ListContext.Provider>,
     );
-    assert.strictEqual(wrapper.hasClass('foo'), true);
-    assert.strictEqual(wrapper.hasClass('bar'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    const avatar = wrapper.find(Avatar);
+    assert.strictEqual(avatar.hasClass('foo'), true);
+    assert.strictEqual(avatar.hasClass('bar'), true);
+    assert.strictEqual(avatar.hasClass(classes.root), true);
   });
 
   describe('List', () => {
@@ -45,22 +47,19 @@ describe('<ListItemAvatar />', () => {
     });
 
     it('should render an Avatar', () => {
-      const wrapper = shallow(
-        <ListItemAvatar>
-          <Avatar />
-        </ListItemAvatar>,
-        {
-          context: {
-            dense: true,
-          },
-        },
+      const wrapper = mount(
+        <ListContext.Provider value={{ dense: true }}>
+          <ListItemAvatar>
+            <Avatar />
+          </ListItemAvatar>
+        </ListContext.Provider>,
       );
-      assert.strictEqual(wrapper.type(), Avatar);
+      assert.strictEqual(wrapper.type(), ListItemAvatar);
       assert.strictEqual(consoleErrorMock.callCount(), 0);
     });
 
     it('should warn in a wrong context', () => {
-      shallow(
+      mount(
         <ListItemAvatar>
           <Avatar />
         </ListItemAvatar>,
diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js
index 07043f03b22ae4..ab06922bc692a6 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
+import ListContext from '../List/ListContext';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -40,7 +41,7 @@ export const styles = theme => ({
   textDense: {},
 });
 
-function ListItemText(props, context) {
+function ListItemText(props) {
   const {
     children,
     classes,
@@ -53,53 +54,58 @@ function ListItemText(props, context) {
     secondaryTypographyProps,
     ...other
   } = props;
-  const { dense } = context;
 
-  let primary = primaryProp != null ? primaryProp : children;
-  if (primary != null && primary.type !== Typography && !disableTypography) {
-    primary = (
-      <Typography
-        variant="subheading"
-        internalDeprecatedVariant
-        className={classNames(classes.primary, { [classes.textDense]: dense })}
-        component="span"
-        {...primaryTypographyProps}
-      >
-        {primary}
-      </Typography>
-    );
-  }
+  return (
+    <ListContext.Consumer>
+      {({ dense }) => {
+        let primary = primaryProp != null ? primaryProp : children;
+        if (primary != null && primary.type !== Typography && !disableTypography) {
+          primary = (
+            <Typography
+              variant="subheading"
+              internalDeprecatedVariant
+              className={classNames(classes.primary, { [classes.textDense]: dense })}
+              component="span"
+              {...primaryTypographyProps}
+            >
+              {primary}
+            </Typography>
+          );
+        }
 
-  let secondary = secondaryProp;
-  if (secondary != null && secondary.type !== Typography && !disableTypography) {
-    secondary = (
-      <Typography
-        className={classNames(classes.secondary, {
-          [classes.textDense]: dense,
-        })}
-        color="textSecondary"
-        {...secondaryTypographyProps}
-      >
-        {secondary}
-      </Typography>
-    );
-  }
+        let secondary = secondaryProp;
+        if (secondary != null && secondary.type !== Typography && !disableTypography) {
+          secondary = (
+            <Typography
+              className={classNames(classes.secondary, {
+                [classes.textDense]: dense,
+              })}
+              color="textSecondary"
+              {...secondaryTypographyProps}
+            >
+              {secondary}
+            </Typography>
+          );
+        }
 
-  return (
-    <div
-      className={classNames(
-        classes.root,
-        {
-          [classes.dense]: dense,
-          [classes.inset]: inset,
-        },
-        classNameProp,
-      )}
-      {...other}
-    >
-      {primary}
-      {secondary}
-    </div>
+        return (
+          <div
+            className={classNames(
+              classes.root,
+              {
+                [classes.dense]: dense,
+                [classes.inset]: inset,
+              },
+              classNameProp,
+            )}
+            {...other}
+          >
+            {primary}
+            {secondary}
+          </div>
+        );
+      }}
+    </ListContext.Consumer>
   );
 }
 
@@ -154,8 +160,4 @@ ListItemText.defaultProps = {
   inset: false,
 };
 
-ListItemText.contextTypes = {
-  dense: PropTypes.bool,
-};
-
 export default withStyles(styles, { name: 'MuiListItemText' })(ListItemText);
diff --git a/packages/material-ui/src/ListItemText/ListItemText.test.js b/packages/material-ui/src/ListItemText/ListItemText.test.js
index 6e476a603859dd..3b991eca150439 100644
--- a/packages/material-ui/src/ListItemText/ListItemText.test.js
+++ b/packages/material-ui/src/ListItemText/ListItemText.test.js
@@ -1,166 +1,177 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '../test-utils';
+import { getClasses, createMount } from '../test-utils';
 import Typography from '../Typography';
 import ListItemText from './ListItemText';
 
 describe('<ListItemText />', () => {
-  let shallow;
+  let mount;
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
+    mount = createMount();
     classes = getClasses(<ListItemText />);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('should render a div', () => {
-    const wrapper = shallow(<ListItemText />);
-    assert.strictEqual(wrapper.name(), 'div');
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    const wrapper = mount(<ListItemText />);
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.name(), 'div');
+    assert.strictEqual(listItemText.hasClass(classes.root), true);
   });
 
   it('should render with the user and root classes', () => {
-    const wrapper = shallow(<ListItemText className="woofListItemText" />);
-    assert.strictEqual(wrapper.hasClass('woofListItemText'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    const wrapper = mount(<ListItemText className="woofListItemText" />);
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.hasClass('woofListItemText'), true);
+    assert.strictEqual(listItemText.hasClass(classes.root), true);
   });
 
   it('should render with inset class', () => {
-    const wrapper = shallow(<ListItemText inset />);
-    assert.strictEqual(wrapper.hasClass(classes.inset), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    const wrapper = mount(<ListItemText inset />);
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.hasClass(classes.inset), true);
+    assert.strictEqual(listItemText.hasClass(classes.root), true);
   });
 
   it('should render with no children', () => {
-    const wrapper = shallow(<ListItemText />);
-    assert.strictEqual(wrapper.children().length, 0);
+    const wrapper = mount(<ListItemText />);
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.children().length, 0);
   });
 
   describe('prop: primary', () => {
     it('should render primary text', () => {
-      const wrapper = shallow(<ListItemText primary="This is the primary text" />);
-      assert.strictEqual(wrapper.children().length, 1);
-      assert.strictEqual(wrapper.childAt(0).type(), Typography);
-      assert.strictEqual(wrapper.childAt(0).props().variant, 'subheading');
+      const wrapper = mount(<ListItemText primary="This is the primary text" />);
+      const listItemText = wrapper.childAt(0).childAt(0);
+      assert.strictEqual(listItemText.children().length, 1);
+      assert.strictEqual(listItemText.childAt(0).type(), Typography);
+      assert.strictEqual(listItemText.childAt(0).props().variant, 'subheading');
       assert.strictEqual(
         wrapper
           .childAt(0)
           .children()
-          .equals('This is the primary text'),
-        true,
-        'should have the primary text',
+          .text(),
+        'This is the primary text',
       );
     });
 
     it('should use the primary node', () => {
       const primary = <span />;
-      const wrapper = shallow(<ListItemText primary={primary} />);
+      const wrapper = mount(<ListItemText primary={primary} />);
       assert.strictEqual(wrapper.contains(primary), true);
     });
 
     it('should use the children prop as primary node', () => {
       const primary = <span />;
-      const wrapper = shallow(<ListItemText>{primary}</ListItemText>);
+      const wrapper = mount(<ListItemText>{primary}</ListItemText>);
       assert.strictEqual(wrapper.contains(primary), true);
     });
 
     it('should read 0 as primary', () => {
-      const wrapper = shallow(<ListItemText primary={0} />);
-      assert.strictEqual(wrapper.childAt(0).type(), Typography);
+      const wrapper = mount(<ListItemText primary={0} />);
+      const listItemText = wrapper.childAt(0).childAt(0);
+      assert.strictEqual(listItemText.childAt(0).type(), Typography);
     });
   });
 
   describe('prop: secondary', () => {
     it('should render secondary text', () => {
-      const wrapper = shallow(<ListItemText secondary="This is the secondary text" />);
-      assert.strictEqual(wrapper.children().length, 1, 'should have 1 child');
-      assert.strictEqual(wrapper.childAt(0).type(), Typography);
-      assert.strictEqual(wrapper.childAt(0).props().color, 'textSecondary');
+      const wrapper = mount(<ListItemText secondary="This is the secondary text" />);
+      const listItemText = wrapper.childAt(0).childAt(0);
+      assert.strictEqual(listItemText.children().length, 1, 'should have 1 child');
+      assert.strictEqual(listItemText.childAt(0).type(), Typography);
+      assert.strictEqual(listItemText.childAt(0).props().color, 'textSecondary');
       assert.strictEqual(
-        wrapper
+        listItemText
           .childAt(0)
           .children()
-          .equals('This is the secondary text'),
-        true,
+          .text(),
+        'This is the secondary text',
       );
     });
 
     it('should use the secondary node', () => {
       const secondary = <span />;
-      const wrapper = shallow(<ListItemText secondary={secondary} />);
+      const wrapper = mount(<ListItemText secondary={secondary} />);
       assert.strictEqual(wrapper.contains(secondary), true);
     });
 
     it('should read 0 as secondary', () => {
-      const wrapper = shallow(<ListItemText secondary={0} />);
-      assert.strictEqual(wrapper.childAt(0).type(), Typography);
+      const wrapper = mount(<ListItemText secondary={0} />);
+      const listItemText = wrapper.childAt(0).childAt(0);
+      assert.strictEqual(listItemText.childAt(0).type(), Typography);
     });
   });
 
   describe('prop: disableTypography', () => {
     it('should wrap children in `<Typography/>` by default', () => {
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItemText primary="This is the primary text" secondary="This is the secondary text" />,
       );
-
-      assert.strictEqual(wrapper.children().length, 2);
-      assert.strictEqual(wrapper.childAt(0).type(), Typography);
-      assert.strictEqual(wrapper.childAt(0).props().variant, 'subheading');
+      const listItemText = wrapper.childAt(0).childAt(0);
+      assert.strictEqual(listItemText.children().length, 2);
+      assert.strictEqual(listItemText.childAt(0).type(), Typography);
+      assert.strictEqual(listItemText.childAt(0).props().variant, 'subheading');
       assert.strictEqual(
-        wrapper
+        listItemText
           .childAt(0)
           .children()
-          .equals('This is the primary text'),
-        true,
+          .text(),
+        'This is the primary text',
       );
 
-      assert.strictEqual(wrapper.childAt(1).type(), Typography);
-      assert.strictEqual(wrapper.childAt(1).props().color, 'textSecondary');
+      assert.strictEqual(listItemText.childAt(1).type(), Typography);
+      assert.strictEqual(listItemText.childAt(1).props().color, 'textSecondary');
       assert.strictEqual(
-        wrapper
+        listItemText
           .childAt(1)
           .children()
-          .equals('This is the secondary text'),
-        true,
-        'should have the secondary text',
+          .text(),
+        'This is the secondary text',
       );
     });
 
     it('should render JSX children', () => {
       const primaryChild = <p className="test">This is the primary text</p>;
       const secondaryChild = <p className="test">This is the secondary text</p>;
-      const wrapper = shallow(
+      const wrapper = mount(
         <ListItemText primary={primaryChild} secondary={secondaryChild} disableTypography />,
       );
-      assert.strictEqual(wrapper.childAt(0).equals(primaryChild), true);
-      assert.strictEqual(wrapper.childAt(1).equals(secondaryChild), true);
+      const listItemText = wrapper.childAt(0).childAt(0);
+      assert.strictEqual(listItemText.childAt(0).equals(primaryChild), true);
+      assert.strictEqual(listItemText.childAt(1).equals(secondaryChild), true);
     });
   });
 
   it('should render primary and secondary text', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <ListItemText primary="This is the primary text" secondary="This is the secondary text" />,
     );
-
-    assert.strictEqual(wrapper.children().length, 2);
-    assert.strictEqual(wrapper.childAt(0).type(), Typography);
-    assert.strictEqual(wrapper.childAt(0).props().variant, 'subheading');
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.children().length, 2);
+    assert.strictEqual(listItemText.childAt(0).type(), Typography);
+    assert.strictEqual(listItemText.childAt(0).props().variant, 'subheading');
     assert.strictEqual(
-      wrapper
+      listItemText
         .childAt(0)
         .children()
-        .equals('This is the primary text'),
-      true,
+        .text(),
+      'This is the primary text',
     );
 
-    assert.strictEqual(wrapper.childAt(1).type(), Typography);
-    assert.strictEqual(wrapper.childAt(1).props().color, 'textSecondary');
+    assert.strictEqual(listItemText.childAt(1).type(), Typography);
+    assert.strictEqual(listItemText.childAt(1).props().color, 'textSecondary');
     assert.strictEqual(
-      wrapper
+      listItemText
         .childAt(1)
         .children()
-        .equals('This is the secondary text'),
-      true,
+        .text(),
+      'This is the secondary text',
     );
   });
 
@@ -169,23 +180,24 @@ describe('<ListItemText />', () => {
       primary: 'GeneralText',
       secondary: 'SecondaryText',
     };
-    const wrapper = shallow(
+    const wrapper = mount(
       <ListItemText
         primary="This is the primary text"
         secondary="This is the secondary text"
         classes={textClasses}
       />,
     );
+    const listItemText = wrapper.childAt(0).childAt(0);
 
     assert.strictEqual(
-      wrapper
+      listItemText
         .childAt(0)
         .props()
         .className.includes('GeneralText'),
       true,
     );
     assert.strictEqual(
-      wrapper
+      listItemText
         .childAt(1)
         .props()
         .className.includes('SecondaryText'),
@@ -196,31 +208,32 @@ describe('<ListItemText />', () => {
   it('should not re-wrap the <Typography> element', () => {
     const primary = <Typography>This is the primary text</Typography>;
     const secondary = <Typography>This is the secondary text</Typography>;
-    const wrapper = shallow(<ListItemText primary={primary} secondary={secondary} />);
-    assert.strictEqual(wrapper.childAt(0).props().children, primary.props.children);
-    assert.strictEqual(wrapper.childAt(1).props().children, secondary.props.children);
+    const wrapper = mount(<ListItemText primary={primary} secondary={secondary} />);
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.childAt(0).props().children, primary.props.children);
+    assert.strictEqual(listItemText.childAt(1).props().children, secondary.props.children);
   });
 
   it('should pass primaryTypographyProps to primary Typography component', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <ListItemText
         primary="This is the primary text"
         primaryTypographyProps={{ color: 'inherit' }}
       />,
     );
-
-    assert.strictEqual(wrapper.childAt(0).props().color, 'inherit');
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.childAt(0).props().color, 'inherit');
   });
 
   it('should pass secondaryTypographyProps to secondary Typography component', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <ListItemText
         primary="This is the primary text"
         secondary="This is the secondary text"
         secondaryTypographyProps={{ color: 'inherit' }}
       />,
     );
-
-    assert.strictEqual(wrapper.childAt(1).props().color, 'inherit');
+    const listItemText = wrapper.childAt(0).childAt(0);
+    assert.strictEqual(listItemText.childAt(1).props().color, 'inherit');
   });
 });