diff --git a/docs/src/pages/components/tree-view/BarTreeView.js b/docs/src/pages/components/tree-view/BarTreeView.js
index f6a90ded0ea7e7..e658c294d54c90 100644
--- a/docs/src/pages/components/tree-view/BarTreeView.js
+++ b/docs/src/pages/components/tree-view/BarTreeView.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, alpha } from '@material-ui/core/styles';
+import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -8,53 +8,37 @@ import TreeItem, { useTreeItem } from '@material-ui/lab/TreeItem';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    height: 240,
-    flexGrow: 1,
-    maxWidth: 400,
-    position: 'relative',
+const CustomContentRoot = styled('div')(({ theme }) => ({
+  WebkitTapHighlightColor: 'transparent',
+  '&:hover, &.Mui-disabled, &.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused, &.Mui-selected:hover': {
+    backgroundColor: 'transparent',
   },
-});
-
-const useContentStyles = makeStyles((theme) => ({
-  root: {
-    WebkitTapHighlightColor: 'transparent',
-    '&:hover, &$disabled, &$focused, &$selected, &$selected$focused, &$selected:hover': {
-      backgroundColor: 'transparent',
-    },
-  },
-  label: {
-    width: '100%',
-    paddingLeft: 4,
-    position: 'relative',
-  },
-  bar: {
+  [`& .MuiTreeItem-contentBar`]: {
     position: 'absolute',
     width: '100%',
     height: 24,
     left: 0,
-    '$root:hover &': {
+    '&:hover &': {
       backgroundColor: theme.palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
     },
-    '$root$disabled &': {
+    '&.Mui-disabled &': {
       opacity: theme.palette.action.disabledOpacity,
       backgroundColor: 'transparent',
     },
-    '$root$focused &': {
+    '&.Mui-focused &': {
       backgroundColor: theme.palette.action.focus,
     },
-    '$root$selected &': {
+    '&.Mui-selected &': {
       backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity,
       ),
     },
-    '$root$selected:hover &': {
+    '&.Mui-selected:hover &': {
       backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
@@ -67,17 +51,13 @@ const useContentStyles = makeStyles((theme) => ({
         ),
       },
     },
-    '$root$selected$focused &': {
+    '&.Mui-selected.Mui-focused &': {
       backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
       ),
     },
   },
-  expanded: {},
-  selected: {},
-  focused: {},
-  disabled: {},
 }));
 
 const CustomContent = React.forwardRef(function CustomContent(props, ref) {
@@ -91,8 +71,6 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
     displayIcon,
   } = props;
 
-  const contentClasses = useContentStyles();
-
   const {
     disabled,
     expanded,
@@ -115,24 +93,23 @@ const CustomContent = React.forwardRef(function CustomContent(props, ref) {
   };
 
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    <div
-      className={clsx(className, classes.root, contentClasses.root, {
-        [contentClasses.expanded]: expanded,
-        [contentClasses.selected]: selected,
-        [contentClasses.focused]: focused,
-        [contentClasses.disabled]: disabled,
+    <CustomContentRoot
+      className={clsx(className, classes.root, {
+        'Mui-expanded': expanded,
+        'Mui-selected': selected,
+        'Mui-focused': focused,
+        'Mui-disabled': disabled,
       })}
       onClick={handleClick}
       onMouseDown={handleMouseDown}
       ref={ref}
     >
-      <div className={contentClasses.bar} />
+      <div className="MuiTreeItem-contentBar" />
       <div className={classes.iconContainer}>{icon}</div>
       <Typography component="div" className={classes.label}>
         {label}
       </Typography>
-    </div>
+    </CustomContentRoot>
   );
 });
 
@@ -172,14 +149,12 @@ const CustomTreeItem = (props) => (
 );
 
 export default function BarTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="icon expansion"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 240, flexGrow: 1, maxWidth: 400, position: 'relative' }}
     >
       <CustomTreeItem nodeId="1" label="Applications">
         <CustomTreeItem nodeId="2" label="Calendar" />
diff --git a/docs/src/pages/components/tree-view/BarTreeView.tsx b/docs/src/pages/components/tree-view/BarTreeView.tsx
index 544bdfcd49c8fd..4ad1b666b7c3c2 100644
--- a/docs/src/pages/components/tree-view/BarTreeView.tsx
+++ b/docs/src/pages/components/tree-view/BarTreeView.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, alpha } from '@material-ui/core/styles';
+import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -11,53 +11,37 @@ import TreeItem, {
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    height: 240,
-    flexGrow: 1,
-    maxWidth: 400,
-    position: 'relative',
+const CustomContentRoot = styled('div')(({ theme }) => ({
+  WebkitTapHighlightColor: 'transparent',
+  '&:hover, &.Mui-disabled, &.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused, &.Mui-selected:hover': {
+    backgroundColor: 'transparent',
   },
-});
-
-const useContentStyles = makeStyles((theme) => ({
-  root: {
-    WebkitTapHighlightColor: 'transparent',
-    '&:hover, &$disabled, &$focused, &$selected, &$selected$focused, &$selected:hover': {
-      backgroundColor: 'transparent',
-    },
-  },
-  label: {
-    width: '100%',
-    paddingLeft: 4,
-    position: 'relative',
-  },
-  bar: {
+  [`& .MuiTreeItem-contentBar`]: {
     position: 'absolute',
     width: '100%',
     height: 24,
     left: 0,
-    '$root:hover &': {
+    '&:hover &': {
       backgroundColor: theme.palette.action.hover,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
     },
-    '$root$disabled &': {
+    '&.Mui-disabled &': {
       opacity: theme.palette.action.disabledOpacity,
       backgroundColor: 'transparent',
     },
-    '$root$focused &': {
+    '&.Mui-focused &': {
       backgroundColor: theme.palette.action.focus,
     },
-    '$root$selected &': {
+    '&.Mui-selected &': {
       backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity,
       ),
     },
-    '$root$selected:hover &': {
+    '&.Mui-selected:hover &': {
       backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
@@ -70,17 +54,13 @@ const useContentStyles = makeStyles((theme) => ({
         ),
       },
     },
-    '$root$selected$focused &': {
+    '&.Mui-selected.Mui-focused &': {
       backgroundColor: alpha(
         theme.palette.primary.main,
         theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
       ),
     },
   },
-  expanded: {},
-  selected: {},
-  focused: {},
-  disabled: {},
 }));
 
 const CustomContent = React.forwardRef(function CustomContent(
@@ -97,8 +77,6 @@ const CustomContent = React.forwardRef(function CustomContent(
     displayIcon,
   } = props;
 
-  const contentClasses = useContentStyles();
-
   const {
     disabled,
     expanded,
@@ -121,24 +99,23 @@ const CustomContent = React.forwardRef(function CustomContent(
   };
 
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    <div
-      className={clsx(className, classes.root, contentClasses.root, {
-        [contentClasses.expanded]: expanded,
-        [contentClasses.selected]: selected,
-        [contentClasses.focused]: focused,
-        [contentClasses.disabled]: disabled,
+    <CustomContentRoot
+      className={clsx(className, classes.root, {
+        'Mui-expanded': expanded,
+        'Mui-selected': selected,
+        'Mui-focused': focused,
+        'Mui-disabled': disabled,
       })}
       onClick={handleClick}
       onMouseDown={handleMouseDown}
       ref={ref as React.Ref<HTMLDivElement>}
     >
-      <div className={contentClasses.bar} />
+      <div className="MuiTreeItem-contentBar" />
       <div className={classes.iconContainer}>{icon}</div>
       <Typography component="div" className={classes.label}>
         {label}
       </Typography>
-    </div>
+    </CustomContentRoot>
   );
 });
 
@@ -147,14 +124,12 @@ const CustomTreeItem = (props: TreeItemProps) => (
 );
 
 export default function BarTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="icon expansion"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 240, flexGrow: 1, maxWidth: 400, position: 'relative' }}
     >
       <CustomTreeItem nodeId="1" label="Applications">
         <CustomTreeItem nodeId="2" label="Calendar" />
diff --git a/docs/src/pages/components/tree-view/ControlledTreeView.js b/docs/src/pages/components/tree-view/ControlledTreeView.js
index 1cf112309cd8bc..2025cf16f19d25 100644
--- a/docs/src/pages/components/tree-view/ControlledTreeView.js
+++ b/docs/src/pages/components/tree-view/ControlledTreeView.js
@@ -1,24 +1,12 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 270,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-  actions: {
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 export default function ControlledTreeView() {
-  const classes = useStyles();
   const [expanded, setExpanded] = React.useState([]);
   const [selected, setSelected] = React.useState([]);
 
@@ -43,15 +31,15 @@ export default function ControlledTreeView() {
   };
 
   return (
-    <div className={classes.root}>
-      <div className={classes.actions}>
+    <Box sx={{ height: 270, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ mb: 1 }}>
         <Button onClick={handleExpandClick}>
           {expanded.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
         <Button onClick={handleSelectClick}>
           {selected.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
-      </div>
+      </Box>
       <TreeView
         aria-label="controlled"
         defaultCollapseIcon={<ExpandMoreIcon />}
@@ -76,6 +64,6 @@ export default function ControlledTreeView() {
           </TreeItem>
         </TreeItem>
       </TreeView>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/tree-view/ControlledTreeView.tsx b/docs/src/pages/components/tree-view/ControlledTreeView.tsx
index 5bc7e011c95a6b..0a6ba82542326a 100644
--- a/docs/src/pages/components/tree-view/ControlledTreeView.tsx
+++ b/docs/src/pages/components/tree-view/ControlledTreeView.tsx
@@ -1,24 +1,12 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeView from '@material-ui/lab/TreeView';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 270,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-  actions: {
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 export default function ControlledTreeView() {
-  const classes = useStyles();
   const [expanded, setExpanded] = React.useState<string[]>([]);
   const [selected, setSelected] = React.useState<string[]>([]);
 
@@ -43,15 +31,15 @@ export default function ControlledTreeView() {
   };
 
   return (
-    <div className={classes.root}>
-      <div className={classes.actions}>
+    <Box sx={{ height: 270, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ mb: 1 }}>
         <Button onClick={handleExpandClick}>
           {expanded.length === 0 ? 'Expand all' : 'Collapse all'}
         </Button>
         <Button onClick={handleSelectClick}>
           {selected.length === 0 ? 'Select all' : 'Unselect all'}
         </Button>
-      </div>
+      </Box>
       <TreeView
         aria-label="controlled"
         defaultCollapseIcon={<ExpandMoreIcon />}
@@ -76,6 +64,6 @@ export default function ControlledTreeView() {
           </TreeItem>
         </TreeItem>
       </TreeView>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.js b/docs/src/pages/components/tree-view/CustomizedTreeView.js
index bb9a3ec676ce52..8b5f26b6ae6b11 100644
--- a/docs/src/pages/components/tree-view/CustomizedTreeView.js
+++ b/docs/src/pages/components/tree-view/CustomizedTreeView.js
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import SvgIcon from '@material-ui/core/SvgIcon';
-import { alpha, makeStyles, withStyles } from '@material-ui/core/styles';
+import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
-import TreeItem from '@material-ui/lab/TreeItem';
+import TreeItem, { treeItemClasses } from '@material-ui/lab/TreeItem';
 import Collapse from '@material-ui/core/Collapse';
 // web.cjs is required for IE11 support
 import { useSpring, animated } from 'react-spring/web.cjs';
@@ -66,38 +66,30 @@ TransitionComponent.propTypes = {
   in: PropTypes.bool,
 };
 
-const StyledTreeItem = withStyles((theme) => ({
-  iconContainer: {
+const StyledTreeItem = styled((props) => (
+  <TreeItem {...props} TransitionComponent={TransitionComponent} />
+))(({ theme }) => ({
+  [`& .${treeItemClasses.iconContainer}`]: {
     '& .close': {
       opacity: 0.3,
     },
   },
-  group: {
+  [`& .${treeItemClasses.group}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
   },
-}))((props) => <TreeItem {...props} TransitionComponent={TransitionComponent} />);
-
-const useStyles = makeStyles({
-  root: {
-    height: 264,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
+}));
 
 export default function CustomizedTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="customized"
-      className={classes.root}
       defaultExpanded={['1']}
       defaultCollapseIcon={<MinusSquare />}
       defaultExpandIcon={<PlusSquare />}
       defaultEndIcon={<CloseSquare />}
+      sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}
     >
       <StyledTreeItem nodeId="1" label="Main">
         <StyledTreeItem nodeId="2" label="Hello" />
diff --git a/docs/src/pages/components/tree-view/CustomizedTreeView.tsx b/docs/src/pages/components/tree-view/CustomizedTreeView.tsx
index 9bf178f5694707..ad66e6a2d17fb3 100644
--- a/docs/src/pages/components/tree-view/CustomizedTreeView.tsx
+++ b/docs/src/pages/components/tree-view/CustomizedTreeView.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-import { alpha, makeStyles, withStyles, Theme } from '@material-ui/core/styles';
+import { alpha, experimentalStyled as styled } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
-import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
+import TreeItem, { TreeItemProps, treeItemClasses } from '@material-ui/lab/TreeItem';
 import Collapse from '@material-ui/core/Collapse';
 // web.cjs is required for IE11 support
 import { useSpring, animated } from 'react-spring/web.cjs';
@@ -59,40 +59,30 @@ function TransitionComponent(props: TransitionProps) {
   );
 }
 
-const StyledTreeItem = withStyles((theme: Theme) => ({
-  iconContainer: {
+const StyledTreeItem = styled((props: TreeItemProps) => (
+  <TreeItem {...props} TransitionComponent={TransitionComponent} />
+))(({ theme }) => ({
+  [`& .${treeItemClasses.iconContainer}`]: {
     '& .close': {
       opacity: 0.3,
     },
   },
-  group: {
+  [`& .${treeItemClasses.group}`]: {
     marginLeft: 15,
     paddingLeft: 18,
     borderLeft: `1px dashed ${alpha(theme.palette.text.primary, 0.4)}`,
   },
-}))((props: TreeItemProps) => (
-  <TreeItem {...props} TransitionComponent={TransitionComponent} />
-));
-
-const useStyles = makeStyles({
-  root: {
-    height: 264,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
+}));
 
 export default function CustomizedTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="customized"
-      className={classes.root}
       defaultExpanded={['1']}
       defaultCollapseIcon={<MinusSquare />}
       defaultExpandIcon={<PlusSquare />}
       defaultEndIcon={<CloseSquare />}
+      sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}
     >
       <StyledTreeItem nodeId="1" label="Main">
         <StyledTreeItem nodeId="2" label="Hello" />
diff --git a/docs/src/pages/components/tree-view/DisabledTreeItems.js b/docs/src/pages/components/tree-view/DisabledTreeItems.js
index a673c63564a004..ce5a0063471424 100644
--- a/docs/src/pages/components/tree-view/DisabledTreeItems.js
+++ b/docs/src/pages/components/tree-view/DisabledTreeItems.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -7,27 +7,15 @@ import TreeItem from '@material-ui/lab/TreeItem';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 270,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-  actions: {
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 export default function DisabledTreeItems() {
-  const classes = useStyles();
   const [focusDisabledItems, setFocusDisabledItems] = React.useState(false);
   const handleToggle = (event) => {
     setFocusDisabledItems(event.target.checked);
   };
 
   return (
-    <div className={classes.root}>
-      <div className={classes.actions}>
+    <Box sx={{ height: 270, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ mb: 1 }}>
         <FormControlLabel
           control={
             <Switch
@@ -38,7 +26,7 @@ export default function DisabledTreeItems() {
           }
           label="Focus disabled items"
         />
-      </div>
+      </Box>
       <TreeView
         aria-label="disabled items"
         defaultCollapseIcon={<ExpandMoreIcon />}
@@ -64,6 +52,6 @@ export default function DisabledTreeItems() {
           </TreeItem>
         </TreeItem>
       </TreeView>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/tree-view/DisabledTreeItems.tsx b/docs/src/pages/components/tree-view/DisabledTreeItems.tsx
index 546b4ac225c54b..92fc980dccf8bd 100644
--- a/docs/src/pages/components/tree-view/DisabledTreeItems.tsx
+++ b/docs/src/pages/components/tree-view/DisabledTreeItems.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -7,27 +7,15 @@ import TreeItem from '@material-ui/lab/TreeItem';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Switch from '@material-ui/core/Switch';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: 270,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-  actions: {
-    marginBottom: theme.spacing(1),
-  },
-}));
-
 export default function DisabledTreeItems() {
-  const classes = useStyles();
   const [focusDisabledItems, setFocusDisabledItems] = React.useState(false);
   const handleToggle = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFocusDisabledItems(event.target.checked);
   };
 
   return (
-    <div className={classes.root}>
-      <div className={classes.actions}>
+    <Box sx={{ height: 270, flexGrow: 1, maxWidth: 400 }}>
+      <Box sx={{ mb: 1 }}>
         <FormControlLabel
           control={
             <Switch
@@ -38,7 +26,7 @@ export default function DisabledTreeItems() {
           }
           label="Focus disabled items"
         />
-      </div>
+      </Box>
       <TreeView
         aria-label="disabled items"
         defaultCollapseIcon={<ExpandMoreIcon />}
@@ -64,6 +52,6 @@ export default function DisabledTreeItems() {
           </TreeItem>
         </TreeItem>
       </TreeView>
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/tree-view/FileSystemNavigator.js b/docs/src/pages/components/tree-view/FileSystemNavigator.js
index 846bb24727f5fd..90023450b99c6d 100644
--- a/docs/src/pages/components/tree-view/FileSystemNavigator.js
+++ b/docs/src/pages/components/tree-view/FileSystemNavigator.js
@@ -1,40 +1,24 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
-  root: {
-    height: 240,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function FileSystemNavigator() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="file system navigator"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 240, flexGrow: 1, maxWidth: 400 }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />
-        <TreeItem nodeId="3" label="Chrome" />
-        <TreeItem nodeId="4" label="Webstorm" />
       </TreeItem>
       <TreeItem nodeId="5" label="Documents">
         <TreeItem nodeId="10" label="OSS" />
         <TreeItem nodeId="6" label="Material-UI">
-          <TreeItem nodeId="7" label="src">
-            <TreeItem nodeId="8" label="index.js" />
-            <TreeItem nodeId="9" label="tree-view.js" />
-          </TreeItem>
+          <TreeItem nodeId="8" label="index.js" />
         </TreeItem>
       </TreeItem>
     </TreeView>
diff --git a/docs/src/pages/components/tree-view/FileSystemNavigator.tsx b/docs/src/pages/components/tree-view/FileSystemNavigator.tsx
index 846bb24727f5fd..90023450b99c6d 100644
--- a/docs/src/pages/components/tree-view/FileSystemNavigator.tsx
+++ b/docs/src/pages/components/tree-view/FileSystemNavigator.tsx
@@ -1,40 +1,24 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
-  root: {
-    height: 240,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function FileSystemNavigator() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="file system navigator"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 240, flexGrow: 1, maxWidth: 400 }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />
-        <TreeItem nodeId="3" label="Chrome" />
-        <TreeItem nodeId="4" label="Webstorm" />
       </TreeItem>
       <TreeItem nodeId="5" label="Documents">
         <TreeItem nodeId="10" label="OSS" />
         <TreeItem nodeId="6" label="Material-UI">
-          <TreeItem nodeId="7" label="src">
-            <TreeItem nodeId="8" label="index.js" />
-            <TreeItem nodeId="9" label="tree-view.js" />
-          </TreeItem>
+          <TreeItem nodeId="8" label="index.js" />
         </TreeItem>
       </TreeItem>
     </TreeView>
diff --git a/docs/src/pages/components/tree-view/GmailTreeView.js b/docs/src/pages/components/tree-view/GmailTreeView.js
index dadb3c46754255..db1c7b8f380782 100644
--- a/docs/src/pages/components/tree-view/GmailTreeView.js
+++ b/docs/src/pages/components/tree-view/GmailTreeView.js
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TreeView from '@material-ui/lab/TreeView';
-import TreeItem from '@material-ui/lab/TreeItem';
+import TreeItem, { treeItemClasses } from '@material-ui/lab/TreeItem';
 import Typography from '@material-ui/core/Typography';
 import MailIcon from '@material-ui/icons/Mail';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -14,57 +15,38 @@ import LocalOfferIcon from '@material-ui/icons/LocalOffer';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 
-const useTreeItemStyles = makeStyles((theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-  },
-  content: {
+const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  [`& .${treeItemClasses.content}`]: {
     color: theme.palette.text.secondary,
     borderTopRightRadius: theme.spacing(2),
     borderBottomRightRadius: theme.spacing(2),
     paddingRight: theme.spacing(1),
     fontWeight: theme.typography.fontWeightMedium,
-    '&$expanded': {
+    '&.Mui-expanded': {
       fontWeight: theme.typography.fontWeightRegular,
     },
     '&:hover': {
       backgroundColor: theme.palette.action.hover,
     },
-    '&$focused, &$selected, &$selected$focused': {
+    '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': {
       backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
       color: 'var(--tree-view-color)',
     },
-    '& $label': {
+    [`& .${treeItemClasses.label}`]: {
       fontWeight: 'inherit',
       color: 'inherit',
     },
   },
-  group: {
+  [`& .${treeItemClasses.group}`]: {
     marginLeft: 0,
-    '& $content': {
+    [`& .${treeItemClasses.content}`]: {
       paddingLeft: theme.spacing(2),
     },
   },
-  expanded: {},
-  selected: {},
-  focused: {},
-  label: {},
-  labelRoot: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(0.5, 0, 0.5, 0.5),
-  },
-  labelIcon: {
-    marginRight: theme.spacing(1),
-  },
-  labelText: {
-    fontWeight: 'inherit',
-    flexGrow: 1,
-  },
 }));
 
 function StyledTreeItem(props) {
-  const classes = useTreeItemStyles();
   const {
     bgColor,
     color,
@@ -75,31 +57,22 @@ function StyledTreeItem(props) {
   } = props;
 
   return (
-    <TreeItem
+    <StyledTreeItemRoot
       label={
-        <div className={classes.labelRoot}>
-          <LabelIcon color="inherit" className={classes.labelIcon} />
-          <Typography variant="body2" className={classes.labelText}>
+        <Box sx={{ display: 'flex', alignItems: 'center', p: 0.5, pr: 0 }}>
+          <Box component={LabelIcon} color="inherit" sx={{ mr: 1 }} />
+          <Typography variant="body2" sx={{ fontWeight: 'inherit', flexGrow: 1 }}>
             {labelText}
           </Typography>
           <Typography variant="caption" color="inherit">
             {labelInfo}
           </Typography>
-        </div>
+        </Box>
       }
       style={{
         '--tree-view-color': color,
         '--tree-view-bg-color': bgColor,
       }}
-      classes={{
-        root: classes.root,
-        content: classes.content,
-        expanded: classes.expanded,
-        selected: classes.selected,
-        focused: classes.focused,
-        group: classes.group,
-        label: classes.label,
-      }}
       {...other}
     />
   );
@@ -113,25 +86,15 @@ StyledTreeItem.propTypes = {
   labelText: PropTypes.string.isRequired,
 };
 
-const useStyles = makeStyles({
-  root: {
-    height: 264,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function GmailTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="gmail"
-      className={classes.root}
       defaultExpanded={['3']}
       defaultCollapseIcon={<ArrowDropDownIcon />}
       defaultExpandIcon={<ArrowRightIcon />}
       defaultEndIcon={<div style={{ width: 24 }} />}
+      sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}
     >
       <StyledTreeItem nodeId="1" labelText="All Mail" labelIcon={MailIcon} />
       <StyledTreeItem nodeId="2" labelText="Trash" labelIcon={DeleteIcon} />
diff --git a/docs/src/pages/components/tree-view/GmailTreeView.tsx b/docs/src/pages/components/tree-view/GmailTreeView.tsx
index 6845a77fff60f0..0cb1ae83d36c0e 100644
--- a/docs/src/pages/components/tree-view/GmailTreeView.tsx
+++ b/docs/src/pages/components/tree-view/GmailTreeView.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { makeStyles, Theme } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import TreeView from '@material-ui/lab/TreeView';
-import TreeItem, { TreeItemProps } from '@material-ui/lab/TreeItem';
+import TreeItem, { TreeItemProps, treeItemClasses } from '@material-ui/lab/TreeItem';
 import Typography from '@material-ui/core/Typography';
 import MailIcon from '@material-ui/icons/Mail';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -29,57 +30,38 @@ type StyledTreeItemProps = TreeItemProps & {
   labelText: string;
 };
 
-const useTreeItemStyles = makeStyles((theme: Theme) => ({
-  root: {
-    color: theme.palette.text.secondary,
-  },
-  content: {
+const StyledTreeItemRoot = styled(TreeItem)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  [`& .${treeItemClasses.content}`]: {
     color: theme.palette.text.secondary,
     borderTopRightRadius: theme.spacing(2),
     borderBottomRightRadius: theme.spacing(2),
     paddingRight: theme.spacing(1),
     fontWeight: theme.typography.fontWeightMedium,
-    '&$expanded': {
+    '&.Mui-expanded': {
       fontWeight: theme.typography.fontWeightRegular,
     },
     '&:hover': {
       backgroundColor: theme.palette.action.hover,
     },
-    '&$focused, &$selected, &$selected$focused': {
+    '&.Mui-focused, &.Mui-selected, &.Mui-selected.Mui-focused': {
       backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`,
       color: 'var(--tree-view-color)',
     },
-    '& $label': {
+    [`& .${treeItemClasses.label}`]: {
       fontWeight: 'inherit',
       color: 'inherit',
     },
   },
-  group: {
+  [`& .${treeItemClasses.group}`]: {
     marginLeft: 0,
-    '& $content': {
+    [`& .${treeItemClasses.content}`]: {
       paddingLeft: theme.spacing(2),
     },
   },
-  expanded: {},
-  selected: {},
-  focused: {},
-  label: {},
-  labelRoot: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(0.5, 0, 0.5, 0.5),
-  },
-  labelIcon: {
-    marginRight: theme.spacing(1),
-  },
-  labelText: {
-    fontWeight: 'inherit',
-    flexGrow: 1,
-  },
 }));
 
 function StyledTreeItem(props: StyledTreeItemProps) {
-  const classes = useTreeItemStyles();
   const {
     bgColor,
     color,
@@ -90,55 +72,36 @@ function StyledTreeItem(props: StyledTreeItemProps) {
   } = props;
 
   return (
-    <TreeItem
+    <StyledTreeItemRoot
       label={
-        <div className={classes.labelRoot}>
-          <LabelIcon color="inherit" className={classes.labelIcon} />
-          <Typography variant="body2" className={classes.labelText}>
+        <Box sx={{ display: 'flex', alignItems: 'center', p: 0.5, pr: 0 }}>
+          <Box component={LabelIcon} color="inherit" sx={{ mr: 1 }} />
+          <Typography variant="body2" sx={{ fontWeight: 'inherit', flexGrow: 1 }}>
             {labelText}
           </Typography>
           <Typography variant="caption" color="inherit">
             {labelInfo}
           </Typography>
-        </div>
+        </Box>
       }
       style={{
         '--tree-view-color': color,
         '--tree-view-bg-color': bgColor,
       }}
-      classes={{
-        root: classes.root,
-        content: classes.content,
-        expanded: classes.expanded,
-        selected: classes.selected,
-        focused: classes.focused,
-        group: classes.group,
-        label: classes.label,
-      }}
       {...other}
     />
   );
 }
 
-const useStyles = makeStyles({
-  root: {
-    height: 264,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function GmailTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="gmail"
-      className={classes.root}
       defaultExpanded={['3']}
       defaultCollapseIcon={<ArrowDropDownIcon />}
       defaultExpandIcon={<ArrowRightIcon />}
       defaultEndIcon={<div style={{ width: 24 }} />}
+      sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}
     >
       <StyledTreeItem nodeId="1" labelText="All Mail" labelIcon={MailIcon} />
       <StyledTreeItem nodeId="2" labelText="Trash" labelIcon={DeleteIcon} />
diff --git a/docs/src/pages/components/tree-view/IconExpansionTreeView.js b/docs/src/pages/components/tree-view/IconExpansionTreeView.js
index 423c85359bddcf..4711280b57719b 100644
--- a/docs/src/pages/components/tree-view/IconExpansionTreeView.js
+++ b/docs/src/pages/components/tree-view/IconExpansionTreeView.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -8,14 +7,6 @@ import TreeItem, { useTreeItem } from '@material-ui/lab/TreeItem';
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    height: 240,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 const CustomContent = React.forwardRef(function CustomContent(props, ref) {
   const {
     classes,
@@ -114,14 +105,12 @@ const CustomTreeItem = (props) => (
 );
 
 export default function IconExpansionTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="icon expansion"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 240, flexGrow: 1, maxWidth: 400 }}
     >
       <CustomTreeItem nodeId="1" label="Applications">
         <CustomTreeItem nodeId="2" label="Calendar" />
diff --git a/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx b/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx
index d8f12e713a34b7..9b3b3b1f114ca3 100644
--- a/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx
+++ b/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -11,14 +10,6 @@ import TreeItem, {
 import clsx from 'clsx';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles({
-  root: {
-    height: 240,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 const CustomContent = React.forwardRef(function CustomContent(
   props: TreeItemContentProps,
   ref,
@@ -93,14 +84,12 @@ const CustomTreeItem = (props: TreeItemProps) => (
 );
 
 export default function IconExpansionTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="icon expansion"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 240, flexGrow: 1, maxWidth: 400 }}
     >
       <CustomTreeItem nodeId="1" label="Applications">
         <CustomTreeItem nodeId="2" label="Calendar" />
diff --git a/docs/src/pages/components/tree-view/MultiSelectTreeView.js b/docs/src/pages/components/tree-view/MultiSelectTreeView.js
index e3fa9b2ebf1287..32fa433eec2ea3 100644
--- a/docs/src/pages/components/tree-view/MultiSelectTreeView.js
+++ b/docs/src/pages/components/tree-view/MultiSelectTreeView.js
@@ -1,28 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
-  root: {
-    height: 216,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function MultiSelectTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="multi-select"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       multiSelect
+      sx={{ height: 216, flexGrow: 1, maxWidth: 400 }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />
diff --git a/docs/src/pages/components/tree-view/MultiSelectTreeView.tsx b/docs/src/pages/components/tree-view/MultiSelectTreeView.tsx
index e3fa9b2ebf1287..32fa433eec2ea3 100644
--- a/docs/src/pages/components/tree-view/MultiSelectTreeView.tsx
+++ b/docs/src/pages/components/tree-view/MultiSelectTreeView.tsx
@@ -1,28 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import TreeItem from '@material-ui/lab/TreeItem';
 
-const useStyles = makeStyles({
-  root: {
-    height: 216,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function MultiSelectTreeView() {
-  const classes = useStyles();
-
   return (
     <TreeView
       aria-label="multi-select"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpandIcon={<ChevronRightIcon />}
       multiSelect
+      sx={{ height: 216, flexGrow: 1, maxWidth: 400 }}
     >
       <TreeItem nodeId="1" label="Applications">
         <TreeItem nodeId="2" label="Calendar" />
diff --git a/docs/src/pages/components/tree-view/RichObjectTreeView.js b/docs/src/pages/components/tree-view/RichObjectTreeView.js
index 4dd92ab8167d31..c2bcdebcec5e18 100644
--- a/docs/src/pages/components/tree-view/RichObjectTreeView.js
+++ b/docs/src/pages/components/tree-view/RichObjectTreeView.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -26,17 +25,7 @@ const data = {
   ],
 };
 
-const useStyles = makeStyles({
-  root: {
-    height: 110,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function RichObjectTreeView() {
-  const classes = useStyles();
-
   const renderTree = (nodes) => (
     <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
       {Array.isArray(nodes.children)
@@ -48,10 +37,10 @@ export default function RichObjectTreeView() {
   return (
     <TreeView
       aria-label="rich object"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpanded={['root']}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 110, flexGrow: 1, maxWidth: 400 }}
     >
       {renderTree(data)}
     </TreeView>
diff --git a/docs/src/pages/components/tree-view/RichObjectTreeView.tsx b/docs/src/pages/components/tree-view/RichObjectTreeView.tsx
index 620843ae8167b4..9283ee4e2c1b12 100644
--- a/docs/src/pages/components/tree-view/RichObjectTreeView.tsx
+++ b/docs/src/pages/components/tree-view/RichObjectTreeView.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import TreeView from '@material-ui/lab/TreeView';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
@@ -32,17 +31,7 @@ const data: RenderTree = {
   ],
 };
 
-const useStyles = makeStyles({
-  root: {
-    height: 110,
-    flexGrow: 1,
-    maxWidth: 400,
-  },
-});
-
 export default function RichObjectTreeView() {
-  const classes = useStyles();
-
   const renderTree = (nodes: RenderTree) => (
     <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
       {Array.isArray(nodes.children)
@@ -54,10 +43,10 @@ export default function RichObjectTreeView() {
   return (
     <TreeView
       aria-label="rich object"
-      className={classes.root}
       defaultCollapseIcon={<ExpandMoreIcon />}
       defaultExpanded={['root']}
       defaultExpandIcon={<ChevronRightIcon />}
+      sx={{ height: 110, flexGrow: 1, maxWidth: 400 }}
     >
       {renderTree(data)}
     </TreeView>