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

Question

我目前正在尝试通过更改其形状、背景颜色和悬停颜色来重新设置 React 中的Fabric UI 按钮的样式。我设法更改了前两个，但我仍然无法访问悬停颜色，因为该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} />;