next.js-当我刷新流利UI的页面样式时

Question

我正在尝试学习 Fluent UI，但效果不佳。我搜索了文档，并编写了相同的代码，但我总是得到相同的结果。当我刷新页面时，样式消失，我看到一个丑陋的导航。我该如何解决这个问题？或者我哪里出错了？

import { Nav, INavLink, INavStyles, INavLinkGroup } from '@fluentui/react/lib/Nav';
import { initializeIcons } from '@fluentui/font-icons-mdl2';


const navStyles: Partial<INavStyles> = {
    root: {
        width: "250px",
        height: "100vh",
        boxSizing: 'border-box',
        border: '1px solid #eee',
        fontSize: 20,
        color: "white",
        backgroundColor: "green"
    },
};

const navLinkGroups: INavLinkGroup[] = [
    {
        links: [
            {
                name: 'Dashboard',
                url: '/',
                key: 'key3',
                
            },
            {
                name: 'Components',
                url: '/',
                key: 'key4',
                
            },
            {
                name: 'Pages',
                url: '/',
                key: 'key6',
                
            },
            {
                name: 'Tables',
                url: '/',
                key: 'key7',
                
            },
        ],
    },
];



const Admin: React.FC = () => {
    initializeIcons();

    return (
        <div>
            <Nav    
                ariaLabel="Nav basic example"
                styles={navStyles}
                groups={navLinkGroups}
                selectedKey="key3"
            />
        </div>
    )

}

export default Admin;