diff --git a/docs/src/pages/components/pagination/Pagination.js b/docs/src/pages/components/pagination/BasicPagination.js
similarity index 100%
rename from docs/src/pages/components/pagination/Pagination.js
rename to docs/src/pages/components/pagination/BasicPagination.js
diff --git a/docs/src/pages/components/pagination/Pagination.tsx b/docs/src/pages/components/pagination/BasicPagination.tsx
similarity index 100%
rename from docs/src/pages/components/pagination/Pagination.tsx
rename to docs/src/pages/components/pagination/BasicPagination.tsx
diff --git a/docs/src/pages/components/pagination/PaginationLink.js b/docs/src/pages/components/pagination/PaginationLink.js
index 79e32f91ad6963..0ee5fed2828c37 100644
--- a/docs/src/pages/components/pagination/PaginationLink.js
+++ b/docs/src/pages/components/pagination/PaginationLink.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import Pagination from '@material-ui/lab/Pagination';
 import PaginationItem from '@material-ui/lab/PaginationItem';
@@ -13,10 +13,6 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef((props, ref) => <RouterLink innerRef={ref} {...props} />);
-
 export default function PaginationLink() {
   return (
     <Router>
diff --git a/docs/src/pages/components/pagination/PaginationLink.tsx b/docs/src/pages/components/pagination/PaginationLink.tsx
index f42abc0004cfbd..92713f6bdc6921 100644
--- a/docs/src/pages/components/pagination/PaginationLink.tsx
+++ b/docs/src/pages/components/pagination/PaginationLink.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Pagination from '@material-ui/lab/Pagination';
 import PaginationItem from '@material-ui/lab/PaginationItem';
@@ -15,12 +15,6 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
-  <RouterLink innerRef={ref} {...props} />
-));
-
 export default function PaginationLink() {
   return (
     <Router>
diff --git a/docs/src/pages/components/pagination/PaginationLink2.js b/docs/src/pages/components/pagination/PaginationLink2.js
index dfa44ba19f01aa..2eeee2f19d8be9 100644
--- a/docs/src/pages/components/pagination/PaginationLink2.js
+++ b/docs/src/pages/components/pagination/PaginationLink2.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import { usePagination } from '@material-ui/lab/Pagination';
 import Pagination from '@material-ui/lab/Pagination';
@@ -14,10 +14,6 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef((props, ref) => <RouterLink innerRef={ref} {...props} />);
-
 export default function PaginationLink2() {
   const { items } = usePagination({
     count: 10,
@@ -27,12 +23,11 @@ export default function PaginationLink2() {
     <Router>
       <Pagination>
         {items.map((item, index) => (
-          <li>
+          <li key={index.toString()}>
             <PaginationItem
               to={`/cars${item.page === 1 ? '' : `?page=${item.page}`}`}
               component={Link}
               {...item}
-              key={index.toString()}
             />
           </li>
         ))}
diff --git a/docs/src/pages/components/pagination/PaginationLink2.tsx b/docs/src/pages/components/pagination/PaginationLink2.tsx
index dc7d063868e36f..0712db084a307b 100644
--- a/docs/src/pages/components/pagination/PaginationLink2.tsx
+++ b/docs/src/pages/components/pagination/PaginationLink2.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import { usePagination } from '@material-ui/lab/Pagination';
 import Pagination from '@material-ui/lab/Pagination';
@@ -16,12 +16,6 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-// The use of React.forwardRef will no longer be required for react-router-dom v6.
-// See https://github.com/ReactTraining/react-router/issues/6056
-const Link = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
-  <RouterLink innerRef={ref} {...props} />
-));
-
 export default function PaginationLink2() {
   const { items } = usePagination({
     count: 10,
@@ -31,12 +25,11 @@ export default function PaginationLink2() {
     <Router>
       <Pagination>
         {items.map((item, index) => (
-          <li>
+          <li key={index.toString()}>
             <PaginationItem
               to={`/cars${item.page === 1 ? '' : `?page=${item.page}`}`}
               component={Link}
               {...item}
-              key={index.toString()}
             />
           </li>
         ))}
diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js b/docs/src/pages/components/pagination/PaginationRounded.js
similarity index 58%
rename from docs/src/pages/components/pagination/PaginationOutlinedRounded.js
rename to docs/src/pages/components/pagination/PaginationRounded.js
index 98ed723ed6959c..f1447c530e5413 100644
--- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.js
+++ b/docs/src/pages/components/pagination/PaginationRounded.js
@@ -10,15 +10,13 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function PaginationOutlinedRounded() {
+export default function PaginationRounded() {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
+      <Pagination count={10} shape="rounded" />
       <Pagination count={10} variant="outlined" shape="rounded" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="primary" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="secondary" />
-      <Pagination count={10} variant="outlined" shape="rounded" disabled />
     </div>
   );
 }
diff --git a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx b/docs/src/pages/components/pagination/PaginationRounded.tsx
similarity index 61%
rename from docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx
rename to docs/src/pages/components/pagination/PaginationRounded.tsx
index 1a5ff3735ded24..66df6a30535cf6 100644
--- a/docs/src/pages/components/pagination/PaginationOutlinedRounded.tsx
+++ b/docs/src/pages/components/pagination/PaginationRounded.tsx
@@ -12,15 +12,13 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
-export default function PaginationOutlinedRounded() {
+export default function PaginationRounded() {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
+      <Pagination count={10} shape="rounded" />
       <Pagination count={10} variant="outlined" shape="rounded" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="primary" />
-      <Pagination count={10} variant="outlined" shape="rounded" color="secondary" />
-      <Pagination count={10} variant="outlined" shape="rounded" disabled />
     </div>
   );
 }
diff --git a/docs/src/pages/components/pagination/pagination.md b/docs/src/pages/components/pagination/pagination.md
index 8308eb65207b52..6db2391dee9737 100644
--- a/docs/src/pages/components/pagination/pagination.md
+++ b/docs/src/pages/components/pagination/pagination.md
@@ -9,15 +9,15 @@ components: Pagination
 
 ## Pagination
 
-{{"demo": "pages/components/pagination/Pagination.js"}}
+{{"demo": "pages/components/pagination/BasicPagination.js"}}
 
 ## Outlined pagination
 
 {{"demo": "pages/components/pagination/PaginationOutlined.js"}}
 
-## Outlined rounded pagination
+## Rounded pagination
 
-{{"demo": "pages/components/pagination/PaginationOutlinedRounded.js"}}
+{{"demo": "pages/components/pagination/PaginationRounded.js"}}
 
 ## Pagination size
 
diff --git a/packages/material-ui-lab/src/Pagination/Pagination.js b/packages/material-ui-lab/src/Pagination/Pagination.js
index 7d02dbdad0493d..816cd570bb0d2c 100644
--- a/packages/material-ui-lab/src/Pagination/Pagination.js
+++ b/packages/material-ui-lab/src/Pagination/Pagination.js
@@ -11,7 +11,7 @@ export const styles = {
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
-    listStyleType: 'none',
+    listStyle: 'none',
     padding: 0, // Reset
     margin: 0, // Reset
   },
@@ -46,7 +46,7 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
     >
       {children ||
         items.map((item, index) => (
-          <li>{renderItem({ key: index.toString(), ...item, ...itemProps })}</li>
+          <li key={index.toString()}>{renderItem({ ...item, ...itemProps })}</li>
         ))}
     </ul>
   );
diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
index 9c1b68c5683d93..2c2b252ca4ba94 100644
--- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -189,6 +189,9 @@ const styles = theme => ({
     textAlign: 'center',
     width: 24,
     margin: '0 8px',
+    '&$disabled': {
+      color: fade(theme.palette.text.primary, 0.5),
+    },
     '&sizeSmall': {
       margin: 0,
     },
@@ -209,7 +212,7 @@ function ariaLabel(type, page, selected) {
   return `Go to ${type} page`;
 }
 
-function PaginationItem(props) {
+const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
   const {
     classes,
     className,
@@ -258,7 +261,7 @@ function PaginationItem(props) {
       )}
     </React.Fragment>
   );
-}
+});
 
 PaginationItem.propTypes = {
   /**
@@ -279,7 +282,7 @@ PaginationItem.propTypes = {
    */
   component: PropTypes.elementType,
   /**
-   * If `true`, the button will be disabled.
+   * If `true`, the item will be disabled.
    */
   disabled: PropTypes.bool,
   /**