How to use the office-ui-fabric-react.classNamesFunction function in office-ui-fabric-react

// Sub-components
import Header from "../components/Header/Header.jsx";
import Sidebar from "../components/Sidebar/Sidebar.jsx";
import Footer from "../components/Footer/Footer.jsx";

// routes
import layoutRoutes from "../routes/layoutRoutes.jsx";

//import "react-perfect-scrollbar/dist/css/styles.css"; // TODO: Move into plugins in SASS or .style.jsx

// Import theme overrides
import themeData from "../variables/themeData.jsx";

// function to create classNames for each element with the need of a className
const getClassNames = classNamesFunction();

export const LayoutBase = (props) => {
    const { className, styles, theme } = props;

    //loadTheme(themeData); TODO: To customize OOB theme

    const classNames = getClassNames(styles, { theme, className }); // after className add any other props from IComponentStyleProps example disabled, etc
    const { subComponentStyles } = classNames;

    // Hooks
    //const [styles, setStyles] = useState();

    const getRoutes = routes => {
        return routes.map((prop, key) => {
            // Here we difine any props needed by the component that layout will render
            const dataScope = props.dataScope; //TODO: Get the datascope from the token

import * as React from 'react';
import { classNamesFunction, FocusZone, DefaultButton, Icon, TooltipHost } from 'office-ui-fabric-react';
import { IPlatformBarProps, IPlatformBarStyleProps, IPlatformBarStyles } from './PlatformBar.types';
import { IPlatform } from '../PlatformPicker/index';
import { INavPage } from '../Nav/index';

const getClassNames = classNamesFunction();

export class PlatformBarBase extends React.PureComponent> {
  private _classNames: { [key in keyof IPlatformBarStyles]: string };

  public render(): JSX.Element {
    const { styles, theme, platforms, innerWidth } = this.props;

    this._classNames = getClassNames(styles, {
      theme: theme!,
      innerWidth
    });

    return (
      <div>
        <div>
          {/* Override default role of "presentation" to prevent warning about li outside of ul */}</div></div>

interface IActivityItemExampleStyles {
  exampleRoot?: IStyle;
  nameText?: IStyle;
}

const exampleStyles: IActivityItemExampleStyles = {
  exampleRoot: {
    marginTop: '20px'
  },
  nameText: {
    fontWeight: 'bold'
  }
};

const getClassNames = classNamesFunction();
const classNames = getClassNames(exampleStyles, {});

export class ActivityItemPersonaExample extends React.Component, {}> {
  public render(): JSX.Element {
    // tslint:disable:jsx-no-lambda
    const activityItemExamples: (IActivityItemProps & { key: string | number })[] = [
      {
        key: 1,
        activityDescription: [
           {
              alert('A name was clicked.');
            }}
          >

import PropTypes from "prop-types";

import { Image, Stack, StackItem, PrimaryButton, Label, Coachmark, DirectionalHint, TeachingBubbleContent, MessageBar, MessageBarType, classNamesFunction } from "office-ui-fabric-react";
import { styled } from "@uifabric/utilities";

// Hooks components
import useInterval from "../../components/Hooks/useInterval.jsx";

// Import sub-components
import { imageEventsContainer } from '../../api/DataContainers/imageEventsContainer';

// Import the components styles
import { getStyles } from "./Monitoring.styles.jsx";

// function to create classNames for each element with the need of a className
const getClassNames = classNamesFunction();

// Process the styles to create the components classNmes
const Monitoring = styled(
    MonitoringBase,
    getStyles,
    undefined,
    {
        scope: "Monitoring"
    }
);



function MonitoringBase(props) {
    const { className, styles, theme } = props;
    const edgeDevice = "retail-onsite-dbe-edge";

'ms-BasicButtonsTwoUp',
    {
      display: 'flex',
      selectors: {
        '& > *': {
          flexGrow: 1
        },
        '.ms-Label': {
          marginBottom: '10px'
        }
      }
    }
  ]
};

const getClassNames = classNamesFunction();
const classNames = getClassNames(exampleStyles, {});

export class ButtonDefaultExample extends React.Component {
  public render(): JSX.Element {
    const { disabled, checked } = this.props;

    return (
      <div>
        <div>
          <label>Standard</label>
          </div></div>

import * as React from 'react';
import { classNamesFunction, styled } from 'office-ui-fabric-react';
import { IMarkdownTableProps, IMarkdownTableStyleProps, IMarkdownTableStyles } from './MarkdownTable.types';
import { getStyles } from './MarkdownTable.styles';

const getClassNames = classNamesFunction();

export class MarkdownTableBase extends React.PureComponent {
  public render(): JSX.Element {
    const { children, className, styles, theme } = this.props;

    const classNames = getClassNames(styles, {
      theme: theme!,
      className
    });

    return (
      <div>
        
          {children}
        <table></table>
      </div>

import * as React from 'react';
import { classNamesFunction, styled } from 'office-ui-fabric-react';
import { IMarkdownTableProps, IMarkdownTableStyleProps, IMarkdownTableStyles } from './MarkdownTable.types';
import { getStyles } from './MarkdownTable.styles';

const getClassNames = classNamesFunction();

export class MarkdownTrBase extends React.PureComponent {
  public render(): JSX.Element {
    const { children, styles, theme } = this.props;

    const classNames = getClassNames(styles, {
      theme: theme!
    });

    return (
      
        {children}
      
    );
  }
}

import * as React from 'react';
import { getIcon, IIconRecord, classNamesFunction, FocusZone, IProcessedStyleSet } from 'office-ui-fabric-react';
import { ISubwayNavNodeProps, SubwayNavNodeState, ISubwayNavNodeStyleProps, ISubwayNavNodeStyles } from './SubwayNode.types';
import { getIconMap } from './SubwayNode.styles';
import { SubwayNode } from './SubwayNode';

const getClassNames = classNamesFunction();

export class SubwayNodeBase extends React.PureComponent {
  public static defaultProps = {
    state: SubwayNavNodeState.Current,
    isSubStep: false,
    disabled: false
  };

  private _classNames: IProcessedStyleSet;

  public constructor(props: ISubwayNavNodeProps) {
    super(props);
    this._onClickStep = this._onClickStep.bind(this);
  }

  public render(): JSX.Element {

'ms-BasicButtonsTwoUp',
    {
      display: 'flex',
      selectors: {
        '& > *': {
          flexGrow: 1
        },
        '.ms-Label': {
          marginBottom: '10px'
        }
      }
    }
  ]
};

const getClassNames = classNamesFunction();
const classNames = getClassNames(exampleStyles, {});

export class ButtonCompoundExample extends React.Component {
  public render(): JSX.Element {
    const { disabled, checked } = this.props;

    return (
      <div>
        <div>
          <label>Standard</label>
          
            Create account
          
        </div>
        <div>
          <label>Primary</label></div></div>

import * as React from 'react';
import { classNamesFunction, styled } from 'office-ui-fabric-react';
import { IMarkdownTableProps, IMarkdownTableStyleProps, IMarkdownTableStyles } from './MarkdownTable.types';
import { getStyles } from './MarkdownTable.styles';

const getClassNames = classNamesFunction();

export class MarkdownTHeadBase extends React.PureComponent {
  public render(): JSX.Element {
    const { children, styles, theme } = this.props;

    const classNames = getClassNames(styles, {
      theme: theme!
    });

    return (
      
        {children}
      
    );
  }
}