Getting typescript to recognize that we're using our extended CustomTheme type was quite a pain

- I feel pretty confident that we want to use @mui/material/styles since this is how we define our custom theme

Author: snf2ye

src/components/DatasetView.tsx

@@ -2,15 +2,15 @@ import React, { Dispatch } from 'react';
 import { connect } from 'react-redux';
 import { Action } from 'redux';
 import { Box } from '@mui/material';
-import { styled } from '@mui/system';
+import { CustomTheme, styled } from '@mui/material/styles';
 import { getDatasets, addDatasetPolicyMember } from 'actions/index';
 import { DatasetSummaryModel } from 'generated/tdr';
 import { TdrState } from 'reducers';
 import { OrderDirectionOptions } from 'reducers/query';
 import DatasetTable from './table/DatasetTable';
 import { DatasetRoles } from '../constants';
 
-const Container = styled('div')(({ theme }) => theme.mixins.containerWidth);
+const Container = styled('div')(({ theme }: { theme: CustomTheme }) => theme.mixins.containerWidth);
 
 interface IProps {
   datasets: Array<DatasetSummaryModel>;

src/components/HomeView.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { Action } from 'redux';
 import { Button, Box } from '@mui/material';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { AddCircle, Refresh } from '@mui/icons-material';
 import { RouterLocation, RouterRootState } from 'connected-react-router';
 import {

src/components/JobView.tsx

@@ -6,10 +6,10 @@ import { getJobs } from 'actions/index';
 import { JobModel } from 'generated/tdr';
 import { TdrState } from 'reducers';
 import { OrderDirectionOptions } from 'reducers/query';
-import { styled } from '@mui/system';
+import { CustomTheme, styled } from '@mui/material/styles';
 import JobTable from './table/JobTable';
 
-const Container = styled('div')(({ theme }) => theme.mixins.containerWidth);
+const Container = styled('div')(({ theme }: { theme: CustomTheme }) => theme.mixins.containerWidth);
 
 interface IProps {
   jobs: Array<JobModel>;

src/components/SnapshotView.tsx

@@ -6,12 +6,12 @@ import { SnapshotSummaryModel } from 'generated/tdr';
 import { Action } from 'redux';
 import { TdrState } from 'reducers';
 import { OrderDirectionOptions } from 'reducers/query';
-import { styled } from '@mui/system';
+import { CustomTheme, styled } from '@mui/material/styles';
 import SnapshotTable from './table/SnapshotTable';
 import SnapshotPopup from './snapshot/SnapshotPopup';
 import { SnapshotRoles } from '../constants';
 
-const Container = styled('div')(({ theme }) => theme.mixins.containerWidth);
+const Container = styled('div')(({ theme }: { theme: CustomTheme }) => theme.mixins.containerWidth);
 
 interface IProps {
   snapshots: Array<SnapshotSummaryModel>;

src/components/dataset/overview/DatasetOverview.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Box, Typography } from '@mui/material';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { getDatasetById, getDatasetPolicy, getUserDatasetRoles } from 'actions';
 import SnapshotPopup from 'components/snapshot/SnapshotPopup';
 import DatasetRelationshipsPanel from '../../common/overview/SchemaPanel';
@@ -12,6 +12,10 @@ import LoadingSpinner from '../../common/LoadingSpinner';
 import DatasetOverviewPanel from './DatasetOverviewPanel';
 import AppBreadcrumbs from '../../AppBreadcrumbs/AppBreadcrumbs';
 
+// When we switch to Typescript, we can use the following type definition to
+// fix the unresolved variable warning
+// import { CustomTheme, styled } from '@mui/material/styles';
+// const Root = styled(Box)(({ theme }: { theme: CustomTheme }) => ({
 const Root = styled(Box)(({ theme }) => ({
   ...theme.mixins.pageRoot,
 }));

src/components/dataset/overview/DatasetOverviewPanel.jsx

@@ -12,7 +12,7 @@ import {
   Tabs,
   Typography,
 } from '@mui/material';
-import { styled } from '@mui/system';
+import { styled } from '@mui/material/styles';
 import { ExpandMore, Close } from '@mui/icons-material';
 import IconButton from '@mui/material/IconButton';
 import { connect } from 'react-redux';

src/components/table/SnapshotAccessRequestTable.tsx

@@ -12,11 +12,11 @@ import {
 } from 'actions';
 import { Action } from 'redux';
 import { Link } from 'react-router-dom';
-import { styled } from '@mui/system';
+import { CustomTheme, styled } from '@mui/material/styles';
 import TextWithModalDetails from 'components/common/InfoModal';
 import LoadingSpinner from 'components/common/LoadingSpinner';
 
-const OverlaySpinner = styled(Box)(({ theme }) => ({
+const OverlaySpinner = styled(Box)(({ theme }: { theme: CustomTheme }) => ({
   opacity: 0.9,
   position: 'absolute',
   right: 0,
@@ -29,7 +29,7 @@ const OverlaySpinner = styled(Box)(({ theme }) => ({
   zIndex: 100,
 }));
 
-const RequestButton = styled(Button)(({ theme }) => ({
+const RequestButton = styled(Button)(({ theme }: { theme: CustomTheme }) => ({
   width: '100%',
   border: 0,
   justifyContent: 'left',

src/index.jsx

@@ -6,7 +6,7 @@ import Helmet from 'react-helmet';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
 import history from 'modules/hist';
-import globalTheme from 'modules/theme';
+import theme from 'modules/theme';
 import { ThemeProvider } from '@mui/material/styles';
 import axios from 'axios';
 import { WebStorageStateStore, Log } from 'oidc-client-ts';
@@ -159,7 +159,7 @@ function render(Component) {
         <Router history={history}>
           {/* CachingProvider is a way to control how css is rendered in the DOM */}
           <CacheProvider value={cache}>
-            <ThemeProvider theme={globalTheme}>
+            <ThemeProvider theme={theme}>
               <AuthProvider {...oidcConfig}>
                 <Component />
               </AuthProvider>