How can we pass the functions inside of single sx properties , say ( color, zIndex, backgroundColor)-CodePudding

I am making a single search component for all the different places into my application. And to each component I am passing a prop named search : string to check for the truthfulness of that particular component, so as to specify styles for the same. I know I could use classNames instead of sx prop, but if I pass the sx prop which contain where every single property received the function , which in turn behaves accordingly to the type of which component is active for that moment. ( or way could say , which component has active), this is because my search bar for homepage has different styling then the search bar for items page.

Here's is my code

import { SearchSharp } from "@mui/icons-material";
import { alpha, FormControl, IconButton, InputAdornment, InputBase, makeStyles, styled, SxProps, TextField, Theme, useTheme } from "@mui/material";
import { Fragment } from "react";
import { useThemeContext } from "../../css/ThemeSettings";
import { useAppDispatch, useAppSelector } from "../../Redux/reduxStore";
import { setSearchTerm } from "./jobSlice";

interface Props {
  search? : string;
}

export default function SearchAll ( props : Props ) {
// using redux
const { searchTerm } = useAppSelector ( state => state.jobs);
const dispatch = useAppDispatch();
// using theme
const { darkMode } = useThemeContext();

// background color // this is my function to trigger different backgroundColor based on which component is active...
const setBackgroundColor = () => {
  switch ( props.search ) {
    case 'home' : return darkMode ? 'rgba(0, 0, 0, 0.54)' : 'rgba(238, 240, 243, 1)';
    case 'items' : return 'rgba( 255, 255, 255, 1 )';
  }};

// similar to the above, i want to make other functions that I could pass into color, // width, position property etc.

// making and using styles
const searchStyles = {
  position : 'relative',
  borderRadius : 20,
  color : 'text.secondary',
  width :  props.search === 'home' ? '500px' : '100%',
  backgroundColor : setBackgroundColor(),
  "& .MuiOutlinedInput-root": {
    "& > fieldset": { border : "none" } },
  '&:hover': {
    backgroundColor : props.search === 'items' ? 'none'
                    : darkMode ? 'rgba(0, 0, 0, 0.54)' : 'rgba(238, 240, 243, 1)',
  },
};


  return (
        <Fragment>
                <TextField
                 variant = {'outlined'}
                 size = {'small'}
                 sx = {searchStyles} // i am getting an error here
                
                 placeholder = {"Search…"}
                 fullWidth = { props.search === 'items' ? true : false }
                 autoFocus = { true } />
        </Fragment>
    )
}

below is the error which I am getting when hovering on 'sx' keyword, as it is the thing which is throwing the error ...

The system prop that allows defining system overrides as well as additional CSS styles.

Type '{ position: string; borderRadius: number; color: string; width: string; backgroundColor: string | undefined; "& .MuiOutlinedInput-root": { "& > fieldset": { border: string; }; }; '&:hover': { backgroundColor: string; }; }' is not assignable to type 'SxProps<Theme> | undefined'.
  Type '{ position: string; borderRadius: number; color: string; width: string; backgroundColor: string | undefined; "& .MuiOutlinedInput-root": { "& > fieldset": { border: string; }; }; '&:hover': { backgroundColor: string; }; }' is not assignable to type 'CSSSelectorObjectOrCssVariables<Theme>'.
    Property 'backgroundColor' is incompatible with index signature.
      Type 'string | undefined' is not assignable to type 'SystemStyleObject<Theme> | CssVariableType | ((theme: Theme) => string | number | SystemStyleObject<Theme>)'.
        Type 'undefined' is not assignable to type 'SystemStyleObject<Theme> | CssVariableType | ((theme: Theme) => string | number |

Is there any way, we could use to pass functions ( which in turn return string) to these individual sx props? or is there any another way to achieve this?

CodePudding user response：

your setBackgroundColor you use for setting backgroundColor in your searchStyles not compatible with the property backgroundColor (Property 'backgroundColor' is incompatible with index signature.) as is could possible return undefined while backgroundColor requires a "SystemStyleObject | CssVariableType | ((theme: Theme) => string | number | SystemStyleObject)" and does not accept undefined as a valid type

You should be able to fix this by adding a default case to your setBackGroundColor method

const setBackgroundColor = () => {
  switch ( props.search ) {
    case 'home': return darkMode ? 'rgba(0, 0, 0, 0.54)' : 'rgba(238, 240, 243, 1)';
    case 'items': return 'rgba( 255, 255, 255, 1 )';
    default: return 'none'
  }};