How to use @uifabric/styling - 10 common examples

width: 196,
        padding: 12,
        boxSizing: 'content-box',
        overflow: 'hidden'
      },
      className
    ],
    headerContainer: {
      display: 'flex'
    },
    currentItemButton: [
      getFocusStyle(theme, { inset: -1 }),
      {
        ...headerAnimationStyle,
        fontSize: FontSizes.medium,
        fontWeight: FontWeights.semibold,
        textAlign: 'left',
        backgroundColor: 'transparent',
        flexGrow: 1,
        padding: '0 4px 0 10px',
        border: 'none',
        overflow: 'visible' // explicitly specify for IE11
      },
      hasHeaderClickCallback && {
        selectors: {
          '&:hover, &:active': {
            cursor: !hasHeaderClickCallback ? 'default' : 'pointer',
            color: palette.neutralDark,
            outline: '1px solid transparent',
            backgroundColor: palette.neutralLight
          }
        }

margin: 0,
      padding: 0,
      borderRight: '1px solid',
      borderColor: palette.neutralLight,
      backgroundColor: palette.neutralLighterAlt,
      color: palette.neutralSecondary,
      boxSizing: 'border-box',
      width: 28,
      height: 28,
      fontWeight: FontWeights.regular,
      fontSize: FontSizes.small
    },
    dayOutsideBounds: disabledStyle,
    dayOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth && {
      color: palette.neutralSecondary,
      fontWeight: FontWeights.regular
    },
    dayButton: [
      getFocusStyle(theme, { inset: -2 }),
      {
        width: 24,
        height: 24,
        lineHeight: 24,
        fontSize: FontSizes.small,
        fontWeight: 'inherit',
        borderRadius: 2,
        border: 'none',
        padding: 0,
        color: 'inherit',
        backgroundColor: 'transparent',
        cursor: 'pointer',
        overflow: 'visible', // explicitly specify for IE11

return (
      <div>
        {/* summary */}
        
          {/* summary-row-1 */}
          <div>
            <div style="{{">
              <div style="{{">
                {jobInfo.name}
              </div>
              {jobInfo.frameworkName &amp;&amp; (
                <div>
                   (
                        </div></div></div></div>

const {modalTitle, monacoProps} = this.state;
    const {className, jobInfo, jobConfig, reloading, onStopJob, onReload} = this.props;

    return (
      <div>
        {/* summary */}
        
          {/* summary-row-1 */}
          <div>
            <div>
              <div style="{{minWidth:">
                <div style="{{">
                  {jobInfo.name}
                </div>
              </div>
              <div>
                <div>
                  
                </div>
                <div>
                  {printDateTime(DateTime.fromMillis(jobInfo.jobStatus.createdTime))}
                </div>
                <div>
                  </div></div></div></div></div>

padding: 0,
        margin: '0 12px 0 0',
        color: palette.neutralPrimary,
        backgroundColor: 'transparent',
        border: 'none',
        borderRadius: 2,
        overflow: 'visible', // explicitly specify for IE11
        selectors: {
          '&:nth-child(4n + 4)': {
            marginRight: 0
          },
          '&:nth-child(n + 9)': {
            marginBottom: 0
          },
          '& div': {
            fontWeight: FontWeights.regular
          },
          '&:hover': {
            color: palette.neutralDark,
            backgroundColor: palette.neutralLight,
            cursor: 'pointer',
            outline: '1px solid transparent'
          },
          '&:active': {
            backgroundColor: palette.themeLight
          }
        }
      }
    ],
    current: highlightCurrent
      ? {
          color: palette.white,

if (error) {
      setError(error);
      return;
    }
    setProcessing(true);
    onEditProfile({ email }).finally(() => setProcessing(false));
  });

  return (
    <div>
      {/* summary left */}
      <div>
        <div>
          <div style="{{">
            {userInfo.username}
          </div>
          <div>
            
              <div>{userInfo.admin ?  : }</div>
            
          </div>
        </div>
        <div></div></div></div>

/** Generates SASS files which list out theme slots and their defaults as SASS variables, used with the legacy version of loadTheme.
 */

const { getTheme } = require('@uifabric/styling');
const fs = require('fs');
const path = require('path');

const defaultTheme = getTheme(true);

const warningMessage =
  '/** THIS FILE IS AUTOGENERATED do not modify it manually. See generateDefaultThemeSassFiles.js. New slots should be added to the appropriate interfaces and defaults files. */';

// Font slots
const fonts = defaultTheme.fonts;
const lines = [warningMessage];
let fontSizeTokenName, fontWeightTokenName;
for (const fontName in fonts) {
  const font = fonts[fontName];
  for (const propName in font) {
    const titleCasePropName = propName.charAt(0).toUpperCase() + propName.slice(1);
    const slotName = fontName + titleCasePropName;
    const name = '$ms-font-' + slotName;
    lines.push(`${name}: "[theme:${slotName}, default: ${font[propName]}]";`);

public render(): JSX.Element {
    const theme: ITheme = getTheme();
    const styles: IFontPageRules = getStyles(theme);

    return (
      
        
        
            {
              Object.keys(theme.fonts)
                // tslint:disable:no-any
                .filter((fontName: string) => (theme.fonts as any)[fontName].fontSize !== undefined)
                .map((fontName: string) => (
                  <table>
          <tbody><tr>
                    <td>{ `${fontName}` }</td>
                    <td>{ `${(theme.fonts as any)[fontName].fontSize}` }</td>
                    <td></td></tr></tbody></table>

/>
              
                Refresh
              
            
          
          {/* summary-row-2 */}
          <div>
            <div>
              <div>Status</div>
              <div>
                
              </div>
            </div>
            <div>
              <div>Start Time</div>
              <div>
                {printDateTime(
                  DateTime.fromMillis(jobInfo.jobStatus.createdTime),
                )}
              </div>
            </div>
            <div>
              <div>User</div></div></div>

marginBottom: 16,
      selectors: {
        '&:nth-child(n + 3)': {
          marginBottom: 0
        }
      }
    },
    itemButton: [
      getFocusStyle(theme, { inset: -1 }),
      {
        width: 40,
        height: 40,
        minWidth: 40,
        minHeight: 40,
        lineHeight: 40,
        fontSize: FontSizes.small,
        padding: 0,
        margin: '0 12px 0 0',
        color: palette.neutralPrimary,
        backgroundColor: 'transparent',
        border: 'none',
        borderRadius: 2,
        overflow: 'visible', // explicitly specify for IE11
        selectors: {
          '&:nth-child(4n + 4)': {
            marginRight: 0
          },
          '&:nth-child(n + 9)': {
            marginBottom: 0
          },
          '& div': {
            fontWeight: FontWeights.regular