如何设计新的@fluentui/react-button [v8 beta]？

问题描述

是否有任何关于如何将样式自定义应用到新按钮的文档？根据下面的代码，使用 IButtonStyles 接口的样式在新按钮上被破坏了。

import { PrimaryButton } from '@fluentui/react';
import { Button as FluentButton } from '@fluentui/react-button';

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

return (
    <div>
         <PrimaryButton styles={btnStyles}/>
         <FluentButton styles={btnStyles}/>
    </div>
)

解决方法

查看了定义新反应按钮的文件，似乎需要一个 ButtonTokens。猜测这是随着更广泛的 Fluent UI 趋势转向样式标记。

const btnStyle : ButtonTokens = { borderColor: 'red' }
return (
   <FluentButton tokens={btnStyle} />
)