How to style new @fluentui/react-button [v8 beta]?

Question

Is there any documentation on how to apply style customisations to the new Button? The styling using the IButtonStyles interface is broken on the new button, as per code below.

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>
)

score 0 · Accepted Answer · answered Jan 20 '21 at 15:24

Have looked into the file where the new react-button is defined, seems to need a ButtonTokens. Guessing this is along with the wider Fluent UI trend of moving to style tokens.

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

How to style new @fluentui/react-button [v8 beta]?

1 Answers1