fluent-ui - 如何在 Fluent UI 中更改 PrimaryButton 的悬停样式？

Question

我目前正在尝试重新设计 Fabric UI Button在 React 中通过改变它的形状、背景颜色和悬停颜色。我设法更改了前两个，但我仍然无法访问悬停颜色，因为 selectors属性似乎不起作用。
我的代码如下:

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;

我得到了一个自定义按钮，但悬停颜色仍然是默认的蓝色，而不是切换到红色。

Answer 1

您可以像这样悬停按钮时更改按钮的样式:

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

// ...

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