Override TextField Material 5.0

Question

I've moved to MUI 5.0 and I'm having some issues with the migration. One problem is that I can no longer change the TextField globally and locally, if it is focused (e.g borderColor: 'blue',). The Textfield component is a bit more complicated and consists of multiple input Components.

It would be nice if somebody could help me with both cases

p.s thats the documentation https://mui.com/api/outlined-input/

globally

 export const TextField = {
      MuiOutlinedInput: {
        styleOverrides: {
          root: {
            borderRadius: '1.5rem',
          },
          notchedOutline: {
            borderColor: 'transparent',
 '&.Mui-focused > fieldset': {
              borderColor: 'blue',
            },
          },
    
          input: {
            color: palette.text.primary,
          },
        },
      },

 }

local (in the component itself not globally)

     const styles = {
        MuiOutlinedInput: {
          root: {
            borderRadius: '1.5rem',
          
          },
          notchedOutline: {
            borderColor: 'transparent',
  '&.Mui-focused > fieldset': {
              borderColor: 'blue',
            },
          },
    
          input: {
            color: palette.text.primary,
          },
        },
      }
    
     <TextField sx={styles} />