How to use react-with-styles - 10 common examples

} = this.props;
    const { dayPickerContainerStyles, isDayPickerFocused, showKeyboardShortcuts } = this.state;

    const onOutsideClick = (!withFullScreenPortal && withPortal) ? this.onOutsideClick : undefined;
    const closeIcon = customCloseIcon || ();

    const inputHeight = getInputHeight(reactDates, small);

    const withAnyPortal = withPortal || withFullScreenPortal;

    /* eslint-disable jsx-a11y/no-static-element-interactions */
    /* eslint-disable jsx-a11y/click-events-have-key-events */
    return (

showKeyboardShortcuts={showKeyboardShortcuts}
          onBlur={this.onDayPickerBlur}
          phrases={phrases}
          dayAriaLabelFormat={dayAriaLabelFormat}
          isRTL={isRTL}
          firstDayOfWeek={firstDayOfWeek}
          weekDayFormat={weekDayFormat}
          verticalHeight={verticalHeight}
          transitionDuration={transitionDuration}
          disabled={disabled}
          horizontalMonthPadding={horizontalMonthPadding}
        />

        {withFullScreenPortal && (
          <button aria-label="{phrases.closeDatePicker}" type="button">
            {closeIcon}
          </button>
        )}
      
    );
    /* eslint-enable jsx-a11y/no-static-element-interactions */
    /* eslint-enable jsx-a11y/click-events-have-key-events */
  }

);

    const closeIcon = customCloseIcon || (
      
    );

    const inputHeight = getInputHeight(reactDates, small);

    const withAnyPortal = withPortal || withFullScreenPortal;

    /* eslint-disable jsx-a11y/no-static-element-interactions */
    /* eslint-disable jsx-a11y/click-events-have-key-events */
    return (

function KeyboardShortcutRow({
  unicode,
  label,
  action,
  block,
  styles,
}) {
  return (
    <li>
      <div>
        <span action="" aria-label="{`${label},`}" role="img">
          {unicode}</span></div></li>

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { StyleSheetTestUtils } from 'aphrodite';

import DefaultTheme from '../../src/theme/DefaultTheme';

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from '../../src/themes/DefaultTheme';

const { WITH_DOM } = process.env;

const MockInterface = {
  create: () => ({}),
  resolve: () => ({}),
  flush: () => {},
};

const stylesInterface = WITH_DOM ? AphroditeInterface : MockInterface;

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(stylesInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => new Promise((resolve) => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
  return process.nextTick(resolve);
}));

import { StyleSheetTestUtils } from 'aphrodite';
import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import AphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from '../../src/themes/DefaultTheme';

const { WITH_DOM } = process.env;

const MockInterface = {
  create: () => ({}),
  resolve: () => ({}),
  flush: () => {},
};

const stylesInterface = WITH_DOM ? AphroditeInterface : MockInterface;

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(stylesInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => new Promise((resolve) => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
  return process.nextTick(resolve);
}));

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import { StyleSheetTestUtils } from 'aphrodite';

import DefaultTheme from '../../src/theme/DefaultTheme';

ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

beforeEach(() => {
  StyleSheetTestUtils.suppressStyleInjection();
});

afterEach(() => {
  StyleSheetTestUtils.clearBufferAndResumeStyleInjection();
});

type="button"
          aria-label={toggleButtonText}
          onClick={this.onShowKeyboardShortcutsButtonClick}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault();
            } else if (e.key === 'Space') {
              this.onShowKeyboardShortcutsButtonClick(e);
            }
          }}
          onMouseUp={(e) => {
            e.currentTarget.blur();
          }}
        >
          <span>
            ?
          </span>
        

        {showKeyboardShortcutsPanel &amp;&amp;

const inputEl = Input && (
      <input>
    );

    return (
      <div>
        {enableOutsideClick &amp;&amp; (
          
            {inputEl}
            {this.maybeRenderDayPickerWithPortal()}
          
        )}
        {!enableOutsideClick &amp;&amp; inputEl}
        {!enableOutsideClick &amp;&amp; this.maybeRenderDayPickerWithPortal()}
      </div>
    );
  }
}