How to remove outline in focus in Joy UI?

Question

I'm having issues removing the outline from the Textarea component, but it does not work.
This is what it looks like:

I tried:

<Textarea className={style.textarea} 
sx={{outline:'none', border:'none',
'&:focus':{outline:'none', border:'none'}}}/>

// From CSS file
.textarea:focus {
  outline:none,
  border:none
}

Answer 1

You can override the CSS variables --Textarea-focusedHighlight in the sx prop:

<Textarea
  placeholder="Type in here…"
  defaultValue="Try to put text longer than 4 lines."
  minRows={2}
  maxRows={4}
  sx={{
    "--Textarea-focusedHighlight": "transparent"
  }}
/>

Or in a CSS file:

.MuiTextarea-root {
  --Textarea-focusedHighlight: transparent;
}

See: https://codesandbox.io/s/stoic-sunset-gyw4k2?file=/demo.tsx

I will add it to the docs.

Answer 2

I realized that, there is a "Joy-focused" class that is added to the className of the root div when it's textArea child is focused. Now the next thing of course is to be able to stop the "Joy-focused" class to be added to the root div. The class could have been added via an onFocus event on the child textArea. So i tried to override the focus event handler of the textArea joy component via its onFocus prop. It didn't prevent the "Joy-focused" class to be added to the root div of the textArea component anyway.

This is a capture of the component and its corresponding classnames when textArea is not given focus

This is a capture of the component and its corresponding classnames when textArea is given focus

You will notice the the presence of "Joy-focused" in the classname of the root div of the textArea joy component when it is given focus.