add disabled state (#63)

ocadotechnology · Oct 3, 2024 · 22d9555 · 22d9555
1 parent c30ec0a
commit 22d9555
Showing 1 changed file with 19 additions and 6 deletions.
diff --git a/src/theme/components/MuiTextField.ts b/src/theme/components/MuiTextField.ts
@@ -23,9 +23,22 @@ const MuiTextField: Components["MuiTextField"] = {
       width: "100%",
       backgroundColor: "transparent",
       [`& > .${inputBaseClasses.root}`]: {
-        border: "1px solid black !important",
-        borderRadius: "0px !important",
-        backgroundColor: "white !important",
+        ...(ownerState.disabled
+          ? {
+              border: "0px !important",
+              borderRadius: "0px !important",
+              // @ts-expect-error
+              backgroundColor: `${palette.info!.main} !important`,
+              [`.${inputBaseClasses.disabled}`]: {
+                color: `${typography.body1!.color} !important`,
+                "-webkit-text-fill-color": "unset",
+              },
+            }
+          : {
+              border: "1px solid black !important",
+              borderRadius: "0px !important",
+              backgroundColor: "white !important",
+            }),
       },
       [`& > .${inputBaseClasses.root}.${inputBaseClasses.error}`]: {
         // @ts-expect-error
@@ -35,13 +48,13 @@ const MuiTextField: Components["MuiTextField"] = {
         borderColor: "black !important",
       },
       [`.${svgIconClasses.root}`]: {
-        color: `${typography.body1?.color} !important`,
+        color: `${typography.body1!.color} !important`,
       },
       [`.${filledInputClasses.root}::after`]: {
-        borderColor: `${typography.body1?.color} !important`,
+        borderColor: `${typography.body1!.color} !important`,
       },
       [`.${formLabelClasses.root}`]: {
-        color: `${typography.body1?.color} !important`,
+        color: `${typography.body1!.color} !important`,
       },
       [`.${formHelperTextClasses.root}`]: {
         fontSize: "12px !important",