How do customise a component's CSS selectors in FluentUI

Question

I am trying to customise the behavior of an FluentUI component when it is hovered over (A Primary Button in this case). How do I customise CSS selectors when I am using Microsoft's React FluentUI library.

I tried this initially (This approach is deprecated now, in favor of the method where you add selectors as siblings)...

export const MyButton = (props: IButtonProps) => {
  const styles: IButtonStyles = {
    root: {
      backgroundColor: '#000000',
      selectors : {
      ':hover': {
        backgroundColor: '#0000ff'
      }
    }
    },
  }

  return (
    <PrimaryButton styles={styles} {...props} />
  );
}

Then I tried this:

export const MyButton = (props: IButtonProps) => {
  const styles: IButtonStyles = {
    root: {
      backgroundColor: '#000000',
        ':hover': {
          backgroundColor: '#0000ff'
        }
      },
    }

  return (
    <PrimaryButton styles={styles} {...props} />
  );
}

Both approaches do not seem to be working. Am I missing something?

score 1 · Accepted Answer · answered Aug 14 '21 at 08:18

With new FluentUI you can modify styles trough specific props based on button state:

export const MyButton = (props: IButtonProps) => {
  const styles: IButtonStyles = {
    root: {
      backgroundColor: '#000000',
    },
    rootHovered: {
      backgroundColor: '#0000ff',
    },
  }

  return (
    <PrimaryButton styles={styles} {...props} />
  );
}

Codepen working example.

On this link you have IButtonStyles interface.

How do customise a component's CSS selectors in FluentUI

1 Answers1