Card Component - Introduced ForwardRef

src/components/Dependencies/styles.ts

@@ -1,9 +1,9 @@
 import styled from 'react-emotion';
-import Card from '@material-ui/core/Card';
 import Chip from '@material-ui/core/Chip';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
+import Card from '../../muiComponents/Card';
 
 export const CardWrap = styled(Card)({
   '&&': {

src/components/DetailSidebar/DetailSidebar.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react';
-import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 
 import { ActionBar } from '../ActionBar/ActionBar';
@@ -11,6 +10,7 @@ import Install from '../Install';
 import Repository from '../Repository/Repository';
 import { DetailContext } from '../../pages/Version';
 import List from '../../muiComponents/List';
+import Card from '../../muiComponents/Card';
 
 import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';
 

src/components/Help/styles.ts

@@ -1,7 +1,7 @@
-import Card from '@material-ui/core/Card';
 import styled from 'react-emotion';
 
 import { default as Typography } from '../../muiComponents/Heading';
+import Card from '../../muiComponents/Card';
 
 export const CardStyled = styled(Card)({
   '&&': {

src/components/NotFound/styles.ts

@@ -1,8 +1,8 @@
-import { default as MuiCard } from '@material-ui/core/Card';
 import styled from 'react-emotion';
 
 import { default as Typography } from '../../muiComponents/Heading';
 import List from '../../muiComponents/List';
+import { default as MuiCard } from '../../muiComponents/Card';
 
 export const Wrapper = styled('div')({
   display: 'flex',

src/muiComponents/Card/Card.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUICard, CardProps } from '@material-ui/core/Card';
+
+type CardRef = HTMLDivElement;
+
+const Card = forwardRef<CardRef, CardProps>(function Card(props, ref) {
+  return <MaterialUICard {...props} ref={ref} />;
+});
+
+export default Card;

src/muiComponents/Card/index.ts

@@ -0,0 +1 @@
+export { default } from './Card';