Styling OutlinedInput on focus material ui v5

Question

I'm dealing with the 5th version of material ui trying to style an OutlinedInput with different methods, but i'm still not able to do what i want. To make it short i want to apply two different styles on focus and no-focus by using css rules, what i succeed to do is the following :

 <OutlinedInput
                id="input-with-icon-adornment"
                endAdornment={
                  <InputAdornment position="end">
                    <SearchIcon />
                  </InputAdornment>
                }
                fullWidth
                notched
                sx={{
                  "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                    borderColor: "black !important",
                    borderWidth: "2px !important",
                  },
                  
                }}
              /> 

but the problem with that solution is that it's applying it for all states (focused or not) What's the best way to do it?

Answer 1

You can add the styles like below.

<OutlinedInput
        id="input-with-icon-adornment"
        endAdornment={
          <InputAdornment position="end">
            <SearchIcon />
          </InputAdornment>
        }
        fullWidth
        notched
        sx={{
          "&.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
            borderColor: "green"
          },
          "&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "red"
          },                    
          "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "purple"
          },
        }}
      />

Here is working example in a codesandbox