rez-table-listing-mui/src/listing/components/search/style.ts

A rez table listing component built on TanStack Table

import { Theme } from "@emotion/react";
import { SxProps } from "@mui/material";

export interface StyleProps {
  searchField: (showSearchInput: boolean) => SxProps<Theme>;
}

export const searchStyles: StyleProps = {
  searchField: (showSearchInput: boolean): SxProps<Theme> => ({
    width: showSearchInput ? "180px" : "40px",
    transition: "all 0.3s ease",
    opacity: showSearchInput ? 1 : 0.8,
    marginRight: "0.5rem",

    "& .MuiOutlinedInput-root": {
      paddingRight: "4px",
      height: "32px",
      borderRadius: "6px",
      backgroundColor: "#fff",
      border: showSearchInput ? "1px solid #ccc" : "none",
    },

    "& .MuiOutlinedInput-notchedOutline": {
      border: "none",
    },

    "&:hover .MuiOutlinedInput-notchedOutline": {
      border: "none",
    },

    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {},

    " & .css-4bojcr-MuiInputBase-root-MuiOutlinedInput-root ": {
      paddingLeft: "6px !important",
    },
    "& .css-1mnoz6i-MuiInputBase-root-MuiOutlinedInput-root": {
      paddingLeft: "6px !important",
    },
  }),
};