[Fluentui v9] boxShadow cannot override the style by [data-fui-focus-visible] for button

[flora8984461]

I want to use my own focus style to meet our design requirement. The button component has boxShadow applied when with [data -fui-focus-visible]. Adding boxShadow to makeStyles without id won't work, I have to indicate the id for the button to override the boxShadow. As the screenshot shows:

// not working:

// working after I use id:

class with attribute name seem to have a higher priority.

And the codesandbox link is here:
https://codesandbox.io/s/elastic-thunder-t63vyj?file=/example.tsx

Is this a known issue and reported by anyone? 🤔 And any thoughts on that to improve it?

Thank you for sharing any inputs. 😊

[layershifter]

FYI Here is how you can override it, #27943 (comment)