如何在 FluentUI 中自定义组件的 CSS 选择器

Question

我正在尝试自定义 FluentUI 组件悬停时的行为（在本例中为主按钮）。我如何在使用 Microsoft 的 React FluentUI 库时自定义 CSS 选择器。

我最初尝试过这个（现在不推荐使用这种方法，赞成将选择器添加为兄弟姐妹的方法）...

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

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

然后我尝试了这个：

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

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

这两种方法似乎都不起作用。我错过了什么吗？

Answer 1

使用新的 FluentUI，您可以根据按钮状态通过 specific props 修改样式：

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

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

Codepen working example.

在这个 link 上你有 IButtonStyles 界面。

如何在 FluentUI 中自定义组件的 CSS 选择器

How do customise a component's CSS selectors in FluentUI

reactjs

css-in-js

fluentui-react