diff --git a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
index 7a4ee42f14..da3bbb1e46 100644
--- a/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
+++ b/plugins/airbrake/dev/components/ApiBar/ApiBar.tsx
@@ -14,12 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import {
-  createTheme,
-  makeStyles,
-  MuiThemeProvider,
-  TextField,
-} from '@material-ui/core';
+import { makeStyles, TextField } from '@material-ui/core';
 import { Context } from '../ContextProvider';
 
 const useStyles = makeStyles({
@@ -28,30 +23,12 @@ const useStyles = makeStyles({
     gap: '1em',
     flexWrap: 'wrap',
   },
-});
-
-const textFieldTheme = createTheme({
-  palette: {
-    type: 'dark',
-    primary: {
-      light: '#fff',
-      main: '#fff',
-      dark: '#fff',
-      contrastText: '#fff',
-    },
-    secondary: {
-      light: '#fff',
-      main: '#fff',
-      dark: '#fff',
-      contrastText: '#fff',
-    },
-    action: {
-      disabled: '#fff',
-    },
-    text: {
-      primary: '#fff',
-      secondary: '#fff',
-    },
+  label: {
+    color: '#fff !important',
+  },
+  outline: {
+    color: '#fff !important',
+    borderColor: '#fff !important',
   },
 });
 
@@ -62,16 +39,16 @@ export const ApiBar = () => {
     <Context.Consumer>
       {value => (
         <div className={classes.root}>
-          <MuiThemeProvider theme={textFieldTheme}>
-            <TextField
-              label="Project ID"
-              variant="outlined"
-              defaultValue={value.projectId}
-              onChange={e =>
-                value.setProjectId?.(parseInt(e.target.value, 10) || undefined)
-              }
-            />
-          </MuiThemeProvider>
+          <TextField
+            label="Project ID"
+            variant="outlined"
+            defaultValue={value.projectId}
+            InputLabelProps={{ classes: { root: classes.label } }}
+            InputProps={{ classes: { notchedOutline: classes.outline } }}
+            onChange={e =>
+              value.setProjectId?.(parseInt(e.target.value, 10) || undefined)
+            }
+          />
         </div>
       )}
     </Context.Consumer>