'How do I remove the component border shown onClick in react?

Whenever I click on any of the components I get a black border, although when I click away the border disappears. How do I prevent the web app from doing so? Below there is a picture of what I get in my app.

Also, this is a link to a sandbox where I have the same issue: https://codesandbox.io/s/es6-spread-operator-practice-drbyh?file=/src/components/App.jsx

enter image description here

cssreactjsreact-native


Solution 1:[1]

This is because the :focus pseudo-class is adding an outline into the button. You can change that behaviour by using css like this:

button:focus {
  outline: none;
}

Or by adding it as an inline style as well, even though I personally don't recommend it because having a lot of inline styles could cause to have a messy and hard to read HTML.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions