Replace the HOCs

.babelrc

@@ -1,5 +1,6 @@
 {
     "plugins": [
-        "@babel/plugin-transform-flow-strip-types"
+        "@babel/plugin-transform-flow-strip-types",
+        ["styled-jsx/babel"]
     ]
 }

.eslintrc

@@ -128,7 +128,15 @@
                 ]
             }
         ],
-        "import/extensions": ["error", "never"]
+        "import/extensions": ["error", "never"],  
+        "react/no-unknown-property": [
+            2,
+            {
+                "ignore": [
+                "jsx"
+                ]
+            }
+        ]
     },
     "settings": {
         "import/resolver": {

src/core_modules/capture-core/components/BorderBox/BorderBox.component.js

@@ -1,33 +1,28 @@
 // @flow
 import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { theme } from '../../../../styles/theme';
 
 type Props = {
-    classes: {
-        borderBox: string,
-    },
     contentClassName?: ?string,
     children: React.Node,
 };
 
-const styles = (theme: Theme) => ({
-    borderBox: {
-        borderRadius: theme.typography.pxToRem(6),
-        borderWidth: theme.typography.pxToRem(2),
-        borderColor: '#e0e0e0',
-        borderStyle: 'solid',
-    },
-});
-
-const BorderBoxPlain = (props: Props) => {
-    const { classes, children, contentClassName } = props;
+export const BorderBox = (props: Props) => {
+    const { children, contentClassName } = props;
     return (
-        <div className={classes.borderBox}>
+        <div className="borderBox">
             <div className={contentClassName}>
                 {children}
             </div>
+            <style jsx>{`
+                .borderBox {
+                    border-radius: ${theme.typography.pxToRem(6)};
+                    border-width: ${theme.typography.pxToRem(2)};
+                    border-color: #e0e0e0;
+                    border-style: solid;
+                }
+            `}</style>
         </div>
     );
 };
 
-export const BorderBox = withStyles(styles)(BorderBoxPlain);

src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js

@@ -1,8 +1,6 @@
 // @flow
-import type { ComponentType } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { withStyles } from '@material-ui/core/styles';
 import { colors, IconChevronRight16 } from '@dhis2/ui';
 import { useWorkingListLabel } from './hooks/useWorkingListLabel';
 import { BreadcrumbItem } from '../common/BreadcrumbItem';
@@ -20,6 +18,8 @@ type Props = {
     programId: string,
     userInteractionInProgress?: boolean,
     trackedEntityName?: string,
+    eventStatus?: string,
+    page?: string,
 };
 
 export const EventStatuses = {
@@ -30,13 +30,6 @@ export const EventStatuses = {
     OVERDUE: 'OVERDUE',
 };
 
-const styles = {
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-    },
-};
-
 const pageKeys = Object.freeze({
     MAIN_PAGE: 'mainPage',
     ...EnrollmentPageKeys,
@@ -45,7 +38,7 @@ const pageKeys = Object.freeze({
 const eventIsScheduled = eventStatus => [EventStatuses.SCHEDULE, EventStatuses.OVERDUE, EventStatuses.SKIPPED]
     .includes(eventStatus);
 
-const BreadcrumbsPlain = ({
+export const EnrollmentBreadcrumb = ({
     onBackToMainPage,
     onBackToDashboard,
     onBackToViewEvent,
@@ -55,8 +48,7 @@ const BreadcrumbsPlain = ({
     displayFrontPageList,
     userInteractionInProgress = false,
     page,
-    classes,
-}) => {
+}: Props) => {
     const [openWarning, setOpenWarning] = useState(null);
 
     const { label } = useWorkingListLabel({
@@ -121,7 +113,7 @@ const BreadcrumbsPlain = ({
     ]);
 
     return (
-        <div className={classes.container}>
+        <div className="container">
             {breadcrumbItems.map((button, index) => (
                 <React.Fragment key={button.key}>
                     <BreadcrumbItem
@@ -165,8 +157,14 @@ const BreadcrumbsPlain = ({
                 onCancel={() => setOpenWarning(null)}
                 {...defaultDialogProps}
             />
+
+            <style jsx>{`
+                .container {
+                    display: flex;
+                    align-items: center;
+                }
+            `}</style>
         </div>
     );
 };
 
-export const EnrollmentBreadcrumb: ComponentType<$Diff<Props, CssClasses>> = withStyles(styles)(BreadcrumbsPlain);

src/core_modules/capture-core/components/Breadcrumbs/common/BreadcrumbItem.js

@@ -1,7 +1,6 @@
 // @flow
-import React, { type ComponentType } from 'react';
+import React from 'react';
 import cx from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
 import { colors } from '@dhis2/ui';
 
 type Props = {
@@ -11,39 +10,38 @@ type Props = {
     dataTest: string,
 };
 
-const styles = {
-    button: {
-        // Reset button styles
-        background: 'none',
-        border: 'none',
-        cursor: 'pointer',
-        font: 'inherit',
-
-        // Custom button styles
-        fontSize: '14px',
-        padding: '6px 4px',
-        color: colors.grey800,
-        borderRadius: '3px',
-
-        '&:hover': {
-            textDecoration: 'underline',
-            color: 'black',
-        },
-        '&.selected': {
-            color: 'black',
-        },
-    },
-};
-
-const BreadcrumbItemPlain = ({ label, onClick, selected, dataTest, classes }) => (
+export const BreadcrumbItem = ({ label, onClick, selected, dataTest }: Props) => (
     <button
         type="button"
-        className={cx(classes.button, { selected })}
+        className={cx('button', { selected })}
         onClick={onClick}
         data-test={dataTest}
     >
         {label}
+        <style jsx>{`
+            .button {
+                /* Reset button styles */
+                background: none;
+                border: none;
+                cursor: pointer;
+                font: inherit;
+
+                /* Custom button styles */
+                font-size: 14px;
+                padding: 6px 4px;
+                color: ${colors.grey800};
+                border-radius: 3px;
+            }
+
+            .button:hover {
+                text-decoration: underline;
+                color: black;
+            }
+
+            .button.selected {
+                color: black;
+            }
+        `}</style>
     </button>
 );
 
-export const BreadcrumbItem: ComponentType<$Diff<Props, CssClasses>> = withStyles(styles)(BreadcrumbItemPlain);

src/core_modules/capture-core/components/CardList/CardListButtons.component.js

@@ -1,6 +1,5 @@
 // @flow
 import React from 'react';
-import { withStyles } from '@material-ui/core';
 import i18n from '@dhis2/d2-i18n';
 import { Button } from '@dhis2/ui';
 import { useDispatch } from 'react-redux';
@@ -9,6 +8,7 @@ import { availableCardListButtonState, enrollmentTypes } from './CardList.consta
 import {
     navigateToEnrollmentOverview,
 } from '../../actions/navigateToEnrollmentOverview/navigateToEnrollmentOverview.actions';
+import { theme } from '../../../../styles/theme';
 
 type Props = {
     currentSearchScopeId?: string,
@@ -19,14 +19,6 @@ type Props = {
     programName?: string,
 }
 
-const buttonStyles = (theme: Theme) => ({
-    buttonMargin: {
-        '&:not(:first-child)': {
-            marginLeft: theme.typography.pxToRem(8),
-        },
-    },
-});
-
 const deriveNavigationButtonState = (type): $Keys<typeof availableCardListButtonState> => {
     switch (type) {
     case enrollmentTypes.ACTIVE:
@@ -39,20 +31,44 @@ const deriveNavigationButtonState = (type): $Keys<typeof availableCardListButton
     }
 };
 
-const ActionButtons = withStyles(buttonStyles)(({ buttonProps, classes }) => (
-    <>{buttonProps.map(props => (
-        !props.hide && <Button
-            small
-            className={classes.buttonMargin}
-            dataTest={props.dataTest}
-            onClick={props.onClick}
-        >
-            {props.label}
-        </Button>
-    ))}</>
-));
 
-const CardListButtons = ({
+const ActionButton = ({ dataTest, onClick, label, hide }) => {
+    if (hide) return null;
+
+    return (
+        <>
+            <Button
+                small
+                className="buttonMargin"
+                dataTest={dataTest}
+                onClick={onClick}
+            >
+                {label}
+            </Button>
+            <style jsx>{`
+                :global(.button-margin:not(:first-child)) {
+                    margin-left: ${theme.typography.pxToRem(8)};
+                }
+            `}</style>
+        </>
+    );
+};
+
+const ActionButtons = ({ buttonProps }: { buttonProps: Array<Object>}) => (
+    <>
+        {buttonProps.map((props, index) => (
+            <ActionButton
+                key={props.dataTest || index}
+                dataTest={props.dataTest}
+                onClick={props.onClick}
+                label={props.label}
+                hide={props.hide}
+            />
+        ))}
+    </>
+);
+
+export const CardListButtons = ({
     currentSearchScopeId,
     currentSearchScopeType,
     id,
@@ -108,4 +124,3 @@ const CardListButtons = ({
     return <ActionButtons buttonProps={buttonLists} />;
 };
 
-export { CardListButtons };