diff --git a/.vscode/launch.json b/.vscode/launch.json
index 3e2f26fa9..279055bd0 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -7,6 +7,13 @@
       "request": "attach",
       "port": 9222,
       "webRoot": "${workspaceRoot}"
-    }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Current Jest Suite",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["--runInBand", "${relativeFile}"]
+   }
   ]
 }
diff --git a/docs/extending/styling-components.md b/docs/extending/styling-components.md
index c02daa606..33ca641eb 100644
--- a/docs/extending/styling-components.md
+++ b/docs/extending/styling-components.md
@@ -12,13 +12,13 @@ For basic building blocks (views, texts, ...) you can use the styled object.
 ```javascript
 import {styled} from 'flipper';
 
-const MyView = styled('div')({
+const MyView = styled.div({
   fontSize: 10,
   color: colors.red
 });
-const MyText = styled('span')({ ... });
-const MyImage = styled('img')({ ... });
-const MyInput = styled('input')({ ... });
+const MyText = styled.span({ ... });
+const MyImage = styled.img({ ... });
+const MyInput = styled.input({ ... });
 ```
 
 ## Extending Flipper Components
@@ -46,7 +46,7 @@ The CSS-in-JS object passed to the styled components takes just any CSS rule, wi
 The style object can also be returned from a function for dynamic values. Props can be passed to the styled component using React.
 
 ```javascript
-const MyView = styled('div')(
+const MyView = styled.div(
   props => ({
     fontSize: 10,
     color:  => (props.disabled ? colors.red : colors.black),
diff --git a/docs/tutorial/js-custom.md b/docs/tutorial/js-custom.md
index ee57384ea..5d539b52c 100644
--- a/docs/tutorial/js-custom.md
+++ b/docs/tutorial/js-custom.md
@@ -120,7 +120,7 @@ class Card extends React.Component<{
     cursor: 'pointer',
   }));
 
-  static Image = styled('div')({
+  static Image = styled.div({
     backgroundSize: 'cover',
     width: '100%',
     paddingTop: '100%',
diff --git a/package.json b/package.json
index e9b6be273..50421fa3b 100644
--- a/package.json
+++ b/package.json
@@ -108,6 +108,8 @@
     "typescript": "^3.7.2"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.22",
+    "@emotion/styled": "^10.0.23",
     "@types/promise-retry": "^1.1.3",
     "@types/react-color": "^3.0.1",
     "@types/react-test-renderer": "^16.9.1",
@@ -131,7 +133,7 @@
     "deep-equal": "^1.0.1",
     "detect-port": "^1.1.1",
     "electron-devtools-installer": "^2.2.0",
-    "emotion": "^9.2.6",
+    "emotion": "^10.0.23",
     "expand-tilde": "^2.0.2",
     "express": "^4.15.2",
     "flipper-doctor": "^0.2.1",
@@ -159,7 +161,6 @@
     "react-debounce-render": "^5.0.0",
     "react-devtools-core": "^4.0.6",
     "react-dom": "^16.12.0",
-    "react-emotion": "^9.2.6",
     "react-markdown": "^4.2.2",
     "react-player": "^1.14.1",
     "react-redux": "^7.1.1",
@@ -188,8 +189,6 @@
     "ignore": [
       "electron",
       "electron-builder",
-      "emotion",
-      "react-emotion",
       "tmp"
     ]
   },
diff --git a/src/NotificationsHub.tsx b/src/NotificationsHub.tsx
index 25d0c3b4f..f43b5945b 100644
--- a/src/NotificationsHub.tsx
+++ b/src/NotificationsHub.tsx
@@ -319,7 +319,7 @@ type NotificationBoxProps = {
   severity: keyof typeof SEVERITY_COLOR_MAP;
 };
 
-const NotificationBox = styled(FlexRow)((props: NotificationBoxProps) => ({
+const NotificationBox = styled(FlexRow)<NotificationBoxProps>(props => ({
   backgroundColor: props.inactive ? 'transparent' : colors.white,
   opacity: props.inactive ? 0.5 : 1,
   alignItems: 'flex-start',
@@ -348,7 +348,7 @@ const NotificationBox = styled(FlexRow)((props: NotificationBoxProps) => ({
   },
 }));
 
-const Title = styled('div')({
+const Title = styled.div({
   minWidth: 150,
   color: colors.light80,
   flexShrink: 0,
@@ -358,8 +358,8 @@ const Title = styled('div')({
   fontSize: '1.1em',
 });
 
-const NotificationContent = styled(FlexColumn)(
-  (props: {isSelected?: boolean}) => ({
+const NotificationContent = styled(FlexColumn)<{isSelected?: boolean}>(
+  props => ({
     marginLeft: 6,
     marginRight: 10,
     flexGrow: 1,
@@ -379,7 +379,7 @@ const Actions = styled(FlexRow)({
   paddingTop: 8,
 });
 
-const NotificationButton = styled('div')({
+const NotificationButton = styled.div({
   border: `1px solid ${colors.light20}`,
   color: colors.light50,
   borderRadius: 4,
diff --git a/src/chrome/BugReporterDialog.tsx b/src/chrome/BugReporterDialog.tsx
index 77cf60bf3..4767e7d48 100644
--- a/src/chrome/BugReporterDialog.tsx
+++ b/src/chrome/BugReporterDialog.tsx
@@ -44,7 +44,7 @@ const Center = styled(Text)({
   paddingRight: 20,
 });
 
-const Title = styled('div')({
+const Title = styled.div({
   fontWeight: 500,
   marginTop: 8,
   marginLeft: 2,
@@ -66,7 +66,7 @@ const DescriptionTextarea = styled(Textarea)({
   flexGrow: 1,
 });
 
-const SubmitButtonContainer = styled('div')({
+const SubmitButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 
@@ -118,8 +118,8 @@ class BugReporterDialog extends Component<Props, State> {
     error: null,
   };
 
-  titleRef?: HTMLElement;
-  descriptionRef?: HTMLElement;
+  titleRef?: HTMLElement | null;
+  descriptionRef?: HTMLElement | null;
 
   onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     this.setState({description: e.target.value});
@@ -184,11 +184,11 @@ class BugReporterDialog extends Component<Props, State> {
     );
   };
 
-  setTitleRef = (ref: HTMLElement) => {
+  setTitleRef = (ref: HTMLElement | null) => {
     this.titleRef = ref;
   };
 
-  setDescriptionRef = (ref: HTMLElement) => {
+  setDescriptionRef = (ref: HTMLElement | null) => {
     this.descriptionRef = ref;
   };
 
@@ -240,7 +240,7 @@ class BugReporterDialog extends Component<Props, State> {
           <TitleInput
             placeholder="Title"
             value={title}
-            innerRef={this.setTitleRef}
+            ref={this.setTitleRef}
             onChange={this.onTitleChange}
             disabled={submitting}
           />
@@ -248,7 +248,7 @@ class BugReporterDialog extends Component<Props, State> {
           <DescriptionTextarea
             placeholder="Describe your problem in as much detail as possible."
             value={description}
-            innerRef={this.setDescriptionRef}
+            ref={this.setDescriptionRef}
             onChange={this.onDescriptionChange}
             disabled={submitting}
           />
diff --git a/src/chrome/DoctorBar.tsx b/src/chrome/DoctorBar.tsx
index 272bcf007..5fb29738e 100644
--- a/src/chrome/DoctorBar.tsx
+++ b/src/chrome/DoctorBar.tsx
@@ -114,12 +114,12 @@ export default connect<StateFromProps, DispatchFromProps, {}, Store>(null, {
   finishHealthchecks,
 })(DoctorBar);
 
-const Container = styled('div')({
+const Container = styled.div({
   boxShadow: '2px 2px 2px #ccc',
   userSelect: 'text',
 });
 
-const WarningContainer = styled('div')({
+const WarningContainer = styled.div({
   backgroundColor: colors.orange,
   color: '#fff',
   maxHeight: '600px',
diff --git a/src/chrome/ErrorBar.tsx b/src/chrome/ErrorBar.tsx
index b39a43345..9d62bbae9 100644
--- a/src/chrome/ErrorBar.tsx
+++ b/src/chrome/ErrorBar.tsx
@@ -120,12 +120,12 @@ function ErrorTile({
   );
 }
 
-const ErrorBarContainer = styled('div')({
+const ErrorBarContainer = styled.div({
   boxShadow: '2px 2px 2px #ccc',
   userSelect: 'text',
 });
 
-const DismissAllErrors = styled('div')({
+const DismissAllErrors = styled.div({
   boxShadow: '2px 2px 2px #ccc',
   backgroundColor: colors.cherryDark3,
   color: '#fff',
@@ -143,12 +143,12 @@ const DismissAllErrors = styled('div')({
   alignItems: 'center',
 });
 
-const ErrorDetails = styled('div')({
+const ErrorDetails = styled.div({
   width: '100%',
   marginTop: 4,
 });
 
-const ErrorRows = styled('div')({
+const ErrorRows = styled.div({
   backgroundColor: colors.cherry,
   color: '#fff',
   maxHeight: '600px',
@@ -160,7 +160,7 @@ const ErrorRows = styled('div')({
   },
 });
 
-const ErrorRow = styled('div')({
+const ErrorRow = styled.div({
   padding: '4px 12px',
   borderBottom: '1px solid ' + colors.cherryDark3,
   verticalAlign: 'middle',
diff --git a/src/chrome/ListView.tsx b/src/chrome/ListView.tsx
index a558b5928..d4c4eb671 100644
--- a/src/chrome/ListView.tsx
+++ b/src/chrome/ListView.tsx
@@ -66,24 +66,17 @@ const RowComponentContainer = styled(FlexColumn)({
   maxHeight: 500,
 });
 
-const Padder = styled('div')(
-  ({
-    paddingLeft,
-    paddingRight,
-    paddingBottom,
-    paddingTop,
-  }: {
-    paddingLeft?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingTop?: number;
-  }) => ({
-    paddingLeft: paddingLeft || 0,
-    paddingRight: paddingRight || 0,
-    paddingBottom: paddingBottom || 0,
-    paddingTop: paddingTop || 0,
-  }),
-);
+const Padder = styled.div<{
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingTop?: number;
+}>(({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
+  paddingLeft: paddingLeft || 0,
+  paddingRight: paddingRight || 0,
+  paddingBottom: paddingBottom || 0,
+  paddingTop: paddingTop || 0,
+}));
 
 type RowComponentProps = {
   name: string;
diff --git a/src/chrome/MainSidebar.tsx b/src/chrome/MainSidebar.tsx
index 96f1ff702..f7f1f4f87 100644
--- a/src/chrome/MainSidebar.tsx
+++ b/src/chrome/MainSidebar.tsx
@@ -51,7 +51,6 @@ import {setActiveSheet} from '../reducers/application';
 import UserAccount from './UserAccount';
 import {connect} from 'react-redux';
 import {BackgroundColorProperty} from 'csstype';
-import {StyledOtherComponent} from 'create-emotion-styled';
 import SupportRequestFormManager from '../fb-stubs/SupportRequestFormManager';
 import SupportRequestDetails from '../fb-stubs/SupportRequestDetails';
 import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
@@ -59,7 +58,7 @@ import SupportRequestFormV2 from '../fb-stubs/SupportRequestFormV2';
 type FlipperPlugins = typeof FlipperPlugin[];
 type PluginsByCategory = [string, FlipperPlugins][];
 
-const ListItem = styled('div')(({active}: {active?: boolean}) => ({
+const ListItem = styled.div<{active?: boolean}>(({active}) => ({
   paddingLeft: 10,
   display: 'flex',
   alignItems: 'center',
@@ -74,7 +73,7 @@ const ListItem = styled('div')(({active}: {active?: boolean}) => ({
   },
 }));
 
-const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
+const SidebarButton = styled(Button)<{small?: boolean}>(({small}) => ({
   fontWeight: 'bold',
   fontSize: small ? 11 : 14,
   width: '100%',
@@ -88,22 +87,22 @@ const SidebarButton = styled(Button)(({small}: {small?: boolean}) => ({
   whiteSpace: 'nowrap',
 }));
 
-const PluginShape = styled(FlexBox)(
-  ({backgroundColor}: {backgroundColor?: BackgroundColorProperty}) => ({
-    marginRight: 8,
-    backgroundColor,
-    borderRadius: 3,
-    flexShrink: 0,
-    width: 18,
-    height: 18,
-    justifyContent: 'center',
-    alignItems: 'center',
-    top: '-1px',
-  }),
-);
+const PluginShape = styled(FlexBox)<{
+  backgroundColor?: BackgroundColorProperty;
+}>(({backgroundColor}) => ({
+  marginRight: 8,
+  backgroundColor,
+  borderRadius: 3,
+  flexShrink: 0,
+  width: 18,
+  height: 18,
+  justifyContent: 'center',
+  alignItems: 'center',
+  top: '-1px',
+}));
 
-const PluginName = styled(Text)(
-  (props: {isActive?: boolean; count?: number}) => ({
+const PluginName = styled(Text)<{isActive?: boolean; count?: number}>(
+  props => ({
     minWidth: 0,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
@@ -211,9 +210,7 @@ const Spinner = centerInSidebar(LoadingIndicator);
 
 const ErrorIndicator = centerInSidebar(Glyph);
 
-function centerInSidebar(
-  component: StyledOtherComponent<any, {}, any> | React.ComponentType<any>,
-) {
+function centerInSidebar(component: any) {
   return styled(component)({
     marginTop: '10px',
     marginBottom: '10px',
diff --git a/src/chrome/Popover.tsx b/src/chrome/Popover.tsx
index b323a4a4c..75388c049 100644
--- a/src/chrome/Popover.tsx
+++ b/src/chrome/Popover.tsx
@@ -18,7 +18,7 @@ import {
 } from 'flipper';
 import React, {PureComponent} from 'react';
 
-const Anchor = styled('img')({
+const Anchor = styled.img({
   zIndex: 6,
   position: 'absolute',
   bottom: 0,
@@ -100,13 +100,13 @@ const ItemImage = styled(FlexBox)({
   flexShrink: 0,
 });
 
-const ItemContent = styled('div')({
+const ItemContent = styled.div({
   minWidth: 0,
   paddingRight: 5,
   flexGrow: 1,
 });
 
-const Section = styled('div')({
+const Section = styled.div({
   borderBottom: `1px solid ${colors.light05}`,
   '&:last-child': {
     borderBottom: 'none',
@@ -142,7 +142,7 @@ type Props = {
 };
 
 export default class Popover extends PureComponent<Props> {
-  _ref: Element | null | undefined;
+  _ref?: Element | null;
 
   componentDidMount() {
     window.document.addEventListener('click', this.handleClick);
@@ -158,7 +158,7 @@ export default class Popover extends PureComponent<Props> {
     }
   };
 
-  _setRef = (ref?: Element) => {
+  _setRef = (ref: Element | null) => {
     this._ref = ref;
   };
 
@@ -166,7 +166,7 @@ export default class Popover extends PureComponent<Props> {
     return (
       <>
         <Anchor src="./anchor.svg" key="anchor" />
-        <PopoverContainer innerRef={this._setRef} key="popup">
+        <PopoverContainer ref={this._setRef} key="popup">
           {this.props.sections.map(section => {
             if (section.items.length > 0) {
               return (
diff --git a/src/chrome/RatingButton.tsx b/src/chrome/RatingButton.tsx
index 873504624..4d45efcea 100644
--- a/src/chrome/RatingButton.tsx
+++ b/src/chrome/RatingButton.tsx
@@ -41,7 +41,7 @@ class PredefinedComment extends Component<{
   selected: boolean;
   onClick: (_: unknown) => unknown;
 }> {
-  static Container = styled('div')((props: {selected: boolean}) => {
+  static Container = styled.div<{selected: boolean}>(props => {
     return {
       border: '1px solid #f2f3f5',
       cursor: 'pointer',
@@ -82,7 +82,7 @@ const DismissRow = styled(Row)({
   marginTop: 10,
 });
 
-const DismissButton = styled('span')({
+const DismissButton = styled.span({
   '&:hover': {
     textDecoration: 'underline',
     cursor: 'pointer',
diff --git a/src/chrome/Sheet.tsx b/src/chrome/Sheet.tsx
index 9fdebefad..da65758c3 100644
--- a/src/chrome/Sheet.tsx
+++ b/src/chrome/Sheet.tsx
@@ -19,7 +19,7 @@ import {State as Store} from '../reducers';
 
 import {ActiveSheet} from '../reducers/application';
 
-const DialogContainer = styled('div')(({state}: {state: TransitionStatus}) => ({
+const DialogContainer = styled.div<{state: TransitionStatus}>(({state}) => ({
   transform: `translate(-50%, ${
     state === 'entering' || state === 'exiting' || state === 'exited'
       ? 'calc(-100% - 20px)'
diff --git a/src/chrome/TitleBar.tsx b/src/chrome/TitleBar.tsx
index 305086e4b..6cd7fbf6d 100644
--- a/src/chrome/TitleBar.tsx
+++ b/src/chrome/TitleBar.tsx
@@ -43,7 +43,7 @@ import {clipboard} from 'electron';
 import React from 'react';
 import {State} from 'src/reducers';
 
-const AppTitleBar = styled(FlexRow)(({focused}: {focused?: boolean}) => ({
+const AppTitleBar = styled(FlexRow)<{focused?: boolean}>(({focused}) => ({
   background: focused
     ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${colors.macOSTitleBarBackgroundBottom} 100%)`
     : colors.macOSTitleBarBackgroundBlur,
diff --git a/src/chrome/UserAccount.tsx b/src/chrome/UserAccount.tsx
index 72726d5bd..965c8a3ed 100644
--- a/src/chrome/UserAccount.tsx
+++ b/src/chrome/UserAccount.tsx
@@ -28,7 +28,7 @@ const Container = styled(FlexRow)({
   color: colors.blackAlpha80,
 });
 
-const ProfilePic = styled('img')({
+const ProfilePic = styled.img({
   borderRadius: '999em',
   flexShrink: 0,
   width: 24,
@@ -58,7 +58,7 @@ type Props = OwnProps & DispatchFromProps & StateFromProps;
 class UserAccount extends PureComponent<Props> {
   _ref: Element | null | undefined;
 
-  setRef = (ref: React.ReactInstance) => {
+  setRef = (ref: HTMLDivElement | null) => {
     const element = findDOMNode(ref);
     if (element instanceof HTMLElement) {
       this._ref = element;
@@ -90,7 +90,7 @@ class UserAccount extends PureComponent<Props> {
     const {user} = this.props;
     const name = user ? user.name : null;
     return name ? (
-      <Container innerRef={this.setRef} onClick={this.showDetails}>
+      <Container ref={this.setRef} onClick={this.showDetails}>
         <ProfilePic
           src={user.profile_picture ? user.profile_picture.uri : undefined}
         />
diff --git a/src/chrome/WelcomeScreen.tsx b/src/chrome/WelcomeScreen.tsx
index 79bb0021b..5969bdae2 100644
--- a/src/chrome/WelcomeScreen.tsx
+++ b/src/chrome/WelcomeScreen.tsx
@@ -29,7 +29,7 @@ const Container = styled(FlexColumn)({
   backgroundColor: colors.light02,
 });
 
-const Welcome = styled(FlexColumn)(({isMounted}: {isMounted?: boolean}) => ({
+const Welcome = styled(FlexColumn)<{isMounted?: boolean}>(({isMounted}) => ({
   width: 460,
   background: colors.white,
   borderRadius: 10,
@@ -85,7 +85,7 @@ const Icon = styled(Glyph)({
   marginLeft: 6,
 });
 
-const Logo = styled('img')({
+const Logo = styled.img({
   width: 128,
   height: 128,
   alignSelf: 'center',
diff --git a/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap b/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
index fde290a3f..488a6aa79 100644
--- a/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
+++ b/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
@@ -17,7 +17,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       size={30}
     />
     <span
-      className="css-91luyc"
+      className="css-1r5zvq8"
       color="#6f6f6f"
     >
       Update
@@ -30,7 +30,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       className="css-12zzrdt"
     />
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -38,7 +38,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -67,7 +67,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       size={30}
     />
     <span
-      className="css-91luyc"
+      className="css-1r5zvq8"
       color="#6f6f6f"
     >
       wubba lubba dub dub
@@ -80,7 +80,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       className="css-12zzrdt"
     />
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
@@ -88,7 +88,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
       Cancel
     </div>
     <div
-      className="css-1qfnye7"
+      className="css-1ee9nwd"
       onClick={[Function]}
       onMouseDown={[Function]}
       onMouseUp={[Function]}
diff --git a/src/chrome/settings/ToggledSection.tsx b/src/chrome/settings/ToggledSection.tsx
index bcf6dc8fb..64e4e6aaf 100644
--- a/src/chrome/settings/ToggledSection.tsx
+++ b/src/chrome/settings/ToggledSection.tsx
@@ -14,7 +14,7 @@ const IndentedSection = styled(FlexColumn)({
   paddingLeft: 50,
   paddingBottom: 10,
 });
-const GreyedOutOverlay = styled('div')({
+const GreyedOutOverlay = styled.div({
   backgroundColor: '#EFEEEF',
   borderRadius: 4,
   opacity: 0.6,
diff --git a/src/chrome/settings/configFields.tsx b/src/chrome/settings/configFields.tsx
index 693f13d71..fa1591b44 100644
--- a/src/chrome/settings/configFields.tsx
+++ b/src/chrome/settings/configFields.tsx
@@ -23,7 +23,7 @@ const InfoText = styled(Text)({
   paddingTop: 5,
 });
 
-const FileInputBox = styled(Input)(({isValid}: {isValid: boolean}) => ({
+const FileInputBox = styled(Input)<{isValid: boolean}>(({isValid}) => ({
   marginRight: 0,
   flexGrow: 1,
   fontFamily: 'monospace',
@@ -38,7 +38,7 @@ const CenteredGlyph = styled(Glyph)({
   marginLeft: 10,
 });
 
-const GreyedOutOverlay = styled('div')({
+const GreyedOutOverlay = styled.div({
   backgroundColor: '#EFEEEF',
   borderRadius: 4,
   opacity: 0.6,
diff --git a/src/index.tsx b/src/index.tsx
index ff07556a4..2e7660a05 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,8 @@
  * @format
  */
 
-export {default as styled, keyframes} from 'react-emotion';
+export {default as styled} from '@emotion/styled';
+export {keyframes} from 'emotion';
 export * from './ui/index';
 export {getStringFromErrorLike, textContent} from './utils/index';
 export {serialize, deserialize} from './utils/serialization';
diff --git a/src/init.tsx b/src/init.tsx
index b65cc86a9..c8075ef73 100644
--- a/src/init.tsx
+++ b/src/init.tsx
@@ -31,6 +31,8 @@ import React from 'react';
 import path from 'path';
 import {store} from './store';
 import {registerRecordingHooks} from './utils/pluginStateRecorder';
+import {cache} from 'emotion';
+import {CacheProvider} from '@emotion/core';
 
 const logger = initLogger(store);
 const bugReporter = new BugReporter(logger, store);
@@ -51,15 +53,17 @@ const AppFrame = () => {
     <TooltipProvider>
       <ContextMenuProvider>
         <Provider store={store}>
-          {warnEmployee ? (
-            <WarningEmployee
-              onClick={() => {
-                setWarnEmployee(false);
-              }}
-            />
-          ) : (
-            <App logger={logger} bugReporter={bugReporter} />
-          )}
+          <CacheProvider value={cache}>
+            {warnEmployee ? (
+              <WarningEmployee
+                onClick={() => {
+                  setWarnEmployee(false);
+                }}
+              />
+            ) : (
+              <App logger={logger} bugReporter={bugReporter} />
+            )}
+          </CacheProvider>
         </Provider>
       </ContextMenuProvider>
     </TooltipProvider>
diff --git a/src/plugins/TableNativePlugin.tsx b/src/plugins/TableNativePlugin.tsx
index 3b3226259..7ef2b4a9f 100644
--- a/src/plugins/TableNativePlugin.tsx
+++ b/src/plugins/TableNativePlugin.tsx
@@ -10,7 +10,7 @@
 import ManagedDataInspector from '../ui/components/data-inspector/ManagedDataInspector';
 import Panel from '../ui/components/Panel';
 import {colors} from '../ui/components/colors';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Text from '../ui/components/Text';
 import Toolbar from '../ui/components/Toolbar';
 import Spacer from '../ui/components/Toolbar';
@@ -98,7 +98,7 @@ const NonWrappingText = styled(Text)({
   userSelect: 'none',
 });
 
-const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
+const BooleanValue = styled(NonWrappingText)<{active?: boolean}>(props => ({
   '&::before': {
     content: '""',
     display: 'inline-block',
@@ -111,7 +111,7 @@ const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
   },
 }));
 
-const Label = styled('span')({
+const Label = styled.span({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',
diff --git a/src/plugins/cpu/index.tsx b/src/plugins/cpu/index.tsx
index 832ed6901..e3d1e3d22 100644
--- a/src/plugins/cpu/index.tsx
+++ b/src/plugins/cpu/index.tsx
@@ -95,7 +95,7 @@ const Columns = {
   },
 };
 
-const Heading = styled('div')({
+const Heading = styled.div({
   fontWeight: 'bold',
   fontSize: 13,
   display: 'block',
diff --git a/src/plugins/crash_reporter/index.js b/src/plugins/crash_reporter/index.js
index e848cc674..2db1e5386 100644
--- a/src/plugins/crash_reporter/index.js
+++ b/src/plugins/crash_reporter/index.js
@@ -79,7 +79,7 @@ type State = {
   crash: ?Crash,
 };
 
-const Padder = styled('div')(
+const Padder = styled.div(
   ({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
     paddingLeft: paddingLeft || 0,
     paddingRight: paddingRight || 0,
diff --git a/src/plugins/databases/index.js b/src/plugins/databases/index.js
index 6b2bc5d87..53cada576 100644
--- a/src/plugins/databases/index.js
+++ b/src/plugins/databases/index.js
@@ -38,13 +38,13 @@ import dateFormat from 'dateformat';
 
 const PAGE_SIZE = 50;
 
-const BoldSpan = styled('span')({
+const BoldSpan = styled.span({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',
   textTransform: 'uppercase',
 });
-const ErrorBar = styled('div')({
+const ErrorBar = styled.div({
   backgroundColor: colors.cherry,
   color: colors.white,
   lineHeight: '26px',
diff --git a/src/plugins/fresco/ImagesCacheOverview.tsx b/src/plugins/fresco/ImagesCacheOverview.tsx
index e65b7ed2a..7ecf232b5 100644
--- a/src/plugins/fresco/ImagesCacheOverview.tsx
+++ b/src/plugins/fresco/ImagesCacheOverview.tsx
@@ -288,7 +288,7 @@ class ImageGrid extends PureComponent<{
   size: number;
   events: Array<ImageEventWithId>;
 }> {
-  static Content = styled('div')({
+  static Content = styled.div({
     paddingLeft: 15,
   });
 
@@ -348,12 +348,12 @@ class ImageGridHeader extends PureComponent<{
     zIndex: 3,
   });
 
-  static Heading = styled('span')({
+  static Heading = styled.span({
     fontSize: 22,
     fontWeight: 600,
   });
 
-  static Subtitle = styled('span')({
+  static Subtitle = styled.span({
     fontSize: 22,
     fontWeight: 300,
     marginLeft: 15,
@@ -392,7 +392,7 @@ class ImageItem extends PureComponent<{
   size: number;
   numberOfRequests: number;
 }> {
-  static Container = styled(FlexBox)((props: {size: number}) => ({
+  static Container = styled(FlexBox)<{size: number}>(props => ({
     float: 'left',
     alignItems: 'center',
     justifyContent: 'center',
@@ -405,18 +405,18 @@ class ImageItem extends PureComponent<{
     backgroundColor: colors.light02,
   }));
 
-  static Image = styled('img')({
+  static Image = styled.img({
     borderRadius: 4,
     maxHeight: '100%',
     maxWidth: '100%',
     objectFit: 'contain',
   });
 
-  static Loading = styled('span')({
+  static Loading = styled.span({
     padding: '0 0',
   });
 
-  static SelectedHighlight = styled('div')((props: {selected: boolean}) => ({
+  static SelectedHighlight = styled.div<{selected: boolean}>(props => ({
     borderColor: colors.highlight,
     borderStyle: 'solid',
     borderWidth: props.selected ? 3 : 0,
@@ -429,8 +429,8 @@ class ImageItem extends PureComponent<{
     top: 0,
   }));
 
-  static HoverOverlay = styled(FlexColumn)(
-    (props: {selected: boolean; size: number}) => ({
+  static HoverOverlay = styled(FlexColumn)<{selected: boolean; size: number}>(
+    props => ({
       alignItems: 'center',
       backgroundColor: colors.whiteAlpha80,
       bottom: props.selected ? 4 : 0,
@@ -449,16 +449,16 @@ class ImageItem extends PureComponent<{
     }),
   );
 
-  static MemoryLabel = styled('span')({
+  static MemoryLabel = styled.span({
     fontWeight: 600,
     marginBottom: 6,
   });
 
-  static SizeLabel = styled('span')({
+  static SizeLabel = styled.span({
     fontWeight: 300,
   });
 
-  static Events = styled('div')({
+  static Events = styled.div({
     position: 'absolute',
     top: -5,
     right: -5,
diff --git a/src/plugins/fresco/ImagesSidebar.tsx b/src/plugins/fresco/ImagesSidebar.tsx
index 4603fb25f..26e52ef5a 100644
--- a/src/plugins/fresco/ImagesSidebar.tsx
+++ b/src/plugins/fresco/ImagesSidebar.tsx
@@ -29,7 +29,7 @@ type ImagesSidebarProps = {
 
 type ImagesSidebarState = {};
 
-const DataDescriptionKey = styled('span')({
+const DataDescriptionKey = styled.span({
   color: colors.grapeDark1,
 });
 
diff --git a/src/plugins/fresco/MultipleSelect.tsx b/src/plugins/fresco/MultipleSelect.tsx
index ab3f0e2d0..46cb5e835 100644
--- a/src/plugins/fresco/MultipleSelect.tsx
+++ b/src/plugins/fresco/MultipleSelect.tsx
@@ -15,7 +15,7 @@ const Container = styled(Block)({
   marginLeft: '10px',
 });
 
-const List = styled(FlexColumn)((props: {visibleList: boolean}) => ({
+const List = styled(FlexColumn)<{visibleList: boolean}>(props => ({
   display: props.visibleList ? 'flex' : 'none',
   position: 'absolute',
   top: '32px',
@@ -30,7 +30,7 @@ const List = styled(FlexColumn)((props: {visibleList: boolean}) => ({
   borderRadius: 4,
 }));
 
-const ListItem = styled('label')({
+const ListItem = styled.label({
   cursor: 'pointer',
   display: 'flex',
   alignItems: 'center',
@@ -43,7 +43,7 @@ const ListItem = styled('label')({
   },
 });
 
-const Checkbox = styled('input')({
+const Checkbox = styled.input({
   display: 'inline-block',
   marginRight: 5,
   verticalAlign: 'middle',
diff --git a/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap b/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap
index ed6cc0b24..29cf1dd38 100644
--- a/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap
+++ b/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap
@@ -2,31 +2,31 @@
 
 exports[`notifications for leaks 1`] = `
 <React.Fragment>
-  <Styled(div)>
+  <ForwardRef(render)>
     CloseableReference leaked for
      
-    <Text
+    <ForwardRef(render)
       code={true}
     >
       com.facebook.imagepipeline.memory.NativeMemoryChunk
-    </Text>
+    </ForwardRef(render)>
     (identity hashcode: 
     deadbeef
     ).
-  </Styled(div)>
-  <Styled(div)>
-    <Text
+  </ForwardRef(render)>
+  <ForwardRef(render)>
+    <ForwardRef(render)
       bold={true}
     >
       Stacktrace:
-    </Text>
-  </Styled(div)>
-  <Styled(div)>
-    <Text
+    </ForwardRef(render)>
+  </ForwardRef(render)>
+  <ForwardRef(render)>
+    <ForwardRef(render)
       code={true}
     >
       &lt;unavailable&gt;
-    </Text>
-  </Styled(div)>
+    </ForwardRef(render)>
+  </ForwardRef(render)>
 </React.Fragment>
 `;
diff --git a/src/plugins/layout/ToolbarIcon.tsx b/src/plugins/layout/ToolbarIcon.tsx
index 7bc55e67f..e20d1169e 100644
--- a/src/plugins/layout/ToolbarIcon.tsx
+++ b/src/plugins/layout/ToolbarIcon.tsx
@@ -17,7 +17,7 @@ type Props = {
   onClick: () => void;
 };
 
-const ToolbarIcon = styled('div')({
+const ToolbarIcon = styled.div({
   marginRight: 9,
   marginTop: -3,
   marginLeft: 4,
diff --git a/src/plugins/logs/index.tsx b/src/plugins/logs/index.tsx
index afafe17cb..dc7cdcb00 100644
--- a/src/plugins/logs/index.tsx
+++ b/src/plugins/logs/index.tsx
@@ -229,24 +229,22 @@ const HiddenScrollText = styled(Text)({
   },
 });
 
-const LogCount = styled('div')(
-  ({backgroundColor}: {backgroundColor: string}) => ({
-    backgroundColor,
-    borderRadius: '999em',
-    fontSize: 11,
-    marginTop: 4,
-    minWidth: 16,
-    height: 16,
-    color: colors.white,
-    textAlign: 'center',
-    lineHeight: '16px',
-    paddingLeft: 4,
-    paddingRight: 4,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  }),
-);
+const LogCount = styled.div<{backgroundColor: string}>(({backgroundColor}) => ({
+  backgroundColor,
+  borderRadius: '999em',
+  fontSize: 11,
+  marginTop: 4,
+  minWidth: 16,
+  height: 16,
+  color: colors.white,
+  textAlign: 'center',
+  lineHeight: '16px',
+  paddingLeft: 4,
+  paddingRight: 4,
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+}));
 
 function pad(chunk: any, len: number): string {
   let str = String(chunk);
diff --git a/src/plugins/navigation/components/AutoCompleteSheet.tsx b/src/plugins/navigation/components/AutoCompleteSheet.tsx
index ac58dc145..83e2aaa2e 100644
--- a/src/plugins/navigation/components/AutoCompleteSheet.tsx
+++ b/src/plugins/navigation/components/AutoCompleteSheet.tsx
@@ -22,7 +22,7 @@ type Props = {
 
 const MAX_ITEMS = 5;
 
-const AutoCompleteSheetContainer = styled('div')({
+const AutoCompleteSheetContainer = styled.div({
   width: '100%',
   position: 'absolute',
   top: 'calc(100% - 3px)',
@@ -33,7 +33,7 @@ const AutoCompleteSheetContainer = styled('div')({
   boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
 });
 
-const SheetItem = styled('div')({
+const SheetItem = styled.div({
   padding: 5,
   textOverflow: 'ellipsis',
   overflowX: 'hidden',
@@ -46,7 +46,7 @@ const SheetItem = styled('div')({
   },
 });
 
-const SheetItemIcon = styled('span')({
+const SheetItemIcon = styled.span({
   padding: 8,
 });
 
diff --git a/src/plugins/navigation/components/BookmarksSidebar.tsx b/src/plugins/navigation/components/BookmarksSidebar.tsx
index 9a4c09383..792c3b17b 100644
--- a/src/plugins/navigation/components/BookmarksSidebar.tsx
+++ b/src/plugins/navigation/components/BookmarksSidebar.tsx
@@ -32,7 +32,7 @@ const NoData = styled(FlexCenter)({
   color: colors.macOSTitleBarIcon,
 });
 
-const BookmarksList = styled('div')({
+const BookmarksList = styled.div({
   overflowY: 'scroll',
   overflowX: 'hidden',
   height: '100%',
diff --git a/src/plugins/navigation/components/FavoriteButton.tsx b/src/plugins/navigation/components/FavoriteButton.tsx
index c05686639..22e11499e 100644
--- a/src/plugins/navigation/components/FavoriteButton.tsx
+++ b/src/plugins/navigation/components/FavoriteButton.tsx
@@ -17,7 +17,7 @@ type Props = {
   size: IconSize;
 };
 
-const FavoriteButtonContainer = styled('div')({
+const FavoriteButtonContainer = styled.div({
   position: 'relative',
   '>:first-child': {
     position: 'absolute',
diff --git a/src/plugins/navigation/components/IconButton.tsx b/src/plugins/navigation/components/IconButton.tsx
index ac633c8db..16ba25f4c 100644
--- a/src/plugins/navigation/components/IconButton.tsx
+++ b/src/plugins/navigation/components/IconButton.tsx
@@ -27,7 +27,7 @@ type Props = {
   size: IconSize;
 };
 
-const RippleEffect = styled('div')({
+const RippleEffect = styled.div({
   padding: 5,
   borderRadius: 100,
   backgroundPosition: 'center',
@@ -43,7 +43,7 @@ const RippleEffect = styled('div')({
   },
 });
 
-const IconButton = styled('div')({
+const IconButton = styled.div({
   ':active': {
     animation: `${shrinkAnimation} .25s ease forwards`,
   },
diff --git a/src/plugins/navigation/components/NavigationInfoBox.tsx b/src/plugins/navigation/components/NavigationInfoBox.tsx
index 43a596708..777bf69e4 100644
--- a/src/plugins/navigation/components/NavigationInfoBox.tsx
+++ b/src/plugins/navigation/components/NavigationInfoBox.tsx
@@ -32,7 +32,7 @@ type Props = {
   date: Date | null;
 };
 
-const ScreenshotContainer = styled('div')({
+const ScreenshotContainer = styled.div({
   width: 200,
   minWidth: 200,
   overflow: 'hidden',
@@ -45,19 +45,19 @@ const ScreenshotContainer = styled('div')({
   },
 });
 
-const NoData = styled('div')({
+const NoData = styled.div({
   color: colors.light30,
   fontSize: 14,
   position: 'relative',
 });
 
-const NavigationDataContainer = styled('div')({
+const NavigationDataContainer = styled.div({
   alignItems: 'flex-start',
   flexGrow: 1,
   position: 'relative',
 });
 
-const Footer = styled('div')({
+const Footer = styled.div({
   width: '100%',
   padding: '10px',
   borderTop: `1px ${colors.blueGreyTint90} solid`,
@@ -65,16 +65,16 @@ const Footer = styled('div')({
   alignItems: 'center',
 });
 
-const Seperator = styled('div')({
+const Seperator = styled.div({
   flexGrow: 1,
 });
 
-const TimeContainer = styled('div')({
+const TimeContainer = styled.div({
   color: colors.light30,
   fontSize: 14,
 });
 
-const NavigationInfoBoxContainer = styled('div')({
+const NavigationInfoBoxContainer = styled.div({
   display: 'flex',
   height: BOX_HEIGHT,
   borderRadius: 10,
@@ -85,7 +85,7 @@ const NavigationInfoBoxContainer = styled('div')({
   boxShadow: '1px 1px 5px rgba(0,0,0,0.1)',
 });
 
-const Header = styled('div')({
+const Header = styled.div({
   fontSize: 18,
   fontWeight: 500,
   userSelect: 'text',
@@ -95,11 +95,11 @@ const Header = styled('div')({
   display: 'flex',
 });
 
-const ClassNameContainer = styled('div')({
+const ClassNameContainer = styled.div({
   color: colors.light30,
 });
 
-const ParametersContainer = styled('div')({
+const ParametersContainer = styled.div({
   height: 150,
   '&>*': {
     height: 150,
@@ -112,7 +112,7 @@ const NoParamters = styled(FlexCenter)({
   color: colors.light10,
 });
 
-const TimelineCircle = styled('div')({
+const TimelineCircle = styled.div({
   width: 18,
   height: 18,
   top: 11,
@@ -123,7 +123,7 @@ const TimelineCircle = styled('div')({
   position: 'absolute',
 });
 
-const TimelineMiniCircle = styled('div')({
+const TimelineMiniCircle = styled.div({
   width: 12,
   height: 12,
   top: 1,
diff --git a/src/plugins/navigation/components/RequiredParametersDialog.tsx b/src/plugins/navigation/components/RequiredParametersDialog.tsx
index e5378562a..ccffe4cc5 100644
--- a/src/plugins/navigation/components/RequiredParametersDialog.tsx
+++ b/src/plugins/navigation/components/RequiredParametersDialog.tsx
@@ -33,23 +33,23 @@ const Container = styled(FlexColumn)({
   width: 600,
 });
 
-const Title = styled('span')({
+const Title = styled.span({
   display: 'flex',
   marginTop: 8,
   marginLeft: 2,
   marginBottom: 8,
 });
 
-const Text = styled('span')({
+const Text = styled.span({
   lineHeight: 1.3,
 });
 
-const ErrorLabel = styled('span')({
+const ErrorLabel = styled.span({
   color: colors.yellow,
   lineHeight: 1.4,
 });
 
-const URIContainer = styled('div')({
+const URIContainer = styled.div({
   lineHeight: 1.3,
   marginLeft: 2,
   marginBottom: 8,
@@ -57,7 +57,7 @@ const URIContainer = styled('div')({
   overflowWrap: 'break-word',
 });
 
-const ButtonContainer = styled('div')({
+const ButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 
@@ -68,7 +68,7 @@ const RequiredParameterInput = styled(Input)({
   width: '100%',
 });
 
-const WarningIconContainer = styled('span')({
+const WarningIconContainer = styled.span({
   marginRight: 8,
 });
 
diff --git a/src/plugins/navigation/components/SaveBookmarkDialog.tsx b/src/plugins/navigation/components/SaveBookmarkDialog.tsx
index 2a744683e..830097c2a 100644
--- a/src/plugins/navigation/components/SaveBookmarkDialog.tsx
+++ b/src/plugins/navigation/components/SaveBookmarkDialog.tsx
@@ -25,20 +25,20 @@ const Container = styled(FlexColumn)({
   width: 400,
 });
 
-const Title = styled('div')({
+const Title = styled.div({
   fontWeight: 500,
   marginTop: 8,
   marginLeft: 2,
   marginBottom: 8,
 });
 
-const URIContainer = styled('div')({
+const URIContainer = styled.div({
   marginLeft: 2,
   marginBottom: 8,
   overflowWrap: 'break-word',
 });
 
-const ButtonContainer = styled('div')({
+const ButtonContainer = styled.div({
   marginLeft: 'auto',
 });
 
diff --git a/src/plugins/navigation/components/SearchBar.tsx b/src/plugins/navigation/components/SearchBar.tsx
index 0e0824517..4343123cf 100644
--- a/src/plugins/navigation/components/SearchBar.tsx
+++ b/src/plugins/navigation/components/SearchBar.tsx
@@ -28,7 +28,7 @@ type State = {
   prevURIFromAbove: URI;
 };
 
-const IconContainer = styled('div')({
+const IconContainer = styled.div({
   display: 'inline-flex',
   height: '16px',
   alignItems: 'center',
@@ -44,13 +44,13 @@ const IconContainer = styled('div')({
   },
 });
 
-const ToolbarContainer = styled('div')({
+const ToolbarContainer = styled.div({
   '.drop-shadow': {
     boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
   },
 });
 
-const SearchInputContainer = styled('div')({
+const SearchInputContainer = styled.div({
   width: '100%',
   marginLeft: 5,
   marginRight: 9,
diff --git a/src/plugins/navigation/components/Timeline.tsx b/src/plugins/navigation/components/Timeline.tsx
index d024a271d..aba7bd039 100644
--- a/src/plugins/navigation/components/Timeline.tsx
+++ b/src/plugins/navigation/components/Timeline.tsx
@@ -19,7 +19,7 @@ type Props = {
   onFavorite: (uri: URI) => void;
 };
 
-const TimelineLine = styled('div')({
+const TimelineLine = styled.div({
   width: 2,
   backgroundColor: colors.highlight,
   position: 'absolute',
@@ -27,7 +27,7 @@ const TimelineLine = styled('div')({
   bottom: 0,
 });
 
-const TimelineContainer = styled('div')({
+const TimelineContainer = styled.div({
   position: 'relative',
   paddingLeft: 25,
   overflowY: 'scroll',
@@ -43,7 +43,7 @@ const TimelineContainer = styled('div')({
   },
 });
 
-const NavigationEventContainer = styled('div')({
+const NavigationEventContainer = styled.div({
   display: 'flex',
   paddingTop: 25,
   paddingLeft: 25,
@@ -63,7 +63,7 @@ export default (props: Props) => {
   return events.length === 0 ? (
     <NoData>No Navigation Events to Show</NoData>
   ) : (
-    <TimelineContainer innerRef={timelineRef}>
+    <TimelineContainer ref={timelineRef}>
       <div>
         <TimelineLine />
         {events.map((event: NavigationEvent, idx: number) => {
diff --git a/src/plugins/network/RequestDetails.tsx b/src/plugins/network/RequestDetails.tsx
index 3fc76224c..573e19399 100644
--- a/src/plugins/network/RequestDetails.tsx
+++ b/src/plugins/network/RequestDetails.tsx
@@ -295,7 +295,7 @@ class HeaderInspector extends Component<
   }
 }
 
-const BodyContainer = styled('div')({
+const BodyContainer = styled.div({
   paddingTop: 10,
   paddingBottom: 20,
 });
@@ -382,7 +382,7 @@ type ImageWithSizeState = {
 };
 
 class ImageWithSize extends Component<ImageWithSizeProps, ImageWithSizeState> {
-  static Image = styled('img')({
+  static Image = styled.img({
     objectFit: 'scale-down',
     maxWidth: '100%',
     marginBottom: 10,
@@ -435,7 +435,7 @@ class ImageFormatter {
 }
 
 class VideoFormatter {
-  static Video = styled('video')({
+  static Video = styled.video({
     maxWidth: 500,
     maxHeight: 500,
   });
diff --git a/src/plugins/reactdevtools/index.tsx b/src/plugins/reactdevtools/index.tsx
index b6a9eeb66..ad0a0f4f6 100644
--- a/src/plugins/reactdevtools/index.tsx
+++ b/src/plugins/reactdevtools/index.tsx
@@ -14,7 +14,7 @@ import React from 'react';
 import getPort from 'get-port';
 import address from 'address';
 
-const Container = styled('div')({
+const Container = styled.div({
   display: 'flex',
   flex: '1 1 0%',
   justifyContent: 'center',
diff --git a/src/plugins/sandbox/index.tsx b/src/plugins/sandbox/index.tsx
index 993367047..b5a234de6 100644
--- a/src/plugins/sandbox/index.tsx
+++ b/src/plugins/sandbox/index.tsx
@@ -45,7 +45,7 @@ export default class SandboxView extends FlipperPlugin<
     showFeedback: false,
   };
 
-  static TextInput = styled('input')({
+  static TextInput = styled.input({
     border: `1px solid ${colors.light10}`,
     fontSize: '1em',
     padding: '0 5px',
@@ -55,7 +55,7 @@ export default class SandboxView extends FlipperPlugin<
     flexGrow: 1,
   });
 
-  static FeedbackMessage = styled('span')({
+  static FeedbackMessage = styled.span({
     fontSize: '1.2em',
     paddingTop: '10px',
     color: 'green',
diff --git a/src/plugins/seamammals/index.tsx b/src/plugins/seamammals/index.tsx
index 377df4f27..675671301 100644
--- a/src/plugins/seamammals/index.tsx
+++ b/src/plugins/seamammals/index.tsx
@@ -105,7 +105,7 @@ class Card extends React.Component<
     selected: boolean;
   } & Row
 > {
-  static Container = styled(FlexColumn)((props: {selected?: boolean}) => ({
+  static Container = styled(FlexColumn)<{selected?: boolean}>(props => ({
     margin: 10,
     borderRadius: 5,
     border: '2px solid black',
@@ -120,7 +120,7 @@ class Card extends React.Component<
     cursor: 'pointer',
   }));
 
-  static Image = styled('div')({
+  static Image = styled.div({
     backgroundSize: 'cover',
     width: '100%',
     paddingTop: '100%',
diff --git a/src/plugins/sections/EventsTable.js b/src/plugins/sections/EventsTable.js
index 2105e75e3..2bd46b636 100644
--- a/src/plugins/sections/EventsTable.js
+++ b/src/plugins/sections/EventsTable.js
@@ -73,7 +73,7 @@ const Row = styled(FlexRow)(props => ({
   },
 }));
 
-const Label = styled('div')({
+const Label = styled.div({
   width: LABEL_WIDTH,
   paddingLeft: 10,
   paddingRight: 10,
@@ -88,7 +88,7 @@ const Label = styled('div')({
   zIndex: 2,
 });
 
-const Content = styled('div')({
+const Content = styled.div({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   fontSize: 11,
@@ -98,7 +98,7 @@ const Content = styled('div')({
   color: colors.light50,
 });
 
-const Record = styled('div')(({highlighted}) => ({
+const Record = styled.div(({highlighted}) => ({
   border: `1px solid ${colors.light15}`,
   boxShadow: highlighted
     ? `inset 0 0 0 2px ${colors.macOSTitleBarIconSelected}`
@@ -116,7 +116,7 @@ const Record = styled('div')(({highlighted}) => ({
   alignItems: 'center',
 }));
 
-const Empty = styled('div')({
+const Empty = styled.div({
   width: WIDTH,
   padding: '10px 5px',
   marginRight: PADDING,
diff --git a/src/plugins/sections/Tree.js b/src/plugins/sections/Tree.js
index 9dd7e15ee..3c1da6770 100644
--- a/src/plugins/sections/Tree.js
+++ b/src/plugins/sections/Tree.js
@@ -13,7 +13,7 @@ import {Glyph, PureComponent, styled, Toolbar, Spacer, colors} from 'flipper';
 import {Tree} from 'react-d3-tree';
 import {Fragment} from 'react';
 
-const Legend = styled('div')(props => ({
+const Legend = styled.div(props => ({
   color: colors.dark50,
   marginLeft: 20,
   '&::before': {
@@ -29,7 +29,7 @@ const Legend = styled('div')(props => ({
   },
 }));
 
-const Label = styled('div')({
+const Label = styled.div({
   position: 'relative',
   top: -7,
   left: 7,
@@ -43,7 +43,7 @@ const Label = styled('div')({
   display: 'inline-block',
 });
 
-const Container = styled('div')({
+const Container = styled.div({
   width: '100%',
   height: '100%',
   overflow: 'hidden',
@@ -53,11 +53,11 @@ const Container = styled('div')({
     '10px 10px,10px 10px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px,100px 100px',
 });
 
-const LabelContainer = styled('div')({
+const LabelContainer = styled.div({
   display: 'flex',
 });
 
-const IconButton = styled('div')({
+const IconButton = styled.div({
   position: 'relative',
   left: 5,
   top: -8,
diff --git a/src/plugins/sections/index.js b/src/plugins/sections/index.js
index 436850ebb..cdbcdccec 100644
--- a/src/plugins/sections/index.js
+++ b/src/plugins/sections/index.js
@@ -45,14 +45,14 @@ const Waiting = styled(FlexBox)(props => ({
   textAlign: 'center',
 }));
 
-const InfoText = styled('div')(props => ({
+const InfoText = styled.div(props => ({
   marginTop: 10,
   marginBottom: 10,
   fontWeight: '500',
   color: colors.light30,
 }));
 
-const InfoBox = styled('div')(props => ({
+const InfoBox = styled.div(props => ({
   maxWidth: 400,
   margin: 'auto',
   textAlign: 'center',
diff --git a/src/ui/components/Block.tsx b/src/ui/components/Block.tsx
index 93c8844be..d7e38013f 100644
--- a/src/ui/components/Block.tsx
+++ b/src/ui/components/Block.tsx
@@ -7,12 +7,12 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A Block styled div
  */
-const Block = styled('div')({
+const Block = styled.div({
   display: 'block',
 });
 Block.displayName = 'Block';
diff --git a/src/ui/components/Bordered.tsx b/src/ui/components/Bordered.tsx
index 29d276d21..3aef905a4 100644
--- a/src/ui/components/Bordered.tsx
+++ b/src/ui/components/Bordered.tsx
@@ -7,13 +7,13 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 /**
  * Puts a gray border around something
  */
-const Bordered = styled('div')({
+const Bordered = styled.div({
   borderRadius: 4,
   overflow: 'hidden',
   border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
diff --git a/src/ui/components/Box.tsx b/src/ui/components/Box.tsx
index dd274f19f..b5794441d 100644
--- a/src/ui/components/Box.tsx
+++ b/src/ui/components/Box.tsx
@@ -8,7 +8,7 @@
  */
 
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const Box = styled(FlexBox)({
   height: '100%',
diff --git a/src/ui/components/Button.tsx b/src/ui/components/Button.tsx
index 3d1d45b35..d7b8f960f 100644
--- a/src/ui/components/Button.tsx
+++ b/src/ui/components/Button.tsx
@@ -10,11 +10,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import electron, {MenuItemConstructorOptions} from 'electron';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import {connect} from 'react-redux';
 import {findDOMNode} from 'react-dom';
-import {keyframes} from 'react-emotion';
+import {keyframes} from 'emotion';
 import {State as Store} from '../../reducers/index';
 import Glyph, {IconSize} from './Glyph';
 
@@ -106,88 +106,85 @@ const pulse = keyframes({
   },
 });
 
-const StyledButton = styled('div')(
-  (props: {
-    windowIsFocused?: boolean;
-    compact?: boolean;
-    inButtonGroup?: boolean;
-    padded?: boolean;
-    pulse?: boolean;
-    disabled?: boolean;
-    dropdown?: Array<MenuItemConstructorOptions>;
-  }) => ({
-    backgroundColor:
-      props.windowIsFocused && !props.disabled
-        ? colors.white
-        : colors.macOSTitleBarButtonBackgroundBlur,
-    backgroundImage: backgroundImage(props),
-    borderStyle: 'solid',
-    borderWidth: 1,
+const StyledButton = styled.div<{
+  windowIsFocused?: boolean;
+  compact?: boolean;
+  inButtonGroup?: boolean;
+  padded?: boolean;
+  pulse?: boolean;
+  disabled?: boolean;
+  dropdown?: Array<MenuItemConstructorOptions>;
+}>(props => ({
+  backgroundColor:
+    props.windowIsFocused && !props.disabled
+      ? colors.white
+      : colors.macOSTitleBarButtonBackgroundBlur,
+  backgroundImage: backgroundImage(props),
+  borderStyle: 'solid',
+  borderWidth: 1,
+  borderColor: borderColor(props),
+  borderBottomColor: borderBottomColor(props),
+  color: color(props),
+  borderRadius: 4,
+  position: 'relative',
+  padding: props.padded ? '0 15px' : '0 6px',
+  height: props.compact === true ? 24 : 28,
+  margin: 0,
+  minWidth: 34,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+
+  boxShadow:
+    props.pulse && props.windowIsFocused
+      ? `0 0 0 ${colors.macOSTitleBarIconSelected}`
+      : '',
+  animation: props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
+
+  '&:not(:first-child)': {
+    marginLeft: props.inButtonGroup === true ? 0 : 10,
+    borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
+    borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
+  },
+
+  '&:not(:last-child)': {
+    borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
+    borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
+    borderRight: props.inButtonGroup === true ? 0 : '',
+  },
+
+  '&:first-of-type': {
+    marginLeft: 0,
+  },
+
+  '&:active': props.disabled
+    ? null
+    : {
+        borderColor: colors.macOSTitleBarButtonBorder,
+        borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
+        background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`,
+      },
+
+  '&:disabled': {
     borderColor: borderColor(props),
     borderBottomColor: borderBottomColor(props),
-    color: color(props),
-    borderRadius: 4,
-    position: 'relative',
-    padding: props.padded ? '0 15px' : '0 6px',
-    height: props.compact === true ? 24 : 28,
-    margin: 0,
-    minWidth: 34,
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
+    pointerEvents: 'none',
+  },
 
-    boxShadow:
-      props.pulse && props.windowIsFocused
-        ? `0 0 0 ${colors.macOSTitleBarIconSelected}`
-        : '',
-    animation:
-      props.pulse && props.windowIsFocused ? `${pulse} 1s infinite` : '',
-
-    '&:not(:first-child)': {
-      marginLeft: props.inButtonGroup === true ? 0 : 10,
-      borderTopLeftRadius: props.inButtonGroup === true ? 0 : 4,
-      borderBottomLeftRadius: props.inButtonGroup === true ? 0 : 4,
-    },
-
-    '&:not(:last-child)': {
-      borderTopRightRadius: props.inButtonGroup === true ? 0 : 4,
-      borderBottomRightRadius: props.inButtonGroup === true ? 0 : 4,
-      borderRight: props.inButtonGroup === true ? 0 : '',
-    },
-
-    '&:first-of-type': {
-      marginLeft: 0,
-    },
-
-    '&:active': props.disabled
-      ? null
-      : {
-          borderColor: colors.macOSTitleBarButtonBorder,
-          borderBottomColor: colors.macOSTitleBarButtonBorderBottom,
-          background: `linear-gradient(to bottom, ${colors.macOSTitleBarButtonBackgroundActiveHighlight} 1px, ${colors.macOSTitleBarButtonBackgroundActive} 0%, ${colors.macOSTitleBarButtonBorderBlur} 100%)`,
-        },
-
-    '&:disabled': {
-      borderColor: borderColor(props),
-      borderBottomColor: borderBottomColor(props),
-      pointerEvents: 'none',
-    },
-
-    '&:hover::before': {
-      content: props.dropdown ? "''" : 'normal',
-      position: 'absolute',
-      bottom: 1,
-      right: 2,
-      borderStyle: 'solid',
-      borderWidth: '4px 3px 0 3px',
-      borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`,
-    },
-  }),
-);
+  '&:hover::before': {
+    content: props.dropdown ? "''" : 'normal',
+    position: 'absolute',
+    bottom: 1,
+    right: 2,
+    borderStyle: 'solid',
+    borderWidth: '4px 3px 0 3px',
+    borderColor: `${colors.macOSTitleBarIcon} transparent transparent transparent`,
+  },
+}));
 StyledButton.displayName = 'Button:StyledButton';
 
-const Icon = styled(Glyph)(({hasText}: {hasText: boolean}) => ({
+const Icon = styled(Glyph)<{hasText: boolean}>(({hasText}) => ({
   marginRight: hasText ? 3 : 0,
 }));
 Icon.displayName = 'Button:Icon';
diff --git a/src/ui/components/ButtonGroup.tsx b/src/ui/components/ButtonGroup.tsx
index 69d895e58..02cf35ca5 100644
--- a/src/ui/components/ButtonGroup.tsx
+++ b/src/ui/components/ButtonGroup.tsx
@@ -7,11 +7,11 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
-const ButtonGroupContainer = styled('div')({
+const ButtonGroupContainer = styled.div({
   display: 'inline-flex',
   marginLeft: 10,
   '&:first-child': {
diff --git a/src/ui/components/ButtonGroupChain.tsx b/src/ui/components/ButtonGroupChain.tsx
index 4aea750ce..34b36d142 100644
--- a/src/ui/components/ButtonGroupChain.tsx
+++ b/src/ui/components/ButtonGroupChain.tsx
@@ -9,10 +9,10 @@
 
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Glyph from './Glyph';
 
-const IconContainer = styled('div')({
+const IconContainer = styled.div({
   width: 0,
   zIndex: 1,
   display: 'inline-flex',
@@ -21,25 +21,23 @@ const IconContainer = styled('div')({
 });
 IconContainer.displayName = 'ButtonGroupChain:IconContainer';
 
-const ButtonGroupChainContainer = styled('div')(
-  (props: {iconSize: number}) => ({
-    display: 'inline-flex',
-    marginLeft: 10,
-    '&:first-child>*:not(:first-child):nth-child(odd)': {
-      paddingLeft: props.iconSize + 6,
-    },
-    '&:first-child>*': {
-      borderRightStyle: 'none',
-      borderLeftStyle: 'none',
-    },
-    '&:first-child>:first-child': {
-      borderLeftStyle: 'solid',
-    },
-    '&:first-child>:last-child': {
-      borderRightStyle: 'solid',
-    },
-  }),
-);
+const ButtonGroupChainContainer = styled.div<{iconSize: number}>(props => ({
+  display: 'inline-flex',
+  marginLeft: 10,
+  '&:first-child>*:not(:first-child):nth-child(odd)': {
+    paddingLeft: props.iconSize + 6,
+  },
+  '&:first-child>*': {
+    borderRightStyle: 'none',
+    borderLeftStyle: 'none',
+  },
+  '&:first-child>:first-child': {
+    borderLeftStyle: 'solid',
+  },
+  '&:first-child>:last-child': {
+    borderRightStyle: 'solid',
+  },
+}));
 IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer';
 
 type Props = {
diff --git a/src/ui/components/CenteredView.tsx b/src/ui/components/CenteredView.tsx
index 3e562b08e..b8100f9fb 100644
--- a/src/ui/components/CenteredView.tsx
+++ b/src/ui/components/CenteredView.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import FlexColumn from './FlexColumn';
 
@@ -19,7 +19,7 @@ const Container = styled(FlexColumn)({
 });
 Container.displayName = 'CenteredView:Container';
 
-const ContentWrapper = styled('div')({
+const ContentWrapper = styled.div({
   width: 500,
   marginLeft: 'auto',
   marginRight: 'auto',
diff --git a/src/ui/components/Checkbox.tsx b/src/ui/components/Checkbox.tsx
index ec1052b56..bee23de06 100644
--- a/src/ui/components/Checkbox.tsx
+++ b/src/ui/components/Checkbox.tsx
@@ -8,7 +8,7 @@
  */
 
 import {PureComponent} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 type CheckboxProps = {
@@ -18,7 +18,7 @@ type CheckboxProps = {
   onChange: (checked: boolean) => void;
 };
 
-const CheckboxContainer = styled('input')({
+const CheckboxContainer = styled.input({
   display: 'inline-block',
   marginRight: 5,
   verticalAlign: 'middle',
diff --git a/src/ui/components/CodeBlock.tsx b/src/ui/components/CodeBlock.tsx
index af784e4b9..494a4bac8 100644
--- a/src/ui/components/CodeBlock.tsx
+++ b/src/ui/components/CodeBlock.tsx
@@ -7,9 +7,9 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const CodeBlock = styled('div')({
+const CodeBlock = styled.div({
   fontFamily: 'monospace',
 });
 CodeBlock.displayName = 'CodeBlock';
diff --git a/src/ui/components/ContextMenuProvider.tsx b/src/ui/components/ContextMenuProvider.tsx
index b8b89ae90..7e32fbcc5 100644
--- a/src/ui/components/ContextMenuProvider.tsx
+++ b/src/ui/components/ContextMenuProvider.tsx
@@ -8,14 +8,14 @@
  */
 
 import {Component} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import electron, {MenuItemConstructorOptions} from 'electron';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 type MenuTemplate = Array<MenuItemConstructorOptions>;
 
-const Container = styled('div')({
+const Container = styled.div({
   display: 'contents',
 });
 Container.displayName = 'ContextMenuProvider:Container';
diff --git a/src/ui/components/ErrorBlock.tsx b/src/ui/components/ErrorBlock.tsx
index 46d607709..e0c2a0c80 100644
--- a/src/ui/components/ErrorBlock.tsx
+++ b/src/ui/components/ErrorBlock.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 import CodeBlock from './CodeBlock';
 
diff --git a/src/ui/components/ErrorBoundary.tsx b/src/ui/components/ErrorBoundary.tsx
index dd60b78aa..880453c16 100644
--- a/src/ui/components/ErrorBoundary.tsx
+++ b/src/ui/components/ErrorBoundary.tsx
@@ -12,7 +12,7 @@ import {Component} from 'react';
 import Heading from './Heading';
 import Button from './Button';
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 const ErrorBoundaryContainer = styled(View)({
diff --git a/src/ui/components/FlexBox.tsx b/src/ui/components/FlexBox.tsx
index 6e9429018..f53ed9b4c 100644
--- a/src/ui/components/FlexBox.tsx
+++ b/src/ui/components/FlexBox.tsx
@@ -8,7 +8,7 @@
  */
 
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 type Props = {
   /** Flexbox's shrink property. Set to `0`, to disable shrinking. */
@@ -18,7 +18,7 @@ type Props = {
 /**
  * A container using flexbox to layout its children
  */
-const FlexBox = styled(View)(({shrink}: Props) => ({
+const FlexBox = styled(View)<Props>(({shrink}) => ({
   display: 'flex',
   flexShrink: shrink == null || shrink ? 1 : 0,
 }));
diff --git a/src/ui/components/FlexCenter.tsx b/src/ui/components/FlexCenter.tsx
index 0d875e8cc..a81a75db7 100644
--- a/src/ui/components/FlexCenter.tsx
+++ b/src/ui/components/FlexCenter.tsx
@@ -8,7 +8,7 @@
  */
 
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A container displaying its children horizontally and vertically centered.
diff --git a/src/ui/components/FlexColumn.tsx b/src/ui/components/FlexColumn.tsx
index 995bfcaf8..de9242a07 100644
--- a/src/ui/components/FlexColumn.tsx
+++ b/src/ui/components/FlexColumn.tsx
@@ -8,7 +8,7 @@
  */
 
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A container displaying its children in a column
diff --git a/src/ui/components/FlexRow.tsx b/src/ui/components/FlexRow.tsx
index 0004082a2..8a674f46c 100644
--- a/src/ui/components/FlexRow.tsx
+++ b/src/ui/components/FlexRow.tsx
@@ -8,7 +8,7 @@
  */
 
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A container displaying its children in a row
diff --git a/src/ui/components/FocusableBox.tsx b/src/ui/components/FocusableBox.tsx
index 1ac0ac8a8..3d6409ba6 100644
--- a/src/ui/components/FocusableBox.tsx
+++ b/src/ui/components/FocusableBox.tsx
@@ -10,7 +10,7 @@
 import {Component} from 'react';
 import Box from './Box';
 import {colors} from './colors';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 const FocusableBoxBorder = styled(Box)({
diff --git a/src/ui/components/Glyph.tsx b/src/ui/components/Glyph.tsx
index eb4a93230..47146dbfb 100644
--- a/src/ui/components/Glyph.tsx
+++ b/src/ui/components/Glyph.tsx
@@ -8,13 +8,13 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import {getIconURL} from '../../utils/icons.js';
 
 export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32;
 
-const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
+const ColoredIconBlack = styled.img<{size: number}>(({size}) => ({
   height: size,
   verticalAlign: 'middle',
   width: size,
@@ -22,20 +22,22 @@ const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
 }));
 ColoredIconBlack.displayName = 'Glyph:ColoredIconBlack';
 
-const ColoredIconCustom = styled('div')(
-  (props: {size: number; color?: string; src: string}) => ({
-    height: props.size,
-    verticalAlign: 'middle',
-    width: props.size,
-    backgroundColor: props.color,
-    display: 'inline-block',
-    maskImage: `url('${props.src}')`,
-    maskSize: '100% 100%',
-    WebkitMaskImage: `url('${props.src}')`,
-    WebkitMaskSize: '100% 100%',
-    flexShrink: 0,
-  }),
-);
+const ColoredIconCustom = styled.div<{
+  size: number;
+  color?: string;
+  src: string;
+}>(props => ({
+  height: props.size,
+  verticalAlign: 'middle',
+  width: props.size,
+  backgroundColor: props.color,
+  display: 'inline-block',
+  maskImage: `url('${props.src}')`,
+  maskSize: '100% 100%',
+  WebkitMaskImage: `url('${props.src}')`,
+  WebkitMaskSize: '100% 100%',
+  flexShrink: 0,
+}));
 ColoredIconCustom.displayName = 'Glyph:ColoredIconCustom';
 
 function ColoredIcon(
diff --git a/src/ui/components/HBox.tsx b/src/ui/components/HBox.tsx
index 71bb9b1e3..75db68f64 100644
--- a/src/ui/components/HBox.tsx
+++ b/src/ui/components/HBox.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexRow from './FlexRow';
 
 /**
@@ -16,8 +16,8 @@ import FlexRow from './FlexRow';
  * It takes two children, 'left' and 'right'. One is assumed to have a fixed (or minimum) size,
  * and the other will grow automatically
  */
-const HBoxContainer = styled(FlexRow)(
-  ({verticalAlign}: {verticalAlign: string}) => ({
+const HBoxContainer = styled(FlexRow)<{verticalAlign: string}>(
+  ({verticalAlign}) => ({
     shrink: 0,
     alignItems: verticalAlign,
   }),
diff --git a/src/ui/components/Heading.tsx b/src/ui/components/Heading.tsx
index 64d90b5b2..2bbf37191 100644
--- a/src/ui/components/Heading.tsx
+++ b/src/ui/components/Heading.tsx
@@ -7,10 +7,10 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
-const LargeHeading = styled('div')({
+const LargeHeading = styled.div({
   fontSize: 18,
   fontWeight: 'bold',
   lineHeight: '20px',
@@ -19,7 +19,7 @@ const LargeHeading = styled('div')({
 });
 LargeHeading.displayName = 'Heading:LargeHeading';
 
-const SmallHeading = styled('div')({
+const SmallHeading = styled.div({
   fontSize: 12,
   color: '#90949c',
   fontWeight: 'bold',
diff --git a/src/ui/components/HorizontalRule.tsx b/src/ui/components/HorizontalRule.tsx
index dc08b1198..481d90472 100644
--- a/src/ui/components/HorizontalRule.tsx
+++ b/src/ui/components/HorizontalRule.tsx
@@ -7,9 +7,9 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const HorizontalRule = styled('div')({
+const HorizontalRule = styled.div({
   backgroundColor: '#c9ced4',
   height: 1,
   margin: '5px 0',
diff --git a/src/ui/components/Info.tsx b/src/ui/components/Info.tsx
index 0c6f28758..8a7bf349b 100644
--- a/src/ui/components/Info.tsx
+++ b/src/ui/components/Info.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
 import {colors} from './colors';
@@ -43,8 +43,8 @@ const bgColor = {
   spinning: 'transparent',
 };
 
-const InfoWrapper = styled(FlexColumn)(
-  ({type, small}: Pick<InfoProps, 'type' | 'small'>) => ({
+const InfoWrapper = styled(FlexColumn)<Pick<InfoProps, 'type' | 'small'>>(
+  ({type, small}) => ({
     padding: small ? '0 4px' : 10,
     borderRadius: 4,
     color: color[type],
diff --git a/src/ui/components/Input.tsx b/src/ui/components/Input.tsx
index 418ac9b06..e1aaa044d 100644
--- a/src/ui/components/Input.tsx
+++ b/src/ui/components/Input.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 export const inputStyle = (props: {
@@ -30,24 +30,18 @@ export const inputStyle = (props: {
   },
 });
 
-const Input = styled('input')(
-  ({
-    compact,
-    valid,
-    readOnly,
-  }: {
-    compact?: boolean;
-    valid?: boolean;
-    readOnly?: boolean;
-  }) => ({
-    ...inputStyle({
-      compact: compact || false,
-      valid: valid !== false,
-      readOnly: readOnly === true,
-    }),
-    padding: compact ? '0 5px' : '0 10px',
+const Input = styled.input<{
+  compact?: boolean;
+  valid?: boolean;
+  readOnly?: boolean;
+}>(({compact, valid, readOnly}) => ({
+  ...inputStyle({
+    compact: compact || false,
+    valid: valid !== false,
+    readOnly: readOnly === true,
   }),
-);
+  padding: compact ? '0 5px' : '0 10px',
+}));
 
 Input.displayName = 'Input';
 
diff --git a/src/ui/components/Interactive.tsx b/src/ui/components/Interactive.tsx
index a8d565f09..8de4d6eee 100644
--- a/src/ui/components/Interactive.tsx
+++ b/src/ui/components/Interactive.tsx
@@ -15,7 +15,7 @@ import {
   maybeSnapTop,
   SNAP_SIZE,
 } from '../../utils/snap';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import invariant from 'invariant';
 import React from 'react';
 
@@ -72,7 +72,7 @@ type InteractiveProps = {
   onResize?: (width: number, height: number) => void;
   resizing?: boolean;
   resizable?: boolean | ResizingSides;
-  innerRef?: (elem: HTMLElement) => void;
+  innerRef?: (elem: HTMLElement | null) => void;
   style?: Object;
   className?: string;
   children?: React.ReactNode;
@@ -90,7 +90,7 @@ type InteractiveState = {
   resizingInitialCursor: CursorState | null | undefined;
 };
 
-const InteractiveContainer = styled('div')({
+const InteractiveContainer = styled.div({
   willChange: 'transform, height, width, z-index',
 });
 InteractiveContainer.displayName = 'Interactive:InteractiveContainer';
@@ -118,11 +118,11 @@ export default class Interactive extends React.Component<
   }
 
   globalMouse: boolean;
-  ref: HTMLElement | undefined;
+  ref?: HTMLElement | null;
 
-  nextTop: number | null | undefined;
-  nextLeft: number | null | undefined;
-  nextEvent: MouseEvent | null | undefined;
+  nextTop?: number | null;
+  nextLeft?: number | null;
+  nextEvent?: MouseEvent | null;
 
   static defaultProps = {
     minHeight: 0,
@@ -656,7 +656,7 @@ export default class Interactive extends React.Component<
     });
   }
 
-  setRef = (ref: HTMLElement) => {
+  setRef = (ref: HTMLElement | null) => {
     this.ref = ref;
 
     const {innerRef} = this.props;
@@ -706,7 +706,7 @@ export default class Interactive extends React.Component<
       <InteractiveContainer
         className={this.props.className}
         hidden={this.props.hidden}
-        innerRef={this.setRef}
+        ref={this.setRef}
         onMouseDown={this.startAction}
         onMouseMove={this.onLocalMouseMove}
         onMouseLeave={this.onMouseLeave} // eslint-disable-next-line
diff --git a/src/ui/components/Label.tsx b/src/ui/components/Label.tsx
index fbac511e4..9d4177b8c 100644
--- a/src/ui/components/Label.tsx
+++ b/src/ui/components/Label.tsx
@@ -7,9 +7,9 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Label = styled('div')({
+const Label = styled.div({
   fontSize: 12,
   fontWeight: 'bold',
 });
diff --git a/src/ui/components/Link.tsx b/src/ui/components/Link.tsx
index 6a623c85e..944e754df 100644
--- a/src/ui/components/Link.tsx
+++ b/src/ui/components/Link.tsx
@@ -7,13 +7,13 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import {Component} from 'react';
 import {shell} from 'electron';
 import React from 'react';
 
-const StyledLink = styled('span')({
+const StyledLink = styled.span({
   color: colors.highlight,
   '&:hover': {
     cursor: 'pointer',
diff --git a/src/ui/components/LoadingIndicator.tsx b/src/ui/components/LoadingIndicator.tsx
index 9d69ee80a..7a457932f 100644
--- a/src/ui/components/LoadingIndicator.tsx
+++ b/src/ui/components/LoadingIndicator.tsx
@@ -7,8 +7,8 @@
  * @format
  */
 
-import styled from 'react-emotion';
-import {keyframes} from 'react-emotion';
+import styled from '@emotion/styled';
+import {keyframes} from 'emotion';
 
 const animation = keyframes({
   '0%': {
@@ -19,7 +19,7 @@ const animation = keyframes({
   },
 });
 
-const LoadingIndicator = styled('div')((props: {size: number}) => ({
+const LoadingIndicator = styled.div<{size: number}>(props => ({
   animation: `${animation} 1s infinite linear`,
   width: props.size,
   height: props.size,
diff --git a/src/ui/components/Markdown.tsx b/src/ui/components/Markdown.tsx
index 831ff4a0a..77344179e 100644
--- a/src/ui/components/Markdown.tsx
+++ b/src/ui/components/Markdown.tsx
@@ -8,19 +8,19 @@
  */
 
 import React, {PureComponent} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import ReactMarkdown from 'react-markdown';
 import {colors} from './colors';
 import {shell} from 'electron';
 
-const Container = styled('div')({
+const Container = styled.div({
   padding: 10,
 });
-const Row = styled('div')({
+const Row = styled.div({
   marginTop: 5,
   marginBottom: 5,
 });
-const Heading = styled('div')((props: {level: number}) => ({
+const Heading = styled.div<{level: number}>(props => ({
   fontSize: props.level === 1 ? 18 : 12,
   textTransform: props.level > 1 ? 'uppercase' : undefined,
   color: props.level > 1 ? '#90949c' : undefined,
@@ -28,16 +28,16 @@ const Heading = styled('div')((props: {level: number}) => ({
   marginBottom: 10,
   fontWeight: props.level > 1 ? 'bold' : 'normal',
 }));
-const ListItem = styled('li')({
+const ListItem = styled.li({
   'list-style-type': 'circle',
   'list-style-position': 'inside',
   marginLeft: 10,
 });
-const Strong = styled('span')({
+const Strong = styled.span({
   fontWeight: 'bold',
   color: '#1d2129',
 });
-const Emphasis = styled('span')({
+const Emphasis = styled.span({
   fontStyle: 'italic',
 });
 const Quote = styled(Row)({
@@ -45,7 +45,7 @@ const Quote = styled(Row)({
   backgroundColor: '#f1f2f3',
   fontSize: 13,
 });
-const Code = styled('span')({
+const Code = styled.span({
   fontFamily: '"Courier New", Courier, monospace',
   backgroundColor: '#f1f2f3',
 });
@@ -62,7 +62,7 @@ class CodeBlock extends PureComponent<{value: string; language: string}> {
     );
   }
 }
-const Link = styled('span')({
+const Link = styled.span({
   color: colors.blue,
 });
 class LinkReference extends PureComponent<{href: string}> {
diff --git a/src/ui/components/MarkerTimeline.tsx b/src/ui/components/MarkerTimeline.tsx
index 8c130a3fe..1e4603a54 100644
--- a/src/ui/components/MarkerTimeline.tsx
+++ b/src/ui/components/MarkerTimeline.tsx
@@ -8,7 +8,7 @@
  */
 
 import {Component} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Text from './Text';
 import FlexRow from './FlexRow';
 import {colors} from './colors';
@@ -29,7 +29,11 @@ type Props = {
   maxGap: number;
 };
 
-const Markers = styled('div')((props: {totalTime: number}) => ({
+type MouseEventHandler = (
+  event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+) => void;
+
+const Markers = styled.div<{totalTime: number}>(props => ({
   position: 'relative',
   margin: 10,
   height: props.totalTime,
@@ -45,69 +49,67 @@ const Markers = styled('div')((props: {totalTime: number}) => ({
 }));
 Markers.displayName = 'MarkerTimeline:Markers';
 
-const Point = styled(FlexRow)(
-  (props: {
-    positionY: number;
-    onClick: Function | undefined;
-    number: number | undefined;
-    threadColor: string;
-    selected: boolean;
-    cut: boolean;
-  }) => ({
+const Point = styled(FlexRow)<{
+  positionY: number;
+  onClick: MouseEventHandler | undefined;
+  number: number | undefined;
+  threadColor: string;
+  selected: boolean;
+  cut: boolean;
+}>(props => ({
+  position: 'absolute',
+  top: props.positionY,
+  left: 0,
+  right: 10,
+  cursor: props.onClick ? 'pointer' : 'default',
+  borderRadius: 3,
+  alignItems: 'flex-start',
+  lineHeight: '16px',
+  ':hover': {
+    background: `linear-gradient(to top, rgba(255,255,255,0) 0, #ffffff 10px)`,
+    paddingBottom: 5,
+    zIndex: 2,
+    '> span': {
+      whiteSpace: 'initial',
+    },
+  },
+  '::before': {
+    position: 'relative',
+    textAlign: 'center',
+    fontSize: 8,
+    fontWeight: 500,
+    content: props.number ? `'${props.number}'` : '""',
+    display: 'inline-block',
+    width: 9,
+    height: 9,
+    flexShrink: 0,
+    color: 'rgba(0,0,0,0.4)',
+    lineHeight: '9px',
+    borderRadius: '999em',
+    border: '1px solid rgba(0,0,0,0.2)',
+    backgroundColor: props.threadColor,
+    marginRight: 6,
+    zIndex: 3,
+    boxShadow: props.selected
+      ? `0 0 0 2px ${colors.macOSTitleBarIconSelected}`
+      : undefined,
+  },
+  '::after': {
+    content: props.cut ? '""' : undefined,
     position: 'absolute',
-    top: props.positionY,
+    width: 11,
+    top: -20,
     left: 0,
-    right: 10,
-    cursor: props.onClick ? 'pointer' : 'default',
-    borderRadius: 3,
-    alignItems: 'flex-start',
-    lineHeight: '16px',
-    ':hover': {
-      background: `linear-gradient(to top, rgba(255,255,255,0) 0, #ffffff 10px)`,
-      paddingBottom: 5,
-      zIndex: 2,
-      '> span': {
-        whiteSpace: 'initial',
-      },
-    },
-    '::before': {
-      position: 'relative',
-      textAlign: 'center',
-      fontSize: 8,
-      fontWeight: 500,
-      content: props.number ? `'${props.number}'` : '""',
-      display: 'inline-block',
-      width: 9,
-      height: 9,
-      flexShrink: 0,
-      color: 'rgba(0,0,0,0.4)',
-      lineHeight: '9px',
-      borderRadius: '999em',
-      border: '1px solid rgba(0,0,0,0.2)',
-      backgroundColor: props.threadColor,
-      marginRight: 6,
-      zIndex: 3,
-      boxShadow: props.selected
-        ? `0 0 0 2px ${colors.macOSTitleBarIconSelected}`
-        : undefined,
-    },
-    '::after': {
-      content: props.cut ? '""' : undefined,
-      position: 'absolute',
-      width: 11,
-      top: -20,
-      left: 0,
-      height: 2,
-      background: colors.white,
-      borderTop: `1px solid ${colors.light30}`,
-      borderBottom: `1px solid ${colors.light30}`,
-      transform: `skewY(-10deg)`,
-    },
-  }),
-);
+    height: 2,
+    background: colors.white,
+    borderTop: `1px solid ${colors.light30}`,
+    borderBottom: `1px solid ${colors.light30}`,
+    transform: `skewY(-10deg)`,
+  },
+}));
 Point.displayName = 'MakerTimeline:Point';
 
-const Time = styled('span')({
+const Time = styled.span({
   color: colors.light30,
   fontWeight: 300,
   marginRight: 4,
diff --git a/src/ui/components/ModalOverlay.tsx b/src/ui/components/ModalOverlay.tsx
index c319704b9..e81bde024 100644
--- a/src/ui/components/ModalOverlay.tsx
+++ b/src/ui/components/ModalOverlay.tsx
@@ -7,11 +7,11 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {Component} from 'react';
 import React from 'react';
 
-const Overlay = styled('div')({
+const Overlay = styled.div({
   alignItems: 'center',
   backgroundColor: 'rgba(0, 0, 0, 0.6)',
   bottom: 0,
@@ -29,9 +29,9 @@ export default class ModalOverlay extends Component<{
   onClose: () => void;
   children?: React.ReactNode;
 }> {
-  ref: HTMLElement | null | undefined;
+  ref?: HTMLElement | null;
 
-  setRef = (ref: HTMLElement) => {
+  setRef = (ref: HTMLElement | null) => {
     this.ref = ref;
   };
 
@@ -45,7 +45,7 @@ export default class ModalOverlay extends Component<{
     const {props} = this;
 
     return (
-      <Overlay innerRef={this.setRef} onClick={this.onClick}>
+      <Overlay ref={this.setRef} onClick={this.onClick}>
         {props.children}
       </Overlay>
     );
diff --git a/src/ui/components/MultiLineInput.tsx b/src/ui/components/MultiLineInput.tsx
index 095229641..d4826654c 100644
--- a/src/ui/components/MultiLineInput.tsx
+++ b/src/ui/components/MultiLineInput.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 export const multilineStyle = (props: {valid: boolean}) => ({
@@ -26,7 +26,7 @@ export const multilineStyle = (props: {valid: boolean}) => ({
   },
 });
 
-const MultiLineInput = styled('textarea')((props: {valid?: boolean}) => ({
+const MultiLineInput = styled.textarea<{valid?: boolean}>(props => ({
   ...multilineStyle({valid: props.valid === undefined || props.valid}),
   padding: '0 10px',
 }));
diff --git a/src/ui/components/Orderable.tsx b/src/ui/components/Orderable.tsx
index 4aad52417..f90787b7d 100644
--- a/src/ui/components/Orderable.tsx
+++ b/src/ui/components/Orderable.tsx
@@ -8,7 +8,7 @@
  */
 
 import {Rect} from '../../utils/geometry';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {Component} from 'react';
 import React from 'react';
 
@@ -38,26 +38,26 @@ type TabSizes = {
   [key: string]: Rect;
 };
 
-const OrderableContainer = styled('div')({
+const OrderableContainer = styled.div({
   position: 'relative',
 });
 OrderableContainer.displayName = 'Orderable:OrderableContainer';
 
-const OrderableItemContainer = styled('div')(
-  (props: {orientation: 'vertical' | 'horizontal'}) => ({
-    display: props.orientation === 'vertical' ? 'block' : 'inline-block',
-  }),
-);
+const OrderableItemContainer = styled.div<{
+  orientation: 'vertical' | 'horizontal';
+}>(props => ({
+  display: props.orientation === 'vertical' ? 'block' : 'inline-block',
+}));
 OrderableItemContainer.displayName = 'Orderable:OrderableItemContainer';
 
 class OrderableItem extends Component<{
   orientation: OrderableOrientation;
   id: string;
   children?: React.ReactNode;
-  addRef: (key: string, ref: HTMLElement) => void;
+  addRef: (key: string, ref: HTMLElement | null) => void;
   startMove: (KEY: string, event: React.MouseEvent) => void;
 }> {
-  addRef = (ref: HTMLElement) => {
+  addRef = (ref: HTMLElement | null) => {
     this.props.addRef(this.props.id, ref);
   };
 
@@ -70,7 +70,7 @@ class OrderableItem extends Component<{
       <OrderableItemContainer
         orientation={this.props.orientation}
         key={this.props.id}
-        innerRef={this.addRef}
+        ref={this.addRef}
         onMouseDown={this.startMove}>
         {this.props.children}
       </OrderableItemContainer>
@@ -98,9 +98,9 @@ export default class Orderable extends React.Component<
   mouseKey: 'offsetX' | 'offsetY' = 'offsetX';
   screenKey: 'screenX' | 'screenY' = 'screenX';
 
-  containerRef: HTMLElement | undefined;
+  containerRef: HTMLElement | undefined | null;
   tabRefs: {
-    [key: string]: HTMLElement | undefined;
+    [key: string]: HTMLElement | undefined | null;
   };
 
   static defaultProps = {
@@ -377,11 +377,11 @@ export default class Orderable extends React.Component<
     this.reset();
   }
 
-  addRef = (key: string, elem: HTMLElement | undefined) => {
+  addRef = (key: string, elem: HTMLElement | null) => {
     this.tabRefs[key] = elem;
   };
 
-  setContainerRef = (ref: HTMLElement) => {
+  setContainerRef = (ref: HTMLElement | null) => {
     this.containerRef = ref;
   };
 
@@ -406,7 +406,7 @@ export default class Orderable extends React.Component<
     return (
       <OrderableContainer
         className={this.props.className}
-        innerRef={this.setContainerRef}>
+        ref={this.setContainerRef}>
         {order.map(key => {
           const item = items[key];
           if (item) {
diff --git a/src/ui/components/Panel.tsx b/src/ui/components/Panel.tsx
index 85114af10..e270a6e2f 100644
--- a/src/ui/components/Panel.tsx
+++ b/src/ui/components/Panel.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexColumn from './FlexColumn';
 import FlexBox from './FlexBox';
 import {colors} from './colors';
@@ -85,16 +85,17 @@ export default class Panel extends React.Component<
     collapsable: true,
   };
 
-  static PanelContainer = styled(FlexColumn)(
-    (props: {floating?: boolean; collapsed?: boolean}) => ({
-      flexShrink: 0,
-      padding: props.floating ? 10 : 0,
-      borderBottom: props.collapsed ? 'none' : BORDER,
-    }),
-  );
+  static PanelContainer = styled(FlexColumn)<{
+    floating?: boolean;
+    collapsed?: boolean;
+  }>(props => ({
+    flexShrink: 0,
+    padding: props.floating ? 10 : 0,
+    borderBottom: props.collapsed ? 'none' : BORDER,
+  }));
 
-  static PanelHeader = styled(FlexBox)(
-    (props: {floating?: boolean; padded?: boolean}) => ({
+  static PanelHeader = styled(FlexBox)<{floating?: boolean; padded?: boolean}>(
+    props => ({
       backgroundColor: '#f6f7f9',
       border: props.floating ? BORDER : 'none',
       borderBottom: BORDER,
@@ -111,8 +112,8 @@ export default class Panel extends React.Component<
     }),
   );
 
-  static PanelBody = styled(FlexColumn)(
-    (props: {floating?: boolean; padded?: boolean}) => ({
+  static PanelBody = styled(FlexColumn)<{floating?: boolean; padded?: boolean}>(
+    props => ({
       backgroundColor: '#fff',
       border: props.floating ? BORDER : 'none',
       borderBottomLeftRadius: 2,
diff --git a/src/ui/components/Popover.tsx b/src/ui/components/Popover.tsx
index d066dbee2..7b3e89c24 100644
--- a/src/ui/components/Popover.tsx
+++ b/src/ui/components/Popover.tsx
@@ -9,10 +9,10 @@
 
 import React, {PureComponent} from 'react';
 import FlexColumn from './FlexColumn';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
-const Anchor = styled('img')({
+const Anchor = styled.img({
   zIndex: 6,
   position: 'absolute',
   bottom: 0,
@@ -26,7 +26,7 @@ type Opts = {
   skewLeft?: boolean;
 };
 
-const PopoverContainer = styled(FlexColumn)((props: {opts?: Opts}) => ({
+const PopoverContainer = styled(FlexColumn)<{opts?: Opts}>(props => ({
   backgroundColor: colors.white,
   borderRadius: 7,
   border: '1px solid rgba(0,0,0,0.3)',
@@ -66,7 +66,7 @@ type Props = {
 };
 
 export default class Popover extends PureComponent<Props> {
-  _ref: Element | undefined;
+  _ref?: Element | null;
 
   componentDidMount() {
     window.document.addEventListener('click', this.handleClick);
@@ -90,7 +90,7 @@ export default class Popover extends PureComponent<Props> {
     }
   };
 
-  _setRef = (ref: Element | undefined) => {
+  _setRef = (ref: Element | null) => {
     this._ref = ref;
   };
 
@@ -99,7 +99,7 @@ export default class Popover extends PureComponent<Props> {
       <>
         <Anchor src="./anchor.svg" key="anchor" />
         <PopoverContainer
-          innerRef={this._setRef}
+          ref={this._setRef}
           key="popup"
           opts={this.props.forceOpts || {}}>
           {this.props.children}
diff --git a/src/ui/components/ResizeSensor.tsx b/src/ui/components/ResizeSensor.tsx
index 38d98bfc6..1b45bee48 100644
--- a/src/ui/components/ResizeSensor.tsx
+++ b/src/ui/components/ResizeSensor.tsx
@@ -7,11 +7,11 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {Component} from 'react';
 import React from 'react';
 
-const IFrame = styled('iframe')({
+const IFrame = styled.iframe({
   height: '100%',
   width: '100%',
   border: 'none',
@@ -30,26 +30,26 @@ export default class ResizeSensor extends Component<{
   /** Callback when resize happened */
   onResize: (e: UIEvent) => void;
 }> {
-  iframe: HTMLIFrameElement | undefined;
+  iframe: HTMLIFrameElement | undefined | null;
 
-  setRef = (ref: HTMLIFrameElement | undefined) => {
+  setRef = (ref: HTMLIFrameElement | null) => {
     this.iframe = ref;
   };
 
   render() {
-    return <IFrame innerRef={this.setRef} />;
+    return <IFrame ref={this.setRef} />;
   }
 
   componentDidMount() {
     const {iframe} = this;
-    if (iframe != null && iframe.contentWindow != null) {
+    if (iframe && iframe.contentWindow != null) {
       iframe.contentWindow.addEventListener('resize', this.handleResize);
     }
   }
 
   componentWillUnmount() {
     const {iframe} = this;
-    if (iframe != null && iframe.contentWindow != null) {
+    if (iframe && iframe.contentWindow != null) {
       iframe.contentWindow.removeEventListener('resize', this.handleResize);
     }
   }
diff --git a/src/ui/components/RoundedSection.tsx b/src/ui/components/RoundedSection.tsx
index 03da901c2..f2588dde6 100644
--- a/src/ui/components/RoundedSection.tsx
+++ b/src/ui/components/RoundedSection.tsx
@@ -8,19 +8,19 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import Heading from './Heading';
 import FlexColumn from './FlexColumn';
 
-const Divider = styled('hr')({
+const Divider = styled.hr({
   margin: '16px -20px 20px -20px',
   border: 'none',
   borderTop: `1px solid ${colors.light05}`,
 });
 Divider.displayName = 'RoundedSection:Divider';
 
-const Container = styled('div')({
+const Container = styled.div({
   background: colors.white,
   borderRadius: 10,
   boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
diff --git a/src/ui/components/Select.tsx b/src/ui/components/Select.tsx
index b7f1e89a7..943ba5d23 100644
--- a/src/ui/components/Select.tsx
+++ b/src/ui/components/Select.tsx
@@ -9,10 +9,10 @@
 
 import {Component} from 'react';
 import Text from './Text';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 
-const Label = styled('label')({
+const Label = styled.label({
   display: 'flex',
   alignItems: 'center',
 });
@@ -24,7 +24,7 @@ const LabelText = styled(Text)({
 });
 LabelText.displayName = 'Select:LabelText';
 
-const SelectMenu = styled('select')((props: {grow?: boolean}) => ({
+const SelectMenu = styled.select<{grow?: boolean}>(props => ({
   flexGrow: props.grow ? 1 : 0,
 }));
 SelectMenu.displayName = 'Select:SelectMenu';
diff --git a/src/ui/components/Sidebar.tsx b/src/ui/components/Sidebar.tsx
index 7506938b8..d2056143a 100644
--- a/src/ui/components/Sidebar.tsx
+++ b/src/ui/components/Sidebar.tsx
@@ -11,7 +11,7 @@ import Interactive from './Interactive';
 import FlexColumn from './FlexColumn';
 import {colors} from './colors';
 import {Component} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {
   BackgroundClipProperty,
   HeightProperty,
@@ -27,25 +27,22 @@ SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
 
 type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
 
-const SidebarContainer = styled(FlexColumn)(
-  (props: {
-    position: 'right' | 'top' | 'left' | 'bottom';
-    backgroundColor?: BackgroundClipProperty;
-    overflow?: boolean;
-  }) => ({
-    backgroundColor:
-      props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
-    borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
-    borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
-    borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
-    borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
-    height: '100%',
-    overflowX: 'hidden',
-    overflowY: 'auto',
-    textOverflow: props.overflow ? 'ellipsis' : 'auto',
-    whiteSpace: props.overflow ? 'nowrap' : 'normal',
-  }),
-);
+const SidebarContainer = styled(FlexColumn)<{
+  position: 'right' | 'top' | 'left' | 'bottom';
+  backgroundColor?: BackgroundClipProperty;
+  overflow?: boolean;
+}>(props => ({
+  backgroundColor: props.backgroundColor || colors.macOSTitleBarBackgroundBlur,
+  borderLeft: props.position === 'right' ? '1px solid #b3b3b3' : 'none',
+  borderTop: props.position === 'bottom' ? '1px solid #b3b3b3' : 'none',
+  borderRight: props.position === 'left' ? '1px solid #b3b3b3' : 'none',
+  borderBottom: props.position === 'top' ? '1px solid #b3b3b3' : 'none',
+  height: '100%',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  textOverflow: props.overflow ? 'ellipsis' : 'auto',
+  whiteSpace: props.overflow ? 'nowrap' : 'normal',
+}));
 SidebarContainer.displayName = 'Sidebar:SidebarContainer';
 
 type SidebarProps = {
diff --git a/src/ui/components/SidebarLabel.tsx b/src/ui/components/SidebarLabel.tsx
index 80544001b..9dc82dd92 100644
--- a/src/ui/components/SidebarLabel.tsx
+++ b/src/ui/components/SidebarLabel.tsx
@@ -9,7 +9,7 @@
 
 import {colors} from './colors';
 import Label from './Label';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const SidebarLabel = styled(Label)({
   color: colors.blackAlpha30,
diff --git a/src/ui/components/SmallText.tsx b/src/ui/components/SmallText.tsx
index 2d5793e9c..c00d303f4 100644
--- a/src/ui/components/SmallText.tsx
+++ b/src/ui/components/SmallText.tsx
@@ -7,18 +7,18 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import Text from './Text';
 
 /**
  * Subtle text that should not draw attention
  */
-const SmallText = styled(Text)(({center}: {center?: boolean}) => ({
+const SmallText = styled(Text)<{center?: boolean}>(props => ({
   color: colors.light20,
   size: 10,
   fontStyle: 'italic',
-  textAlign: center ? 'center' : undefined,
+  textAlign: props.center ? 'center' : undefined,
   width: '100%',
 }));
 SmallText.displayName = 'SmallText';
diff --git a/src/ui/components/StackTrace.tsx b/src/ui/components/StackTrace.tsx
index 0f6f052ba..02622a097 100644
--- a/src/ui/components/StackTrace.tsx
+++ b/src/ui/components/StackTrace.tsx
@@ -13,7 +13,7 @@ import {colors} from './colors';
 import ManagedTable from './table/ManagedTable';
 import FlexRow from './FlexRow';
 import Glyph from './Glyph';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 import {BackgroundColorProperty} from 'csstype';
 import {
@@ -23,22 +23,17 @@ import {
   TableBodyColumn,
 } from './table/types';
 
-const Padder = styled('div')(
-  ({
-    padded,
-    backgroundColor,
-  }: {
-    padded?: boolean;
-    backgroundColor?: BackgroundColorProperty;
-  }) => ({
-    padding: padded ? 10 : 0,
-    backgroundColor,
-  }),
-);
+const Padder = styled.div<{
+  padded?: boolean;
+  backgroundColor?: BackgroundColorProperty;
+}>(({padded, backgroundColor}) => ({
+  padding: padded ? 10 : 0,
+  backgroundColor,
+}));
 Padder.displayName = 'StackTrace:Padder';
 
-const Container = styled('div')(
-  ({isCrash, padded}: {isCrash?: boolean; padded?: boolean}) => ({
+const Container = styled.div<{isCrash?: boolean; padded?: boolean}>(
+  ({isCrash, padded}) => ({
     backgroundColor: isCrash ? colors.redTint : 'transprent',
     border: padded
       ? `1px solid ${isCrash ? colors.red : colors.light15}`
@@ -49,7 +44,7 @@ const Container = styled('div')(
 );
 Container.displayName = 'StackTrace:Container';
 
-const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
+const Title = styled(FlexRow)<{isCrash?: boolean}>(({isCrash}) => ({
   color: isCrash ? colors.red : 'inherit',
   padding: 8,
   alignItems: 'center',
@@ -57,15 +52,15 @@ const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
 }));
 Title.displayName = 'StackTrace:Title';
 
-const Reason = styled(Text)(({isCrash}: {isCrash?: boolean}) => ({
+const Reason = styled(Text)<{isCrash?: boolean}>(({isCrash}) => ({
   color: isCrash ? colors.red : colors.light80,
   fontWeight: 'bold',
   fontSize: 13,
 }));
 Reason.displayName = 'StackTrace:Reason';
 
-const Line = styled(Text)(
-  ({isCrash, isBold}: {isCrash?: boolean; isBold?: boolean}) => ({
+const Line = styled(Text)<{isCrash?: boolean; isBold?: boolean}>(
+  ({isCrash, isBold}) => ({
     color: isCrash ? colors.red : colors.light80,
     fontWeight: isBold ? 'bold' : 'normal',
   }),
diff --git a/src/ui/components/StarButton.tsx b/src/ui/components/StarButton.tsx
index 87d9eefba..5e4596197 100644
--- a/src/ui/components/StarButton.tsx
+++ b/src/ui/components/StarButton.tsx
@@ -10,7 +10,7 @@
 import React, {useState, useCallback} from 'react';
 import {colors} from './colors';
 import Glyph from './Glyph';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const DownscaledGlyph = styled(Glyph)({
   maskSize: '12px 12px',
diff --git a/src/ui/components/StatusIndicator.tsx b/src/ui/components/StatusIndicator.tsx
index 7b8e08d3b..94854431e 100644
--- a/src/ui/components/StatusIndicator.tsx
+++ b/src/ui/components/StatusIndicator.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 
 import {BackgroundColorProperty, HeightProperty} from 'csstype';
@@ -18,8 +18,8 @@ type Props = {
   title?: string;
 };
 
-const StatusIndicator = styled('div')(
-  ({statusColor, diameter = 10, title}: Props) => ({
+const StatusIndicator = styled.div<Props>(
+  ({statusColor, diameter = 10, title}) => ({
     alignSelf: 'center',
     backgroundColor: statusColor,
     border: `1px solid ${colors.blackAlpha30}`,
diff --git a/src/ui/components/Tabs.tsx b/src/ui/components/Tabs.tsx
index f5000d673..aad55c1a1 100644
--- a/src/ui/components/Tabs.tsx
+++ b/src/ui/components/Tabs.tsx
@@ -8,7 +8,7 @@
  */
 
 import FlexColumn from './FlexColumn';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Orderable from './Orderable';
 import FlexRow from './FlexRow';
 import {colors} from './colors';
@@ -23,49 +23,47 @@ const TabList = styled(FlexRow)({
 });
 TabList.displayName = 'Tabs:TabList';
 
-const TabListItem = styled('div')(
-  (props: {
-    active?: boolean;
-    width?: WidthProperty<number>;
-    container?: boolean;
-  }) => ({
-    background: props.container
-      ? props.active
-        ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
-        : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
-      : props.active
-      ? colors.light15
-      : colors.light02,
-    borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
-    boxShadow:
-      props.active && props.container
-        ? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
-        : 'none',
-    color: props.container && props.active ? colors.white : colors.dark80,
-    flex: props.container ? 'unset' : 1,
-    top: props.container ? -11 : 0,
-    fontWeight: 500,
-    fontSize: 13,
-    lineHeight: props.container ? '22px' : '28px',
-    overflow: 'hidden',
-    padding: '0 10px',
-    position: 'relative',
-    textAlign: 'center',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    '&:first-child': {
-      borderTopLeftRadius: props.container ? 3 : 0,
-      borderBottomLeftRadius: props.container ? 3 : 0,
-    },
-    '&:last-child': {
-      borderTopRightRadius: props.container ? 3 : 0,
-      borderBottomRightRadius: props.container ? 3 : 0,
-    },
-    '&:hover': {
-      backgroundColor: props.active ? colors.light15 : colors.light05,
-    },
-  }),
-);
+const TabListItem = styled.div<{
+  active?: boolean;
+  width?: WidthProperty<number>;
+  container?: boolean;
+}>(props => ({
+  background: props.container
+    ? props.active
+      ? 'linear-gradient(to bottom, #67a6f7 0%, #0072FA 100%)'
+      : `linear-gradient(to bottom, white 0%,${colors.macOSTitleBarButtonBackgroundBlur} 100%)`
+    : props.active
+    ? colors.light15
+    : colors.light02,
+  borderBottom: props.container ? '1px solid #B8B8B8' : '1px solid #dddfe2',
+  boxShadow:
+    props.active && props.container
+      ? 'inset 0px 0px 3px rgba(0,0,0,0.25)'
+      : 'none',
+  color: props.container && props.active ? colors.white : colors.dark80,
+  flex: props.container ? 'unset' : 1,
+  top: props.container ? -11 : 0,
+  fontWeight: 500,
+  fontSize: 13,
+  lineHeight: props.container ? '22px' : '28px',
+  overflow: 'hidden',
+  padding: '0 10px',
+  position: 'relative',
+  textAlign: 'center',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  '&:first-child': {
+    borderTopLeftRadius: props.container ? 3 : 0,
+    borderBottomLeftRadius: props.container ? 3 : 0,
+  },
+  '&:last-child': {
+    borderTopRightRadius: props.container ? 3 : 0,
+    borderBottomRightRadius: props.container ? 3 : 0,
+  },
+  '&:hover': {
+    backgroundColor: props.active ? colors.light15 : colors.light05,
+  },
+}));
 TabListItem.displayName = 'Tabs:TabListItem';
 
 const TabListAddItem = styled(TabListItem)({
@@ -76,7 +74,7 @@ const TabListAddItem = styled(TabListItem)({
 });
 TabListAddItem.displayName = 'Tabs:TabListAddItem';
 
-const CloseButton = styled('div')({
+const CloseButton = styled.div({
   color: '#000',
   float: 'right',
   fontSize: 10,
@@ -96,12 +94,12 @@ const CloseButton = styled('div')({
 });
 CloseButton.displayName = 'Tabs:CloseButton';
 
-const OrderableContainer = styled('div')({
+const OrderableContainer = styled.div({
   display: 'inline-block',
 });
 OrderableContainer.displayName = 'Tabs:OrderableContainer';
 
-const TabContent = styled('div')({
+const TabContent = styled.div({
   height: '100%',
   overflow: 'auto',
   width: '100%',
@@ -233,7 +231,7 @@ export default function Tabs(props: {
         continue;
       }
 
-      let closeButton: HTMLDivElement | undefined;
+      let closeButton: HTMLDivElement | undefined | null;
 
       tabs[key] = (
         <TabListItem
@@ -253,7 +251,7 @@ export default function Tabs(props: {
           {comp.props.label}
           {closable && (
             <CloseButton // eslint-disable-next-line react/jsx-no-bind
-              innerRef={ref => (closeButton = ref)} // eslint-disable-next-line react/jsx-no-bind
+              ref={ref => (closeButton = ref)} // eslint-disable-next-line react/jsx-no-bind
               onMouseDown={() => {
                 if (isActive && onActive) {
                   const index = keys.indexOf(key);
diff --git a/src/ui/components/TabsContainer.tsx b/src/ui/components/TabsContainer.tsx
index 5734da705..507642052 100644
--- a/src/ui/components/TabsContainer.tsx
+++ b/src/ui/components/TabsContainer.tsx
@@ -8,9 +8,9 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const Container = styled('div')({
+const Container = styled.div({
   backgroundColor: '#E3E3E3',
   borderRadius: 4,
   boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',
diff --git a/src/ui/components/Text.tsx b/src/ui/components/Text.tsx
index 0f9238930..df669bd23 100644
--- a/src/ui/components/Text.tsx
+++ b/src/ui/components/Text.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {
   ColorProperty,
   FontSizeProperty,
@@ -21,45 +21,42 @@ import {
 /**
  * A Text component.
  */
-const Text = styled('span')(
-  (props: {
-    color?: ColorProperty;
-    bold?: boolean;
-    italic?: boolean;
-    underline?: boolean;
-    align?: TextAlignProperty;
-    size?: FontSizeProperty<number>;
-    code?: boolean;
-    family?: FontFamilyProperty;
-    selectable?: boolean;
-    wordWrap?: WordWrapProperty;
-    whiteSpace?: WhiteSpaceProperty;
-    cursor?: CursorProperty;
-  }) => ({
-    color: props.color ? props.color : 'inherit',
-    cursor: props.cursor ? props.cursor : 'auto',
-    display: 'inline',
-    fontWeight: props.bold ? 'bold' : 'inherit',
-    fontStyle: props.italic ? 'italic' : 'normal',
-    textAlign: props.align || 'left',
-    fontSize: props.size == null && props.code ? 12 : props.size,
-    textDecoration: props.underline ? 'underline' : 'initial',
-    fontFamily: props.code
-      ? 'SF Mono, Monaco, Andale Mono, monospace'
-      : props.family,
-    overflow: props.code ? 'auto' : 'visible',
-    userSelect:
-      props.selectable ||
-      (props.code && typeof props.selectable === 'undefined')
-        ? 'text'
-        : 'none',
-    wordWrap: props.code ? 'break-word' : props.wordWrap,
-    whiteSpace:
-      props.code && typeof props.whiteSpace === 'undefined'
-        ? 'pre'
-        : props.whiteSpace,
-  }),
-);
+const Text = styled.span<{
+  color?: ColorProperty;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  align?: TextAlignProperty;
+  size?: FontSizeProperty<number>;
+  code?: boolean;
+  family?: FontFamilyProperty;
+  selectable?: boolean;
+  wordWrap?: WordWrapProperty;
+  whiteSpace?: WhiteSpaceProperty;
+  cursor?: CursorProperty;
+}>(props => ({
+  color: props.color ? props.color : 'inherit',
+  cursor: props.cursor ? props.cursor : 'auto',
+  display: 'inline',
+  fontWeight: props.bold ? 'bold' : 'inherit',
+  fontStyle: props.italic ? 'italic' : 'normal',
+  textAlign: props.align || 'left',
+  fontSize: props.size == null && props.code ? 12 : props.size,
+  textDecoration: props.underline ? 'underline' : 'initial',
+  fontFamily: props.code
+    ? 'SF Mono, Monaco, Andale Mono, monospace'
+    : props.family,
+  overflow: props.code ? 'auto' : 'visible',
+  userSelect:
+    props.selectable || (props.code && typeof props.selectable === 'undefined')
+      ? 'text'
+      : 'none',
+  wordWrap: props.code ? 'break-word' : props.wordWrap,
+  whiteSpace:
+    props.code && typeof props.whiteSpace === 'undefined'
+      ? 'pre'
+      : props.whiteSpace,
+}));
 Text.displayName = 'Text';
 
 export default Text;
diff --git a/src/ui/components/TextParagraph.tsx b/src/ui/components/TextParagraph.tsx
index 63db0e5d1..91027cf88 100644
--- a/src/ui/components/TextParagraph.tsx
+++ b/src/ui/components/TextParagraph.tsx
@@ -7,12 +7,12 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A TextParagraph component.
  */
-const TextParagraph = styled('div')({
+const TextParagraph = styled.div({
   marginBottom: 10,
 
   '&:last-child': {
diff --git a/src/ui/components/Textarea.tsx b/src/ui/components/Textarea.tsx
index 642736e67..08fd7c7be 100644
--- a/src/ui/components/Textarea.tsx
+++ b/src/ui/components/Textarea.tsx
@@ -7,29 +7,23 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {inputStyle} from './Input';
 
-const Textarea = styled('textarea')(
-  ({
-    compact,
-    readOnly,
-    valid,
-  }: {
-    compact?: boolean;
-    readOnly?: boolean;
-    valid?: boolean;
-  }) => ({
-    ...inputStyle({
-      compact: compact || false,
-      readOnly: readOnly || false,
-      valid: valid !== false,
-    }),
-    lineHeight: 'normal',
-    padding: compact ? '5px' : '8px',
-    resize: 'none',
+const Textarea = styled.textarea<{
+  compact?: boolean;
+  readOnly?: boolean;
+  valid?: boolean;
+}>(({compact, readOnly, valid}) => ({
+  ...inputStyle({
+    compact: compact || false,
+    readOnly: readOnly || false,
+    valid: valid !== false,
   }),
-);
+  lineHeight: 'normal',
+  padding: compact ? '5px' : '8px',
+  resize: 'none',
+}));
 Textarea.displayName = 'Textarea';
 
 export default Textarea;
diff --git a/src/ui/components/ToggleSwitch.tsx b/src/ui/components/ToggleSwitch.tsx
index 8438e006b..24bdf8fca 100644
--- a/src/ui/components/ToggleSwitch.tsx
+++ b/src/ui/components/ToggleSwitch.tsx
@@ -8,12 +8,12 @@
  */
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import Text from './Text';
 import FlexRow from './FlexRow';
 
-export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
+export const StyledButton = styled.div<{toggled: boolean}>(props => ({
   width: '30px',
   height: '16px',
   background: props.toggled ? colors.green : colors.grey,
diff --git a/src/ui/components/Toolbar.tsx b/src/ui/components/Toolbar.tsx
index fca94f62c..9cddce2f9 100644
--- a/src/ui/components/Toolbar.tsx
+++ b/src/ui/components/Toolbar.tsx
@@ -10,30 +10,31 @@
 import {colors} from './colors';
 import FlexRow from './FlexRow';
 import FlexBox from './FlexBox';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 /**
  * A toolbar.
  */
-const Toolbar = styled(FlexRow)(
-  (props: {position?: 'bottom' | 'top'; compact?: boolean}) => ({
-    backgroundColor: colors.light02,
-    borderBottom:
-      props.position === 'bottom'
-        ? 'none'
-        : `1px solid ${colors.sectionHeaderBorder}`,
-    borderTop:
-      props.position === 'bottom'
-        ? `1px solid ${colors.sectionHeaderBorder}`
-        : 'none',
-    flexShrink: 0,
-    height: props.compact ? 28 : 42,
-    lineHeight: '32px',
-    alignItems: 'center',
-    padding: 6,
-    width: '100%',
-  }),
-);
+const Toolbar = styled(FlexRow)<{
+  position?: 'bottom' | 'top';
+  compact?: boolean;
+}>(props => ({
+  backgroundColor: colors.light02,
+  borderBottom:
+    props.position === 'bottom'
+      ? 'none'
+      : `1px solid ${colors.sectionHeaderBorder}`,
+  borderTop:
+    props.position === 'bottom'
+      ? `1px solid ${colors.sectionHeaderBorder}`
+      : 'none',
+  flexShrink: 0,
+  height: props.compact ? 28 : 42,
+  lineHeight: '32px',
+  alignItems: 'center',
+  padding: 6,
+  width: '100%',
+}));
 Toolbar.displayName = 'Toolbar';
 
 export const Spacer = styled(FlexBox)({
diff --git a/src/ui/components/Tooltip.tsx b/src/ui/components/Tooltip.tsx
index 6104e1739..a13000bea 100644
--- a/src/ui/components/Tooltip.tsx
+++ b/src/ui/components/Tooltip.tsx
@@ -8,11 +8,11 @@
  */
 
 import TooltipProvider, {TooltipOptions} from './TooltipProvider';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 
-const TooltipContainer = styled('div')({
+const TooltipContainer = styled.div({
   display: 'contents',
 });
 TooltipContainer.displayName = 'Tooltip:TooltipContainer';
@@ -38,7 +38,7 @@ export default class Tooltip extends Component<TooltipProps, TooltipState> {
     TOOLTIP_PROVIDER: TooltipProvider;
   };
 
-  ref: HTMLDivElement | undefined;
+  ref: HTMLDivElement | undefined | null;
 
   state = {
     open: false,
@@ -66,14 +66,14 @@ export default class Tooltip extends Component<TooltipProps, TooltipState> {
     this.setState({open: false});
   };
 
-  setRef = (ref: HTMLDivElement | undefined) => {
+  setRef = (ref: HTMLDivElement | null) => {
     this.ref = ref;
   };
 
   render() {
     return (
       <TooltipContainer
-        innerRef={this.setRef}
+        ref={this.setRef}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}>
         {this.props.children}
diff --git a/src/ui/components/TooltipProvider.tsx b/src/ui/components/TooltipProvider.tsx
index 207907280..28b5b201f 100644
--- a/src/ui/components/TooltipProvider.tsx
+++ b/src/ui/components/TooltipProvider.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from './colors';
 import {Component} from 'react';
 import PropTypes from 'prop-types';
@@ -52,37 +52,35 @@ export type TooltipOptions = {
   delay?: number; // in milliseconds
 };
 
-const TooltipBubble = styled('div')(
-  (props: {
-    top: TopProperty<number>;
-    left: LeftProperty<number>;
-    bottom: BottomProperty<number>;
-    right: RightProperty<number>;
-    options: {
-      backgroundColor: BackgroundColorProperty;
-      lineHeight: LineHeightProperty<number>;
-      padding: PaddingProperty<number>;
-      borderRadius: BorderRadiusProperty<number>;
-      width: WidthProperty<number>;
-      maxWidth: MaxWidthProperty<number>;
-      color: ColorProperty;
-    };
-  }) => ({
-    position: 'absolute',
-    zIndex: 99999999999,
-    backgroundColor: props.options.backgroundColor,
-    lineHeight: props.options.lineHeight,
-    padding: props.options.padding,
-    borderRadius: props.options.borderRadius,
-    width: props.options.width,
-    maxWidth: props.options.maxWidth,
-    top: props.top,
-    left: props.left,
-    bottom: props.bottom,
-    right: props.right,
-    color: props.options.color,
-  }),
-);
+const TooltipBubble = styled.div<{
+  top: TopProperty<number>;
+  left: LeftProperty<number>;
+  bottom: BottomProperty<number>;
+  right: RightProperty<number>;
+  options: {
+    backgroundColor: BackgroundColorProperty;
+    lineHeight: LineHeightProperty<number>;
+    padding: PaddingProperty<number>;
+    borderRadius: BorderRadiusProperty<number>;
+    width: WidthProperty<number>;
+    maxWidth: MaxWidthProperty<number>;
+    color: ColorProperty;
+  };
+}>(props => ({
+  position: 'absolute',
+  zIndex: 99999999999,
+  backgroundColor: props.options.backgroundColor,
+  lineHeight: props.options.lineHeight,
+  padding: props.options.padding,
+  borderRadius: props.options.borderRadius,
+  width: props.options.width,
+  maxWidth: props.options.maxWidth,
+  top: props.top,
+  left: props.left,
+  bottom: props.bottom,
+  right: props.right,
+  color: props.options.color,
+}));
 TooltipBubble.displayName = 'TooltipProvider:TooltipBubble';
 
 // vertical offset on bubble when position is 'below'
@@ -96,31 +94,29 @@ const TAIL_AB_POSITION_HORIZONTAL_OFFSET = 15;
 // vertical offset on tail when position is 'toLeft' or 'toRight'
 const TAIL_LR_POSITION_HORIZONTAL_OFFSET = 5;
 
-const TooltipTail = styled('div')(
-  (props: {
-    top: TopProperty<number>;
-    left: LeftProperty<number>;
-    bottom: BottomProperty<number>;
-    right: RightProperty<number>;
-    options: {
-      backgroundColor: BackgroundColorProperty;
-    };
-  }) => ({
-    position: 'absolute',
-    display: 'block',
-    whiteSpace: 'pre',
-    height: '10px',
-    width: '10px',
-    lineHeight: '0',
-    zIndex: 99999999998,
-    transform: 'rotate(45deg)',
-    backgroundColor: props.options.backgroundColor,
-    top: props.top,
-    left: props.left,
-    bottom: props.bottom,
-    right: props.right,
-  }),
-);
+const TooltipTail = styled.div<{
+  top: TopProperty<number>;
+  left: LeftProperty<number>;
+  bottom: BottomProperty<number>;
+  right: RightProperty<number>;
+  options: {
+    backgroundColor: BackgroundColorProperty;
+  };
+}>(props => ({
+  position: 'absolute',
+  display: 'block',
+  whiteSpace: 'pre',
+  height: '10px',
+  width: '10px',
+  lineHeight: '0',
+  zIndex: 99999999998,
+  transform: 'rotate(45deg)',
+  backgroundColor: props.options.backgroundColor,
+  top: props.top,
+  left: props.left,
+  bottom: props.bottom,
+  right: props.right,
+}));
 TooltipTail.displayName = 'TooltipProvider:TooltipTail';
 
 type TooltipProps = {
diff --git a/src/ui/components/VBox.tsx b/src/ui/components/VBox.tsx
index 44e1f467e..ba00d4bec 100644
--- a/src/ui/components/VBox.tsx
+++ b/src/ui/components/VBox.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexColumn from './FlexColumn';
 
 /**
diff --git a/src/ui/components/VerticalRule.tsx b/src/ui/components/VerticalRule.tsx
index 98c3ee502..944e40b77 100644
--- a/src/ui/components/VerticalRule.tsx
+++ b/src/ui/components/VerticalRule.tsx
@@ -7,9 +7,9 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
-const VerticalRule = styled('div')({
+const VerticalRule = styled.div({
   backgroundColor: '#c9ced4',
   width: 3,
   margin: '0',
diff --git a/src/ui/components/View.tsx b/src/ui/components/View.tsx
index cfb7c980c..26310b7c3 100644
--- a/src/ui/components/View.tsx
+++ b/src/ui/components/View.tsx
@@ -7,14 +7,14 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 type Props = {
   grow?: boolean;
   scrollable?: boolean;
 };
 
-const View = styled('div')((props: Props) => ({
+const View = styled.div<Props>(props => ({
   height: props.grow ? '100%' : 'auto',
   overflow: props.scrollable ? 'auto' : 'visible',
   position: 'relative',
diff --git a/src/ui/components/VirtualList.tsx b/src/ui/components/VirtualList.tsx
index b15102892..3645a706b 100644
--- a/src/ui/components/VirtualList.tsx
+++ b/src/ui/components/VirtualList.tsx
@@ -10,12 +10,12 @@
 import FlexColumn from './FlexColumn';
 import {Component} from 'react';
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import React from 'react';
 import {HeightProperty, TopProperty} from 'csstype';
 
-const Inner = styled(FlexColumn)(
-  ({height}: {height: HeightProperty<number>}) => ({
+const Inner = styled(FlexColumn)<{height: HeightProperty<number>}>(
+  ({height}) => ({
     alignItems: 'flex-start',
     height,
     minHeight: '100%',
@@ -26,7 +26,7 @@ const Inner = styled(FlexColumn)(
 );
 Inner.displayName = 'VirtualList:Inner';
 
-const Content = styled(FlexColumn)(({top}: {top: TopProperty<number>}) => ({
+const Content = styled(FlexColumn)<{top: TopProperty<number>}>(({top}) => ({
   alignItems: 'flex-start',
   height: '100%',
   marginTop: top,
@@ -65,9 +65,9 @@ export default class VirtualList extends Component<
     overscanCount: 10,
   };
 
-  ref: HTMLElement | undefined;
+  ref: HTMLElement | undefined | null;
 
-  setRef = (ref: HTMLElement) => {
+  setRef = (ref: HTMLElement | null) => {
     this.ref = ref;
   };
 
@@ -136,7 +136,7 @@ export default class VirtualList extends Component<
       <View
         grow={true}
         onScroll={this.handleScroll}
-        innerRef={this.setRef}
+        ref={this.setRef}
         scrollable={true}>
         {inner}
       </View>
diff --git a/src/ui/components/console.tsx b/src/ui/components/console.tsx
index f864f2568..be326c89a 100644
--- a/src/ui/components/console.tsx
+++ b/src/ui/components/console.tsx
@@ -16,7 +16,7 @@ import Text from './Text';
 import ManagedDataInspector from './data-inspector/ManagedDataInspector';
 import Input from './Input';
 import View from './View';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {TableBodyRow, TableRows} from './table/types';
 import {PluginClient} from '../../plugin';
 
diff --git a/src/ui/components/data-inspector/DataDescription.tsx b/src/ui/components/data-inspector/DataDescription.tsx
index 60405ed15..741ff3b63 100644
--- a/src/ui/components/data-inspector/DataDescription.tsx
+++ b/src/ui/components/data-inspector/DataDescription.tsx
@@ -10,7 +10,7 @@
 import Link from '../Link';
 import {DataInspectorSetValue} from './DataInspector';
 import {PureComponent} from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {SketchPicker} from 'react-color';
 import {Component, Fragment} from 'react';
 import Popover from '../Popover';
@@ -18,37 +18,37 @@ import {colors} from '../colors';
 import Input from '../Input';
 import React, {KeyboardEvent} from 'react';
 
-const NullValue = styled('span')({
+const NullValue = styled.span({
   color: 'rgb(128, 128, 128)',
 });
 NullValue.displayName = 'DataDescription:NullValue';
 
-const UndefinedValue = styled('span')({
+const UndefinedValue = styled.span({
   color: 'rgb(128, 128, 128)',
 });
 UndefinedValue.displayName = 'DataDescription:UndefinedValue';
 
-const StringValue = styled('span')({
+const StringValue = styled.span({
   color: colors.cherryDark1,
 });
 StringValue.displayName = 'DataDescription:StringValue';
 
-const ColorValue = styled('span')({
+const ColorValue = styled.span({
   color: colors.blueGrey,
 });
 ColorValue.displayName = 'DataDescription:ColorValue';
 
-const SymbolValue = styled('span')({
+const SymbolValue = styled.span({
   color: 'rgb(196, 26, 22)',
 });
 SymbolValue.displayName = 'DataDescription:SymbolValue';
 
-const NumberValue = styled('span')({
+const NumberValue = styled.span({
   color: colors.tealDark1,
 });
 NumberValue.displayName = 'DataDescription:NumberValue';
 
-const ColorBox = styled('span')((props: {color: string}) => ({
+const ColorBox = styled.span<{color: string}>(props => ({
   backgroundColor: props.color,
   boxShadow: 'inset 0 0 1px rgba(0, 0, 0, 1)',
   display: 'inline-block',
@@ -59,18 +59,18 @@ const ColorBox = styled('span')((props: {color: string}) => ({
 }));
 ColorBox.displayName = 'DataDescription:ColorBox';
 
-const FunctionKeyword = styled('span')({
+const FunctionKeyword = styled.span({
   color: 'rgb(170, 13, 145)',
   fontStyle: 'italic',
 });
 FunctionKeyword.displayName = 'DataDescription:FunctionKeyword';
 
-const FunctionName = styled('span')({
+const FunctionName = styled.span({
   fontStyle: 'italic',
 });
 FunctionName.displayName = 'DataDescription:FunctionName';
 
-const ColorPickerDescription = styled('div')({
+const ColorPickerDescription = styled.div({
   display: 'inline',
   position: 'relative',
 });
diff --git a/src/ui/components/data-inspector/DataInspector.tsx b/src/ui/components/data-inspector/DataInspector.tsx
index 31c1c9008..1395d48a5 100644
--- a/src/ui/components/data-inspector/DataInspector.tsx
+++ b/src/ui/components/data-inspector/DataInspector.tsx
@@ -12,7 +12,7 @@ import {MenuTemplate} from '../ContextMenu';
 import {Component} from 'react';
 import ContextMenu from '../ContextMenu';
 import Tooltip from '../Tooltip';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import createPaste from '../../../fb-stubs/createPaste';
 import {reportInteraction} from '../../../utils/InteractionTracker';
 import DataPreview, {DataValueExtractor, InspectorName} from './DataPreview';
@@ -25,8 +25,8 @@ import {TooltipOptions} from '../TooltipProvider.js';
 
 export {DataValueExtractor} from './DataPreview';
 
-const BaseContainer = styled('div')(
-  (props: {depth?: number; disabled?: boolean}) => ({
+const BaseContainer = styled.div<{depth?: number; disabled?: boolean}>(
+  props => ({
     fontFamily: 'Menlo, monospace',
     fontSize: 11,
     lineHeight: '17px',
@@ -38,22 +38,22 @@ const BaseContainer = styled('div')(
 );
 BaseContainer.displayName = 'DataInspector:BaseContainer';
 
-const RecursiveBaseWrapper = styled('span')({
+const RecursiveBaseWrapper = styled.span({
   color: colors.red,
 });
 RecursiveBaseWrapper.displayName = 'DataInspector:RecursiveBaseWrapper';
 
-const Wrapper = styled('span')({
+const Wrapper = styled.span({
   color: '#555',
 });
 Wrapper.displayName = 'DataInspector:Wrapper';
 
-const PropertyContainer = styled('span')({
+const PropertyContainer = styled.span({
   paddingTop: '2px',
 });
 PropertyContainer.displayName = 'DataInspector:PropertyContainer';
 
-const ExpandControl = styled('span')({
+const ExpandControl = styled.span({
   color: '#6e6e6e',
   fontSize: 10,
   marginLeft: -11,
@@ -489,10 +489,10 @@ export default class DataInspector extends Component<DataInspectorProps> {
 
       const keys = getSortedKeys({...value, ...diffValue});
 
-      const Added = styled('div')({
+      const Added = styled.div({
         backgroundColor: colors.tealTint70,
       });
-      const Removed = styled('div')({
+      const Removed = styled.div({
         backgroundColor: colors.cherryTint70,
       });
 
diff --git a/src/ui/components/data-inspector/DataPreview.tsx b/src/ui/components/data-inspector/DataPreview.tsx
index b8e7f0eeb..df936c6c5 100755
--- a/src/ui/components/data-inspector/DataPreview.tsx
+++ b/src/ui/components/data-inspector/DataPreview.tsx
@@ -8,7 +8,7 @@
  */
 
 import DataDescription from './DataDescription';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {getSortedKeys} from './utils';
 import {PureComponent} from 'react';
 import React from 'react';
@@ -26,12 +26,12 @@ export type DataValueExtractor = (
   | undefined
   | null;
 
-export const InspectorName = styled('span')({
+export const InspectorName = styled.span({
   color: colors.grapeDark1,
 });
 InspectorName.displayName = 'DataInspector:InspectorName';
 
-const PreviewContainer = styled('span')({
+const PreviewContainer = styled.span({
   fontStyle: 'italic',
 });
 PreviewContainer.displayName = 'DataPreview:PreviewContainer';
diff --git a/src/ui/components/desktop-toolbar.tsx b/src/ui/components/desktop-toolbar.tsx
index 57834a33e..6573c8cfc 100644
--- a/src/ui/components/desktop-toolbar.tsx
+++ b/src/ui/components/desktop-toolbar.tsx
@@ -7,11 +7,11 @@
  * @format
  */
 
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors, darkColors} from './colors';
 import React from 'react';
 
-const DesktopDropdownContainer = styled('div')({
+const DesktopDropdownContainer = styled.div({
   borderBottom: `1px solid ${darkColors.dividers}`,
   lineHeight: '25px',
   marginTop: 5,
@@ -48,7 +48,7 @@ export function DesktopDropdown(props: {
   );
 }
 
-const DesktopDropdownItemContainer = styled('div')(
+const DesktopDropdownItemContainer = styled.div(
   (props: {onClick?: Function; onHover?: Function}) => ({
     listStyle: 'none',
     opacity: props.onClick || props.onHover ? 1 : 0.5,
diff --git a/src/ui/components/elements-inspector/elements.tsx b/src/ui/components/elements-inspector/elements.tsx
index 32f596a95..56a83ba6e 100644
--- a/src/ui/components/elements-inspector/elements.tsx
+++ b/src/ui/components/elements-inspector/elements.tsx
@@ -16,7 +16,7 @@ import FlexColumn from '../FlexColumn';
 import Glyph from '../Glyph';
 import {colors} from '../colors';
 import Text from '../Text';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {clipboard, MenuItemConstructorOptions} from 'electron';
 import React, {MouseEvent, KeyboardEvent} from 'react';
 
@@ -51,7 +51,7 @@ const backgroundColorHover = (props: {selected: boolean; focused: boolean}) => {
   }
 };
 
-const ElementsRowContainer = styled(ContextMenu)((props: any) => ({
+const ElementsRowContainer = styled(ContextMenu)<any>(props => ({
   flexDirection: 'row',
   alignItems: 'center',
   backgroundColor: backgroundColor(props),
@@ -85,7 +85,7 @@ const ElementsRowDecoration = styled(FlexRow)({
 });
 ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';
 
-const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
+const ElementsLine = styled.div<{childrenCount: number}>(props => ({
   backgroundColor: colors.light20,
   height: props.childrenCount * ROW_HEIGHT - 4,
   position: 'absolute',
@@ -97,7 +97,7 @@ const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
 }));
 ElementsLine.displayName = 'Elements:ElementsLine';
 
-const DecorationImage = styled('img')({
+const DecorationImage = styled.img({
   height: 12,
   marginRight: 5,
   width: 12,
@@ -121,12 +121,12 @@ const ElementsRowAttributeContainer = styled(NoShrinkText)({
 ElementsRowAttributeContainer.displayName =
   'Elements:ElementsRowAttributeContainer';
 
-const ElementsRowAttributeKey = styled('span')({
+const ElementsRowAttributeKey = styled.span({
   color: colors.tomato,
 });
 ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey';
 
-const ElementsRowAttributeValue = styled('span')({
+const ElementsRowAttributeValue = styled.span({
   color: colors.slateDark3,
 });
 ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue';
@@ -136,7 +136,7 @@ class PartialHighlight extends PureComponent<{
   highlighted: string | undefined | null;
   content: string;
 }> {
-  static HighlightedText = styled('span')((props: {selected: boolean}) => ({
+  static HighlightedText = styled.span<{selected: boolean}>(props => ({
     backgroundColor: colors.lemon,
     color: props.selected ? `${colors.grapeDark3} !important` : 'auto',
   }));
diff --git a/src/ui/components/filter/FilterRow.tsx b/src/ui/components/filter/FilterRow.tsx
index d60acdd82..bb428853b 100644
--- a/src/ui/components/filter/FilterRow.tsx
+++ b/src/ui/components/filter/FilterRow.tsx
@@ -11,10 +11,10 @@ import {Filter} from './types.js';
 import React, {PureComponent} from 'react';
 import ContextMenu from '../ContextMenu';
 import textContent from '../../../utils/textContent';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from '../colors';
 
-const FilterText = styled('div')({
+const FilterText = styled.div({
   display: 'flex',
   alignSelf: 'baseline',
   userSelect: 'none',
diff --git a/src/ui/components/searchable/FilterToken.tsx b/src/ui/components/searchable/FilterToken.tsx
index 08edf952f..5a6fecec2 100644
--- a/src/ui/components/searchable/FilterToken.tsx
+++ b/src/ui/components/searchable/FilterToken.tsx
@@ -10,15 +10,14 @@
 import {Filter} from '../filter/types';
 import {PureComponent} from 'react';
 import Text from '../Text';
-import styled from 'react-emotion';
-import {findDOMNode} from 'react-dom';
+import styled from '@emotion/styled';
 import {colors} from '../colors';
 import electron, {MenuItemConstructorOptions} from 'electron';
 import React from 'react';
 import {ColorProperty} from 'csstype';
 
-const Token = styled(Text)(
-  (props: {focused?: boolean; color?: ColorProperty}) => ({
+const Token = styled(Text)<{focused?: boolean; color?: ColorProperty}>(
+  props => ({
     display: 'inline-flex',
     alignItems: 'center',
     backgroundColor: props.focused
@@ -41,26 +40,27 @@ const Token = styled(Text)(
 );
 Token.displayName = 'FilterToken:Token';
 
-const Key = styled(Text)(
-  (props: {type: 'exclude' | 'include' | 'enum'; focused?: boolean}) => ({
-    position: 'relative',
-    fontWeight: 500,
-    paddingRight: 12,
-    textTransform: 'capitalize',
-    lineHeight: '21px',
-    '&:after': {
-      content: props.type === 'exclude' ? '"≠"' : '"="',
-      paddingLeft: 5,
-      position: 'absolute',
-      top: -1,
-      right: 0,
-      fontSize: 14,
-    },
-    '&:active:after': {
-      backgroundColor: colors.macOSHighlightActive,
-    },
-  }),
-);
+const Key = styled(Text)<{
+  type: 'exclude' | 'include' | 'enum';
+  focused?: boolean;
+}>(props => ({
+  position: 'relative',
+  fontWeight: 500,
+  paddingRight: 12,
+  textTransform: 'capitalize',
+  lineHeight: '21px',
+  '&:after': {
+    content: props.type === 'exclude' ? '"≠"' : '"="',
+    paddingLeft: 5,
+    position: 'absolute',
+    top: -1,
+    right: 0,
+    fontSize: 14,
+  },
+  '&:active:after': {
+    backgroundColor: colors.macOSHighlightActive,
+  },
+}));
 Key.displayName = 'FilterToken:Key';
 
 const Value = styled(Text)({
@@ -73,7 +73,7 @@ const Value = styled(Text)({
 });
 Value.displayName = 'FilterToken:Value';
 
-const Chevron = styled('div')((props: {focused?: boolean}) => ({
+const Chevron = styled.div<{focused?: boolean}>(props => ({
   border: 0,
   paddingLeft: 3,
   paddingRight: 1,
@@ -104,7 +104,7 @@ type Props = {
 };
 
 export default class FilterToken extends PureComponent<Props> {
-  _ref: Element | undefined;
+  _ref?: Element | null;
 
   onMouseDown = () => {
     if (
@@ -202,11 +202,8 @@ export default class FilterToken extends PureComponent<Props> {
     }
   };
 
-  setRef = (ref: React.ReactInstance) => {
-    const element = findDOMNode(ref);
-    if (element instanceof HTMLElement) {
-      this._ref = element;
-    }
+  setRef = (ref: HTMLSpanElement | null) => {
+    this._ref = ref;
   };
 
   render() {
@@ -240,7 +237,7 @@ export default class FilterToken extends PureComponent<Props> {
         onMouseDown={this.onMouseDown}
         focused={this.props.focused}
         color={color}
-        innerRef={this.setRef}>
+        ref={this.setRef}>
         <Key type={this.props.filter.type} focused={this.props.focused}>
           {filter.key}
         </Key>
diff --git a/src/ui/components/searchable/Searchable.tsx b/src/ui/components/searchable/Searchable.tsx
index cd962a97f..318a94147 100644
--- a/src/ui/components/searchable/Searchable.tsx
+++ b/src/ui/components/searchable/Searchable.tsx
@@ -18,7 +18,7 @@ import Text from '../Text';
 import FlexBox from '../FlexBox';
 import Glyph from '../Glyph';
 import FilterToken from './FilterToken';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import debounce from 'lodash.debounce';
 import ToggleButton from '../ToggleSwitch';
 import React from 'react';
@@ -40,24 +40,26 @@ export const SearchBox = styled(FlexBox)({
 });
 SearchBox.displayName = 'Searchable:SearchBox';
 
-export const SearchInput = styled(Input)(
-  (props: {focus?: boolean; regex?: boolean; isValidInput?: boolean}) => ({
-    border: props.focus ? '1px solid black' : 0,
-    ...(props.regex ? {fontFamily: 'monospace'} : {}),
-    padding: 0,
-    fontSize: '1em',
-    flexGrow: 1,
-    height: 'auto',
-    lineHeight: '100%',
-    marginLeft: 2,
-    width: '100%',
-    color: props.regex && !props.isValidInput ? colors.red : colors.black,
-    '&::-webkit-input-placeholder': {
-      color: colors.placeholder,
-      fontWeight: 300,
-    },
-  }),
-);
+export const SearchInput = styled(Input)<{
+  focus?: boolean;
+  regex?: boolean;
+  isValidInput?: boolean;
+}>(props => ({
+  border: props.focus ? '1px solid black' : 0,
+  ...(props.regex ? {fontFamily: 'monospace'} : {}),
+  padding: 0,
+  fontSize: '1em',
+  flexGrow: 1,
+  height: 'auto',
+  lineHeight: '100%',
+  marginLeft: 2,
+  width: '100%',
+  color: props.regex && !props.isValidInput ? colors.red : colors.black,
+  '&::-webkit-input-placeholder': {
+    color: colors.placeholder,
+    fontWeight: 300,
+  },
+}));
 SearchInput.displayName = 'Searchable:SearchInput';
 
 const Clear = styled(Text)({
@@ -153,7 +155,7 @@ const Searchable = (
       compiledRegex: null,
     };
 
-    _inputRef: HTMLInputElement | undefined;
+    _inputRef: HTMLInputElement | undefined | null;
 
     componentDidMount() {
       window.document.addEventListener('keydown', this.onKeyDown);
@@ -348,7 +350,7 @@ const Searchable = (
       }
     }, 200);
 
-    setInputRef = (ref: HTMLInputElement | undefined) => {
+    setInputRef = (ref: HTMLInputElement | null) => {
       this._inputRef = ref;
     };
 
@@ -470,7 +472,7 @@ const Searchable = (
               placeholder={placeholder}
               onChange={this.onChangeSearchTerm}
               value={this.state.searchTerm}
-              innerRef={this.setInputRef}
+              ref={this.setInputRef}
               onFocus={this.onInputFocus}
               onBlur={this.onInputBlur}
               isValidInput={
diff --git a/src/ui/components/table/ManagedTable.tsx b/src/ui/components/table/ManagedTable.tsx
index 5814668c0..f8b56f781 100644
--- a/src/ui/components/table/ManagedTable.tsx
+++ b/src/ui/components/table/ManagedTable.tsx
@@ -19,7 +19,7 @@ import {
 } from './types';
 import {MenuTemplate} from '../ContextMenu';
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {VariableSizeList as List} from 'react-window';
 import {clipboard, MenuItemConstructorOptions} from 'electron';
@@ -144,7 +144,7 @@ type ManagedTableState = {
   shouldScrollToBottom: boolean;
 };
 
-const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
+const Container = styled(FlexColumn)<{canOverflow?: boolean}>(props => ({
   overflow: props.canOverflow ? 'scroll' : 'visible',
   flexGrow: 1,
 }));
diff --git a/src/ui/components/table/ManagedTable_immutable.tsx b/src/ui/components/table/ManagedTable_immutable.tsx
index cf591a7d7..0db858717 100644
--- a/src/ui/components/table/ManagedTable_immutable.tsx
+++ b/src/ui/components/table/ManagedTable_immutable.tsx
@@ -20,7 +20,7 @@ import {
 import {MenuTemplate} from '../ContextMenu';
 
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {VariableSizeList as List} from 'react-window';
 import {clipboard, MenuItemConstructorOptions} from 'electron';
@@ -141,7 +141,7 @@ type ManagedTableState = {
   shouldScrollToBottom: boolean;
 };
 
-const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
+const Container = styled(FlexColumn)<{canOverflow?: boolean}>(props => ({
   overflow: props.canOverflow ? 'scroll' : 'visible',
   flexGrow: 1,
 }));
diff --git a/src/ui/components/table/TableHead.tsx b/src/ui/components/table/TableHead.tsx
index 33aa3fd7d..c8b697fbd 100644
--- a/src/ui/components/table/TableHead.tsx
+++ b/src/ui/components/table/TableHead.tsx
@@ -19,14 +19,14 @@ import {normaliseColumnWidth, isPercentage} from './utils';
 import {PureComponent} from 'react';
 import ContextMenu from '../ContextMenu';
 import Interactive from '../Interactive';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import {colors} from '../colors';
 import FlexRow from '../FlexRow';
 import invariant from 'invariant';
 import {MenuItemConstructorOptions} from 'electron';
 import React from 'react';
 
-const TableHeaderArrow = styled('span')({
+const TableHeaderArrow = styled.span({
   float: 'right',
 });
 TableHeaderArrow.displayName = 'TableHead:TableHeaderArrow';
@@ -41,13 +41,13 @@ const TableHeaderColumnInteractive = styled(Interactive)({
 TableHeaderColumnInteractive.displayName =
   'TableHead:TableHeaderColumnInteractive';
 
-const TableHeaderColumnContainer = styled('div')({
+const TableHeaderColumnContainer = styled.div({
   padding: '0 8px',
 });
 TableHeaderColumnContainer.displayName = 'TableHead:TableHeaderColumnContainer';
 
-const TableHeadContainer = styled(FlexRow)(
-  (props: {horizontallyScrollable?: boolean}) => ({
+const TableHeadContainer = styled(FlexRow)<{horizontallyScrollable?: boolean}>(
+  props => ({
     borderBottom: `1px solid ${colors.sectionHeaderBorder}`,
     color: colors.light50,
     flexShrink: 0,
@@ -62,8 +62,8 @@ const TableHeadContainer = styled(FlexRow)(
 );
 TableHeadContainer.displayName = 'TableHead:TableHeadContainer';
 
-const TableHeadColumnContainer = styled('div')(
-  (props: {width: string | number}) => ({
+const TableHeadColumnContainer = styled.div<{width: string | number}>(
+  props => ({
     position: 'relative',
     backgroundColor: colors.white,
     flexShrink: props.width === 'flex' ? 1 : 0,
@@ -109,7 +109,7 @@ class TableHeadColumn extends PureComponent<{
   title?: string;
   horizontallyScrollable?: boolean;
 }> {
-  ref: HTMLElement | undefined;
+  ref: HTMLElement | undefined | null;
 
   componentDidMount() {
     if (this.props.horizontallyScrollable && this.ref) {
@@ -164,7 +164,7 @@ class TableHeadColumn extends PureComponent<{
     onColumnResize(id, normalizedWidth);
   };
 
-  setRef = (ref: HTMLElement) => {
+  setRef = (ref: HTMLElement | null) => {
     this.ref = ref;
   };
 
@@ -192,7 +192,7 @@ class TableHeadColumn extends PureComponent<{
         width={width}
         title={title}
         onClick={sortable === true ? this.onClick : undefined}
-        innerRef={this.setRef}>
+        ref={this.setRef}>
         {children}
       </TableHeadColumnContainer>
     );
diff --git a/src/ui/components/table/TableRow.tsx b/src/ui/components/table/TableRow.tsx
index 3863bc05c..9f5474cfa 100644
--- a/src/ui/components/table/TableRow.tsx
+++ b/src/ui/components/table/TableRow.tsx
@@ -15,7 +15,7 @@ import {
 } from './types';
 import React from 'react';
 import FilterRow from '../filter/FilterRow';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import FlexRow from '../FlexRow';
 import {colors} from '../colors';
 import {normaliseColumnWidth} from './utils';
@@ -58,8 +58,8 @@ const backgroundColor = (props: TableBodyRowContainerProps) => {
   }
 };
 
-const TableBodyRowContainer = styled(FlexRow)(
-  (props: TableBodyRowContainerProps) => ({
+const TableBodyRowContainer = styled(FlexRow)<TableBodyRowContainerProps>(
+  props => ({
     backgroundColor: backgroundColor(props),
     boxShadow: props.zebra ? 'none' : 'inset 0 -1px #E9EBEE',
     color: props.highlighted ? colors.white : props.color || undefined,
@@ -86,7 +86,11 @@ const TableBodyRowContainer = styled(FlexRow)(
 );
 TableBodyRowContainer.displayName = 'TableRow:TableBodyRowContainer';
 
-const TableBodyColumnContainer = styled('div')(
+const TableBodyColumnContainer = styled.div<{
+  width?: any;
+  multiline?: boolean;
+  justifyContent: JustifyContentProperty;
+}>(
   (props: {
     width?: any;
     multiline?: boolean;
diff --git a/src/ui/components/table/TypeBasedValueRenderer.tsx b/src/ui/components/table/TypeBasedValueRenderer.tsx
index 01abdb533..48a66b716 100644
--- a/src/ui/components/table/TypeBasedValueRenderer.tsx
+++ b/src/ui/components/table/TypeBasedValueRenderer.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-import {default as styled} from 'react-emotion';
+import {default as styled} from '@emotion/styled';
 import {colors} from '../colors';
 import {default as Text} from '../Text';
 import React from 'react';
@@ -37,7 +37,7 @@ const NonWrappingText = styled(Text)({
 });
 NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText';
 
-const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
+const BooleanValue = styled(NonWrappingText)<{active?: boolean}>(props => ({
   '&::before': {
     content: '""',
     display: 'inline-block',
diff --git a/src/ui/index.tsx b/src/ui/index.tsx
index 6848fd3bc..0d69de82f 100644
--- a/src/ui/index.tsx
+++ b/src/ui/index.tsx
@@ -7,7 +7,7 @@
  * @format
  */
 
-export {default as styled} from 'react-emotion';
+export {default as styled} from '@emotion/styled';
 export {default as Button} from './components/Button';
 export {default as ToggleButton} from './components/ToggleSwitch';
 export {default as ButtonNavigationGroup} from './components/ButtonNavigationGroup';
diff --git a/yarn.lock b/yarn.lock
index 07d9bb347..56aea0001 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -757,59 +757,107 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@emotion/babel-utils@^0.6.4":
-  version "0.6.10"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.10.tgz#83dbf3dfa933fae9fc566e54fbb45f14674c6ccc"
-  integrity sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==
+"@emotion/cache@^10.0.14", "@emotion/cache@^10.0.17":
+  version "10.0.19"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71"
+  integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==
   dependencies:
-    "@emotion/hash" "^0.6.6"
-    "@emotion/memoize" "^0.6.6"
-    "@emotion/serialize" "^0.9.1"
-    convert-source-map "^1.5.1"
-    find-root "^1.1.0"
-    source-map "^0.7.2"
+    "@emotion/sheet" "0.9.3"
+    "@emotion/stylis" "0.8.4"
+    "@emotion/utils" "0.11.2"
+    "@emotion/weak-memoize" "0.2.4"
 
-"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
-  integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
-
-"@emotion/is-prop-valid@^0.6.1":
-  version "0.6.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85"
-  integrity sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==
+"@emotion/core@^10.0.22":
+  version "10.0.22"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177"
+  integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==
   dependencies:
-    "@emotion/memoize" "^0.6.6"
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.17"
+    "@emotion/css" "^10.0.22"
+    "@emotion/serialize" "^0.11.12"
+    "@emotion/sheet" "0.9.3"
+    "@emotion/utils" "0.11.2"
 
-"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
-  version "0.6.6"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
-  integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
-
-"@emotion/serialize@^0.9.1":
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
-  integrity sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==
+"@emotion/css@^10.0.22":
+  version "10.0.22"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.22.tgz#37b1abb6826759fe8ac0af0ac0034d27de6d1793"
+  integrity sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==
   dependencies:
-    "@emotion/hash" "^0.6.6"
-    "@emotion/memoize" "^0.6.6"
-    "@emotion/unitless" "^0.6.7"
-    "@emotion/utils" "^0.8.2"
+    "@emotion/serialize" "^0.11.12"
+    "@emotion/utils" "0.11.2"
+    babel-plugin-emotion "^10.0.22"
 
-"@emotion/stylis@^0.7.0":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
-  integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
+"@emotion/hash@0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
+  integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
 
-"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
-  version "0.6.7"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
-  integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
+"@emotion/is-prop-valid@0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983"
+  integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==
+  dependencies:
+    "@emotion/memoize" "0.7.3"
 
-"@emotion/utils@^0.8.2":
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
-  integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
+"@emotion/memoize@0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
+  integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
+
+"@emotion/serialize@^0.11.12", "@emotion/serialize@^0.11.14", "@emotion/serialize@^0.11.8":
+  version "0.11.14"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488"
+  integrity sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==
+  dependencies:
+    "@emotion/hash" "0.7.3"
+    "@emotion/memoize" "0.7.3"
+    "@emotion/unitless" "0.7.4"
+    "@emotion/utils" "0.11.2"
+    csstype "^2.5.7"
+
+"@emotion/sheet@0.9.3":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
+  integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
+
+"@emotion/styled-base@^10.0.23":
+  version "10.0.24"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.24.tgz#9497efd8902dfeddee89d24b0eeb26b0665bfe8b"
+  integrity sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.5"
+    "@emotion/serialize" "^0.11.14"
+    "@emotion/utils" "0.11.2"
+
+"@emotion/styled@^10.0.23":
+  version "10.0.23"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.23.tgz#2f8279bd59b99d82deade76d1046249ddfab7c1b"
+  integrity sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==
+  dependencies:
+    "@emotion/styled-base" "^10.0.23"
+    babel-plugin-emotion "^10.0.23"
+
+"@emotion/stylis@0.8.4":
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
+  integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
+
+"@emotion/unitless@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
+  integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
+
+"@emotion/utils@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183"
+  integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==
+
+"@emotion/weak-memoize@0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
+  integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
 "@icons/material@^0.2.4":
   version "0.2.4"
@@ -2002,23 +2050,21 @@ babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^9.2.11:
-  version "9.2.11"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
-  integrity sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==
+babel-plugin-emotion@^10.0.22, babel-plugin-emotion@^10.0.23:
+  version "10.0.23"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b"
+  integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/babel-utils" "^0.6.4"
-    "@emotion/hash" "^0.6.2"
-    "@emotion/memoize" "^0.6.1"
-    "@emotion/stylis" "^0.7.0"
+    "@emotion/hash" "0.7.3"
+    "@emotion/memoize" "0.7.3"
+    "@emotion/serialize" "^0.11.14"
     babel-plugin-macros "^2.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
     convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
     find-root "^1.1.0"
-    mkdirp "^0.5.1"
     source-map "^0.5.7"
-    touch "^2.0.1"
 
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
@@ -2753,7 +2799,7 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
   integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
@@ -2808,25 +2854,15 @@ cosmiconfig@^5.2.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-create-emotion-styled@^9.2.8:
-  version "9.2.8"
-  resolved "https://registry.yarnpkg.com/create-emotion-styled/-/create-emotion-styled-9.2.8.tgz#c0050e768ba439609bec108600467adf2de67cc3"
-  integrity sha512-2LrNM5MREWzI5hZK+LyiBHglwE18WE3AEbBQgpHQ1+zmyLSm/dJsUZBeFAwuIMb+TjNZP0KsMZlV776ufOtFdg==
+create-emotion@^10.0.14:
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.14.tgz#4c140aaef6a9588ed47c926f9c4679e4719be43e"
+  integrity sha512-5G4naKMxokOur+94eDz7iPKBfwzy4wa/+0isnPhxXyosIQHBq7yvBy4jjdZw/nnRm7G3PM7P9Ug8mUmtoqcaHg==
   dependencies:
-    "@emotion/is-prop-valid" "^0.6.1"
-
-create-emotion@^9.2.12:
-  version "9.2.12"
-  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
-  integrity sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==
-  dependencies:
-    "@emotion/hash" "^0.6.2"
-    "@emotion/memoize" "^0.6.1"
-    "@emotion/stylis" "^0.7.0"
-    "@emotion/unitless" "^0.6.2"
-    csstype "^2.5.2"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
+    "@emotion/cache" "^10.0.14"
+    "@emotion/serialize" "^0.11.8"
+    "@emotion/sheet" "0.9.3"
+    "@emotion/utils" "0.11.2"
 
 create-error-class@^3.0.0:
   version "3.0.2"
@@ -2901,7 +2937,7 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
-csstype@^2.2.0, csstype@^2.5.2, csstype@^2.6.7:
+csstype@^2.2.0, csstype@^2.5.7, csstype@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
@@ -3335,13 +3371,13 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emotion@^9.2.6:
-  version "9.2.12"
-  resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
-  integrity sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==
+emotion@^10.0.23:
+  version "10.0.23"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.23.tgz#b1722ca65f4d9955f0917cfcb7635bc34b52805c"
+  integrity sha512-H/x+5rJUnSvI0rdYsAFyDfuQwE0poZgTMj5TQsKirLzyHVWqs6CiUponsdE86sisXw0vS60j91HAbidJJeDt1g==
   dependencies:
-    babel-plugin-emotion "^9.2.11"
-    create-emotion "^9.2.12"
+    babel-plugin-emotion "^10.0.23"
+    create-emotion "^10.0.14"
 
 encodeurl@~1.0.2:
   version "1.0.2"
@@ -6438,13 +6474,6 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
-nopt@~1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
-  integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
-  dependencies:
-    abbrev "1"
-
 normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -7388,14 +7417,6 @@ react-dom@^16.12.0:
     prop-types "^15.6.2"
     scheduler "^0.18.0"
 
-react-emotion@^9.2.6:
-  version "9.2.12"
-  resolved "https://registry.yarnpkg.com/react-emotion/-/react-emotion-9.2.12.tgz#74d1494f89e22d0b9442e92a33ca052461955c83"
-  integrity sha512-qt7XbxnEKX5sZ73rERJ92JMbEOoyOwG3BuCRFRkXrsJhEe+rFBRTljRw7yOLHZUCQC4GBObZhjXIduQ8S0ZpYw==
-  dependencies:
-    babel-plugin-emotion "^9.2.11"
-    create-emotion-styled "^9.2.8"
-
 react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
   version "16.10.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
@@ -8402,11 +8423,6 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.2:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
 spdx-correct@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
@@ -8660,16 +8676,6 @@ strip-json-comments@~2.0.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
 sumchecker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-2.0.2.tgz#0f42c10e5d05da5d42eea3e56c3399a37d6c5b3e"
@@ -8881,13 +8887,6 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-touch@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
-  integrity sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==
-  dependencies:
-    nopt "~1.0.10"
-
 tough-cookie@^2.3.3, tough-cookie@^2.3.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"