chore: use emotion for styling (pt. 7) (#10431)

site/src/components/RichParameterInput/MultiTextField.tsx

@@ -1,7 +1,7 @@
+import { type Interpolation, type Theme } from "@emotion/react";
 import Chip from "@mui/material/Chip";
 import FormHelperText from "@mui/material/FormHelperText";
-import { makeStyles } from "@mui/styles";
-import { FC } from "react";
+import { type FC } from "react";
 
 export type MultiTextFieldProps = {
   label: string;
@@ -16,11 +16,9 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
   values,
   onChange,
 }) => {
-  const styles = useStyles();
-
   return (
     <div>
-      <label className={styles.root}>
+      <label css={styles.root}>
         {values.map((value, index) => (
           <Chip
             key={index}
@@ -34,7 +32,7 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
         <input
           id={id}
           aria-label={label}
-          className={styles.input}
+          css={styles.input}
           onKeyDown={(event) => {
             if (event.key === ",") {
               event.preventDefault();
@@ -71,8 +69,8 @@ export const MultiTextField: FC<MultiTextFieldProps> = ({
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  root: {
+const styles = {
+  root: (theme) => ({
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
     minHeight: theme.spacing(6), // Chip height + paddings
@@ -91,7 +89,7 @@ const useStyles = makeStyles((theme) => ({
       top: -1,
       left: -1,
     },
-  },
+  }),
 
   input: {
     flexGrow: 1,
@@ -104,4 +102,4 @@ const useStyles = makeStyles((theme) => ({
       outline: "none",
     },
   },
-}));
+} satisfies Record<string, Interpolation<Theme>>;