MUI customize

Author: RafaelGB

src/components/reducers/GlobalFilter.tsx

@@ -1,13 +1,20 @@
 import React from "react";
 import "regenerator-runtime/runtime";
 import { GlobalFilterProps } from "cdm/MenuBarModel";
+import {
+  Search,
+  SearchIconWrapper,
+} from "components/styles/NavBarSearchStyles";
+import SearchIcon from "@mui/icons-material/Search";
+import { styled } from "@mui/material/styles";
+import InputBase from "@mui/material/InputBase";
 
 // A debounced input react component
 function DebouncedInput({
   value: initialValue,
   onChange,
   debounce = 500,
-  ...props
+  placeholder,
 }: {
   value: string | number;
   onChange: (value: string | number) => void;
@@ -28,10 +35,10 @@ function DebouncedInput({
   }, [value]);
 
   return (
-    <input
-      {...props}
+    <InputBase
       value={value}
       onChange={(e) => setValue(e.target.value)}
+      placeholder={placeholder}
     />
   );
 }
@@ -43,18 +50,31 @@ function DebouncedInput({
  * @returns
  */
 export default function GlobalFilter(globalFilterProps: GlobalFilterProps) {
-  // TODO add typing to props
   const { hits, globalFilter, setGlobalFilter } = globalFilterProps;
-  const [value, setValue] = React.useState(globalFilter);
 
+  const CustomDebouncedInput = styled(DebouncedInput)(({ theme }) => ({
+    color: "inherit",
+    "& .MuiInputBase-input": {
+      padding: theme.spacing(1, 1, 1, 0),
+      // vertical padding + font size from searchIcon
+      paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+      transition: theme.transitions.create("width"),
+      width: "100%",
+      [theme.breakpoints.up("md")]: {
+        width: "20ch",
+      },
+    },
+  }));
   return (
-    <span>
-      <DebouncedInput
+    <Search>
+      <SearchIconWrapper>
+        <SearchIcon />
+      </SearchIconWrapper>
+      <CustomDebouncedInput
         value={globalFilter ?? ""}
         onChange={(value) => setGlobalFilter(String(value))}
-        className="p-2 font-lg shadow border border-block"
         placeholder={`Search... (${hits})`}
       />
-    </span>
+    </Search>
   );
 }

src/components/styles/NavBarSearchStyles.ts

@@ -0,0 +1,28 @@
+import InputBase from "@mui/material/InputBase";
+import { alpha, styled } from "@mui/material/styles";
+
+export const Search = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: alpha(theme.palette.common.white, 0.15),
+    '&:hover': {
+        backgroundColor: alpha(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+        marginLeft: theme.spacing(3),
+        width: 'auto',
+    },
+}));
+
+export const SearchIconWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));