How to use the @patternfly/react-styles.StyleSheet.create function in @patternfly/react-styles

import { StyleSheet } from '@patternfly/react-styles';
import {
  global_spacer_xs as spacerXs,
  global_spacer_sm as spacerSm,
  global_spacer_xl as spacerXl,
  global_spacer_3xl as spacer3Xl,
  global_Color_dark_100 as itemColor,
  global_BackgroundColor_300 as bgColorHover,
  global_BackgroundColor_200 as bgColorHover2,
  global_FontSize_xs as fontSizeXs,
  global_BorderRadius_lg as borderRadiusLg
} from '@patternfly/react-tokens';

export default StyleSheet.create({
  navigationItem: {
    padding: `${spacerXs.var} ${spacerXs.var} ${spacerXs.var} ${spacerXl.var}`,
    display: 'block',
    color: itemColor.var,
    textDecoration: 'none',
    ':hover,:focus': {
      backgroundColor: bgColorHover.var,
      textDecoration: 'none'
    }
  },
  collapsedNavItem: {
    padding: `${spacerXs.var} 0`
  },
  secondaryList: {
    paddingBottom: spacerXs.var
  },

import { StyleSheet } from '@patternfly/react-styles';
import { global_spacer_md as spacerMd, global_FontSize_sm as fontSizeSm } from '@patternfly/react-tokens';

export default StyleSheet.create({
  title: {
    fontSize: fontSizeSm.var,
    padding: spacerMd.var
  }
});

import React from 'react';
import PropTypes from 'prop-types';
import { Form, TextInput } from '@patternfly/react-core';
import { Table, TableHeader, TableBody, sortable, SortByDirection } from '@patternfly/react-table';
import * as tokensModule from '@patternfly/react-tokens';
import { StyleSheet, css } from '@patternfly/react-styles';

const propTypes = {
  variables: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
};

const defaultProps = {
  variables: null
};

const styles = StyleSheet.create({
  color: {
    display: 'inline-block',
    height: 18,
    width: 18,
    border: `${tokensModule.global_BorderWidth_sm.var} solid ${tokensModule.global_BorderColor.var}`,
    marginRight: tokensModule.global_spacer_sm.var,
    verticalAlign: 'middle'
  },
  value: {
    verticalAlign: 'middle'
  },
  tokenCell: {
    whiteSpace: 'nowrap'
  },
  search: `
    &.pf-c-form {

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-page > *': {
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    },
    '& .pf-l-page__header > *': {
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-stack > .pf-l-stack__item': {
      minHeight: 35,
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    },
    '&': {
      height: 250
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { StyleSheet, css } from '@patternfly/react-styles';
import { global_BorderColor as borderColor, global_BorderWidth_md as borderWidth } from '@patternfly/react-tokens';

const styles = StyleSheet.create({
  demoLayout: {
    '& .pf-l-stack > .pf-l-stack__item': {
      minHeight: 35,
      borderWidth: borderWidth.var,
      borderStyle: 'dashed',
      borderColor: borderColor.var
    }
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { css, StyleSheet } from '@patternfly/react-styles';

const styles = StyleSheet.create({
  demoLayout: {
    '& > *': {
      '.chart-container': {
        height: '200px',
        width: '300px'
      },
      '.chart-margin': {
        marginBottom: '30px',
        marginLeft: '40px'
      },
      '.chart-overflow': {
        '& svg': {
          overflow: 'visible'
        }
      },
      '.chart-title': {

import React, { FunctionComponent } from 'react';
import { useAtlasmapUI } from './AtlasmapUIProvider';
import { TopologySideBar } from '@patternfly/react-topology';
import { css, StyleSheet } from '@patternfly/react-styles';

const styles = StyleSheet.create({
  sidebar: {
    height: '100%',
    overflow: 'hidden',
    '& > .pf-topology-side-bar__body': {
      height: '100%',
    },
  },
});

export const AtlasmapSidebar: FunctionComponent = () => {
  const {
    isEditingMapping,
    currentMapping,
    renderMappingDetails,
    closeMappingDetails,
  } = useAtlasmapUI();

import { css, StyleSheet } from '@patternfly/react-styles';

const styles = StyleSheet.create({
  demoLayout: {
    backgroundColor: '#fff'
  }
});

export default () => ({ className: css(styles.demoLayout) });

import { css, StyleSheet } from '@patternfly/react-styles';
import React, { FunctionComponent, ReactElement, useRef } from 'react';
import { useCanvasViewLayoutContext } from '../CanvasViewLayoutProvider';
import { useCanvasViewContext } from '../CanvasViewProvider';
import { FieldsBox } from './FieldsBox';

const styles = StyleSheet.create({
  content: {
    overflowY: 'auto',
    overflowX: 'visible',
    flex: '1',
    height: '100%',
  },
});

export interface IMappingProps {
  children: (props: { ref: HTMLElement | null }) => ReactElement;
}

export const Mapping: FunctionComponent = ({ children }) => {
  const { materializedMappings } = useCanvasViewContext();
  const { mappingWidth, boxHeight, initialMappingCoords } = useCanvasViewLayoutContext();
  const ref = useRef(null);