0

I'm rendering a CommandButton with only an icon inside a container with a dark background with gradient and I have set the background color of the button to be transparent. (Note that it is transparent because the container's background color has a gradient.)

The problem I have is that since the default focus outline for the button is black and it's not visible against the dark background. How can I change this so that the focus outline becomes the invert color of the primary color?

I can always attach a custom CSS to change the outline color, but I'm looking for the correct way supported by the Fluent UI framework. I noticed that the Button component puts a white background color when the primary=true prop is specified. So, there seems to be a way to change the outline color, but I could not really figure out how. I also looked into the source code, and it takes a theme object and generates a class name, but this still did not tell me the full story.

CookieEater
  • 2,237
  • 3
  • 29
  • 54
  • Take a look at this article from FabricUI Github https://github.com/microsoft/fluentui/wiki/Component-Styling I already answer on similar question but for DefaultButton. Approach is the same for CommandButton, but if u have a problem im ready to help. https://stackoverflow.com/questions/64283764/how-to-create-a-danger-button-in-fluentui-office-ui-fabric/64518363#64518363 – Marko Savic Oct 24 '20 at 22:36

1 Answers1

0

There are sometimes ::after selectors in play with FluentUI focus behavior. The "Chrome version >= 86" portion of this answer shows how to put Chrome in a state that will yet you inspect your components without losing focus in the page when you navigate in DevTools.

When I encounter focus styling that I want to change in Fluent, I can find out what's applying the styles I wish to alter using this method and then override them.

Stokesified
  • 121
  • 2
  • 5