React Material-UI IconButton glow effect

1

Hi everyone,
I’m trying to add a glow effect to a material-ui IconButton. I’m controlling style priority with StylesProvider.

This is my component:

<StylesProvider injectFirst>
    <IconButton className="info-button"><InfoIcon /></IconButton>
</StylesProvider>

This is the style I’m applying:

.info-button:hover {
    box-shadow: 0 0px 10px var(--cfOrange);
}

However, as you can see in the image, I can’t get rid of this ring around the icon. Any ideas?
image

2

Isn’t it just a border?

It’s kind of hard to help without some live example.

3

I’m running the code in a React project. Any suggestions how I can make it more accessible so you can tweak around with it?
Edit 1:
Here’s a live version on codesandbox. And I don’t think it’s a border as I set all borders to none at some point while I was debugging this.