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.

CodingAnxiety · Accepted Answer · 2020-06-23T13:09:10.930

8

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

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

// ...

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

edited Jun 23 '20 at 13:09

answered Jun 23 '20 at 12:03

CodingAnxiety

206
2
13

Doesn't work. I get ' Object literal may only specify known properties, and ''&:hover'' does not exist in type 'IRawStyle | IStyleBaseArray' ' . – Maffe Jun 23 '20 at 12:10
@Maffe I misunderstood what you trying to do. I have changed my answer above. – CodingAnxiety Jun 23 '20 at 13:09
1

yup, that's what i was looking for. Thanks a lot! – Maffe Jun 23 '20 at 13:14

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

1 Answers1