1

I'm currently developing a Microsoft WebPart. I'm using "yo @microsoft/sharepoint" to generate the project with React framework and I'd like to use the new "@fluentui/react-components" to design the WebPart.

But, when I deploy the application, the components appear without any style...

On App view

Extract from the code I use (.tsx file)

import { LargeTitle, Divider, Button } from '@fluentui/react-components';
import { DocumentRegular } from '@fluentui/react-icons'

<LargeTitle>Title:</LargeTitle>
<Button appearance="primary" icon={<DocumentRegular />}>
            Primary
</Button>
<Divider />

Expected Result : Expected Button

Any help is appreciated! Thank you

I have already tried: -to change browser -to clear the cache -to uninstall the package and then reinstall it -to install the package with npm install @fluentui/react-components or yarn add @fluentui/react-components.

Dams
  • 11
  • 4
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community May 04 '23 at 17:35
  • Could you please try with this- } content="Primary" iconPosition="before" primary /> – Sayali-MSFT May 05 '23 at 10:52
  • also refer the-https://fluentsite.z22.web.core.windows.net/0.63.1/components/button/definition?showCode=true&showRtl=false&showTransparent=false&showVariables=false#usage-content-and-icon – Sayali-MSFT May 05 '23 at 10:52
  • The SPFX build process externalises a bunch of imports. This means your dev copy will not be used. You can tweak this in the gulp file by extending the webpack config and removing the externals that you want to be internal. – Michael Coxon May 05 '23 at 11:14

1 Answers1

0

Finally, I've found a way to load my FluentUI's style on my WebPart. First, I have to include my components in a Fluent Provider and add a theme :

import {
  FluentProvider,
  teamsLightTheme,
  Button
} from '@fluentui/react-components';

...

    <FluentProvider theme={teamsLightTheme}>
       <Button appearance=primary>
          Button
       </Button>
    </FluentProvider>
Dams
  • 11
  • 4