use modularized fluent

[zerofront]

Environment Information

• Package version(s): Library: Fluent-ui-react
• Browser and OS versions: latest

Please provide a reproduction of the bug in a codepen:

I want to use modularized fluent-ui

import { Box, Provider, themes } from '@fluentui/react'

I only need Box Component, but there are many other components In theme Object
like AvatarStyles、DialogStyles tec

Actual behavior:

in fluent-ui source code

export const themes = { fontAwesome, teams, teamsDark, teamsHighContrast };

Expected behavior:

what can I do if I only need teams themes?
what can I do if I only need some Components?

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: High

Products/sites affected: Consumers should not be penalized for code they don't use (through bundle size, perf, etc).

[aneeshack4]

Hi @zerofront, there's documentation & example code on the Fluent site about the case when you want to import just a few components & use the teams theme - is this what you're looking for? https://fluentsite.z22.web.core.windows.net/theming-examples

[zerofront]

Hi @aneeshack4 , Thank you for your prompt reply

import React from 'react'
import { Button, Icon, Label, Provider, themes } from '@fluentui/react'

export default () => (
  <Provider theme={themes.teams}>
    <Button content="Button" />
    <Button icon="add" iconOnly primary />
    <Button icon="email" content="Send email" secondary />
    <Icon name="emoji" size="larger" />
    <Label content="Label with icon" icon="close" />
  </Provider>
)

For this example, I just want to import Button、icon、Label Component，but in theme object, therer are many style of other component which is unnecessary。

[layershifter]

@zerofront I opened #12224 to fix broken exports.

Future items:

• Fix Bundle size: theme import imports several components fluent-ui-react#2325 to do not reference components in styles, i.e. a theme will not require components
• Remove icons from themes RFC: remove icons from themes fluent-ui-react#2320 to allow import only needed icons

[xugao]

@layershifter - doing some housekeep here. do you think we need to leave this issue open or can be closed?

[layershifter]

@xugao I think that we can close this as a duplicate and keep #12953.

[jurokapsiar]

Duplicate of #12953