Change the exit button style on Fluent UI's Panel

Question

I'm using Panel from 'office-ui-fabric-react/lib/Panel' in React.

This Panel generates a little [x] button on the upper right hand corner. It is very hard to see, is there any way to change its default background color to red & modify its mouse hover value?

Marko Savic · Accepted Answer · 2020-10-24T22:01:15.123

You can easily change the button style through styles property of Panel Component:

styles={{
   closeButton: {
     backgroundColor: '#f00',
   },
}}

If you want to change the hover style of button, you have to use selectors property:

styles={{
   closeButton: {
     backgroundColor: '#f00',
     selectors: {
       ':hover': {
         backgroundColor: '#000'
       },
     },
   },
}}

Panel Component:

<Panel
  styles={{
    closeButton: {
      backgroundColor: '#f00',
      selectors: {
        ':hover': {
          backgroundColor: '#000'
        },
      },
    },
  }}
/>

Working Codepen example

Useful links:

Definition of Panel Component styles
And this one is the most important Component Styling

Change the exit button style on Fluent UI's Panel

1 Answers1