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

Question

是否有任何关于如何将样式自定义应用于新按钮的文档？使用 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>
)

Answer 1

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

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