Search code examples
cssreactjsmaterial-uiwebkit

Remove blue box when clicked?

I am using Material UI and have never seen this behavior before. It it happening on many of my buttons and would like to change this and just use the ripple effect. I am not sure what is causing this behavior. This blue box stays there until I click away. I would like to not see it at all , thanks!!

Update: This style is being added during :focus but it is not adding an Mui class.

Before:

After

<IconButton>
    <ChevronRightIcon />
</IconButton>
Solution

  • That's called an outline. You can remove it by setting the corresponding css property to none as such:

    button:focus {
  outline: none;
}