How to use the @uifabric/utilities.styled function in @uifabric/utilities

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";

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

// used for making the prop types of this component
import PropTypes from "prop-types";

import { getTheme } from "office-ui-fabric-react";
import { styled } from "@uifabric/utilities";

// Import the base component
import { LayoutBase } from "./Layout.base.jsx";

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

/**
* Layout component defines a UI layout that renders components.
*/
export const Layout = styled(
    LayoutBase,
    getStyles,
    undefined,
    {
        scope: "Layout"
    }
);

//Layout.propTypes = {
//    theme: PropTypes.array,

//};

// used for making the prop types of this component
import PropTypes from "prop-types";

import { TextField, DefaultButton, classNamesFunction } from "office-ui-fabric-react";
import { styled } from "@uifabric/utilities";

// Import sub-components

// Import the components styles
import { getStyles } from "./EdgeDevices.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 EdgeDevices = styled(
    EdgeDevicesBase,
    getStyles,
    undefined,
    {
        scope: "EdgeDevices"
    }
);

function EdgeDevicesBase(props) {
    const { className, styles, theme } = props;

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

    let endPointUrl = "";
    // Hooks

import { getTheme, classNamesFunction } from "office-ui-fabric-react";
import { styled } from "@uifabric/utilities";

import { apiUrl } from '../../app/App.settings.jsx';

// Import sub-components

// Import the components styles
import { getStyles } from "./Home.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 Home = styled(
    HomeBase,
    getStyles,
    undefined,
    {
        scope: "Home"
    }
);

function HomeBase(props) {
    const { className, styles, theme } = props;

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

    const hostUrl = apiUrl;

// used for making the prop types of this component
import PropTypes from "prop-types";

import { Icon, classNamesFunction } from "office-ui-fabric-react";
import { styled } from "@uifabric/utilities";

// Import sub-components

// Import the components styles
import { getStyles } from "./Header.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 Footer = styled(
    HeaderBase,
    getStyles,
    undefined,
    {
        scope: "Header"
    }
);

function HeaderBase(props) {
    const { title, className, styles, theme } = props;

    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();

// used for making the prop types of this component
import PropTypes from "prop-types";

import { getTheme, classNamesFunction } from "office-ui-fabric-react";
import { styled } from "@uifabric/utilities";

// Import sub-components

// Import the components styles
import { getStyles } from "./Footer.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 Footer = styled(
    FooterBase,
    getStyles,
    undefined,
    {
        scope: "Footer"
    }
);

function FooterBase(props) {
    const { className, styles, theme } = props;

    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();

import PropTypes from "prop-types";

import { Nav, CompoundButton, Icon, css, classNamesFunction } from "office-ui-fabric-react";
import { Link, NavLink, withRouter, history } from "react-router-dom";
import { styled } from "@uifabric/utilities";

// Import sub-components

// Import the components styles
import { getStyles } from "./Sidebar.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 Sidebar = styled(
    SidebarBase,
    getStyles,
    undefined,
    {
        scope: "Sidebar"
    }
);

function SidebarBase(props) {
    const { className, styles, theme, routes, onLinkClick } = props;

    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();

import { styled } from '@uifabric/utilities';
import { IDatePickerProps, IDatePickerStyleProps, IDatePickerStyles } from './DatePicker.types';
import { DatePickerBase } from './DatePicker.base';
import { styles } from './DatePicker.styles';

/**
 * DatePicker description
 */
export const DatePicker: React.FunctionComponent = styled(
  DatePickerBase,
  styles,
  undefined,
  {
    scope: 'DatePicker'
  }
);

);
}

export const App = styled(
    AppBase,
    getStyles,
    undefined,
    {
        scope: "App"
    }
);

export default App;

import { styled } from '@uifabric/utilities';
import { ICalendarProps, ICalendarStyleProps, ICalendarStyles } from './Calendar.types';
import { CalendarBase } from './Calendar.base';
import { styles } from './Calendar.styles';

/**
 * Calendar description
 */
export const Calendar: React.FunctionComponent = styled(
  CalendarBase,
  styles,
  undefined,
  {
    scope: 'Calendar'
  }
);