How can i change the hover style of a PrimaryButton in Fluent UI?

Question

I am currently trying to re-style a Fabric UI Button in React by changing its shape, background color and hovering color. I managed to change the first two, but i'm still having troubles in accessing the hover color, since the selectors property does not seem to work.

My code is the following:

import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';

interface MyPrimaryButtonProps {
  label?: string
}

const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {

  const styles: IButtonStyles = {
    root: [
      {
        fontSize: '16px',
        background: '#525CA3 ',
        border: '1px solid #525CA3',
        borderRadius: '20px',
        padding: '0px 30px',
        height: '40px',
        selectors: {                     //  <--- 
          ':hover': {                    //  <--- this part doesn't work.
            backgroundColor: 'red'       //  <---
          },
        }
      }
    ]
  };

  return (
    <div>
      <FluentPrimaryButton styles={styles} text={label} />
    </div>
  );
};

export default MyPrimaryButton;

I get a custom button, but still the hover color remains default blue, instead of switching to red.

Answer 1

You can change the styling of the button when hovered like this:

const btnStyles = {
  rootHovered: {
    backgroundColor: "red"
  }
};

// ...

<FluentPrimaryButton text = {label} styles = {btnStyles} />;