Dialog Components - Introduced ForwardRef

src/components/Login/Login.tsx

@@ -1,8 +1,4 @@
 import React, { Component } from 'react';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
 import SnackbarContent from '@material-ui/core/SnackbarContent';
 import ErrorIcon from '@material-ui/icons/Error';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -12,6 +8,10 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 import { css } from 'emotion';
 
 import Button from '../../muiComponents/Button';
+import Dialog from '../../muiComponents/Dialog';
+import DialogTitle from '../../muiComponents/DialogTitle';
+import DialogContent from '../../muiComponents/DialogContent';
+import DialogActions from '../../muiComponents/DialogActions';
 
 import * as classes from './styles';
 

src/components/RegistryInfoDialog/RegistryInfoDialog.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
 
 import Button from '../../muiComponents/Button';
+import Dialog from '../../muiComponents/Dialog';
+import DialogActions from '../../muiComponents/DialogActions';
 
 import { Title, Content } from './styles';
 import { Props } from './types';

src/components/RegistryInfoDialog/styles.ts

@@ -1,20 +1,16 @@
 import styled from 'react-emotion';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
 
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';
+import DialogTitle from '../../muiComponents/DialogTitle';
+import DialogContent from '../../muiComponents/DialogContent';
 
 export const Title = styled(DialogTitle)({
-  '&&': {
-    backgroundColor: colors.primary,
-    color: colors.white,
-    fontSize: fontSize.lg,
-  },
+  backgroundColor: colors.primary,
+  color: colors.white,
+  fontSize: fontSize.lg,
 });
 
 export const Content = styled(DialogContent)({
-  '&&': {
-    padding: '0 24px',
-  },
+  padding: '0 24px',
 });

src/muiComponents/Dialog/Dialog.tsx

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

src/muiComponents/Dialog/index.ts

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

src/muiComponents/DialogActions/DialogActions.tsx

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

src/muiComponents/DialogActions/index.ts

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

src/muiComponents/DialogContent/DialogContent.tsx

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

src/muiComponents/DialogContent/index.ts

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

src/muiComponents/DialogTitle/DialogTitle.tsx

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

src/muiComponents/DialogTitle/index.ts

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

src/pages/Version/styles.ts

@@ -1,13 +1,11 @@
 import styled from 'react-emotion';
-import DialogTitle from '@material-ui/core/DialogTitle';
 
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';
+import DialogTitle from '../../muiComponents/DialogTitle';
 
 export const Title = styled(DialogTitle)({
-  '&&': {
-    backgroundColor: colors.primary,
-    color: colors.white,
-    fontSize: fontSize.lg,
-  },
+  backgroundColor: colors.primary,
+  color: colors.white,
+  fontSize: fontSize.lg,
 });