OutlinedInput.js

// project imports
import getColors from 'utils/getColors';
import getShadow from 'utils/getShadow';

// ==============================|| OVERRIDES - INPUT BORDER & SHADOWS ||============================== //

function getColor({ variant, theme }) {
  const colors = getColors(theme, variant);
  const { light } = colors;

  const shadows = getShadow(theme, `${variant}`);

  return {
    '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: light },
    '&.Mui-focused': { boxShadow: shadows, '& .MuiOutlinedInput-notchedOutline': { border: '1px solid', borderColor: light } }
  };
}

// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //

export default function OutlinedInput(theme) {
  return {
    MuiOutlinedInput: {
      styleOverrides: {
        input: { padding: '10.5px 14px 10.5px 12px' },
        notchedOutline: { borderColor: theme.vars.palette.grey[300] },
        root: {
          ...getColor({ variant: 'primary', theme }),
          '&.Mui-error': { ...getColor({ variant: 'error', theme }) },
          '&.MuiInputBase-sizeSmall > .MuiInputBase-input': { padding: '7.5px 8px 7.5px 12px' },
          '&.MuiInputBase-multiline > .MuiInputBase-input': { padding: 0 },
          '&.MuiOutlinedInput-colorSecondary': { ...getColor({ variant: 'secondary', theme }) },
          '&.MuiOutlinedInput-colorError': { ...getColor({ variant: 'error', theme }) },
          '&.MuiOutlinedInput-colorWarning': { ...getColor({ variant: 'warning', theme }) },
          '&.MuiOutlinedInput-colorInfo': { ...getColor({ variant: 'info', theme }) },
          '&.MuiOutlinedInput-colorSuccess': { ...getColor({ variant: 'success', theme }) }
        }
      }
    }
  };
}