office-ui-fabric-reactfluentui-react

Change the exit button style on Fluent UI's Panel

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?

Solution

  • 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: