# All files / src/ThemeProvider ThemeProvider.tsx

100% Statements 12/12
100% Branches 4/4
100% Functions 2/2
100% Lines 12/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    3230x
    30x

    30x

    30x
    1827x
    1827x

    30x

    176x
    176x

    176x
    176x

    30x
     import * as React from 'react'
    import { JssProvider, ThemeProvider as BaseProvider } from '@fluent-ui/styles'
    import { Rule, StyleSheet, SheetsRegistry } from 'jss'
    import createTheme, { Theme } from '../styles/createTheme'

    interface ThemeProviderProps {
      theme: Theme
      registry?: SheetsRegistry
      children: React.ReactNode
    }

    const generateId = (rule: Rule, sheet?: StyleSheet<string>): string => {
      const prefix = sheet && sheet.options.classNamePrefix!.replace(/-/g, '')
      return prefix ? `F${prefix}-${rule.key}` : rule.key
    }

    const ThemeProvider: React.FC<ThemeProviderProps> = ({
      theme,
      registry,
      children,
      ...rest
    }: ThemeProviderProps): React.ReactElement => {
      const customTheme = createTheme(theme)
      return (
        <JssProvider generateId={generateId} registry={registry} {...rest}>
          <BaseProvider theme={customTheme}>{children}</BaseProvider>
        </JssProvider>
      )
    }

    export default ThemeProvider