rez-table-listing-mui
Version:
A rez table listing component built on TanStack Table
41 lines (33 loc) • 1.12 kB
text/typescript
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",
},
}),
};