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.

Clawson

Answer 1

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

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

// ...

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

Meddlesome

Doesn't work. I get ' Object literal may only specify known properties, and ''&:hover'' does not exist in type 'IRawStyle | IStyleBaseArray' ' . – Clawson

@Clawson I misunderstood what you trying to do. I have changed my answer above. – Meddlesome

yup, that's what i was looking for. Thanks a lot! – Clawson

Answer 2

const useStyles= makeStyles({
  button: { color: 'white' , backgroundColor: 'grey',':hover': {backgroundColor: 'red'}},
});

<Button appearance="primary" className={classes.button}>Get started</Button>

Febrile

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community? – Submissive

exactly what I was looking for, thank you! – Rottweiler