Code example for CX and Custom Components documentation isn't functional

The example provided in the documentation for how to use the CX function with Custom Components (here) does not appear to be working properly both on the site and on the sandbox.

CodeSandbox claims that there is a missing reference to Emotion, but even after adding it, the custom component is still missing all styling.

Investigating further, it appears that the option DOM class attribute is rendering as the string value of [object Object].

[Rall3n]

@ebonow Following should be all the changes needed to make the example work again:

/** @jsx jsx */
// import React from 'react';
import { jsx } from '@emotion/core';

/* ... */

  return (
    <div
      ref={innerRef}
      css={getStyles('option', props)}
      className={cx(
        {
          option: true,
          'option--is-disabled': isDisabled,
          'option--is-focused': isFocused,
          'option--is-selected': isSelected,
        },
        className
      )}
      {...innerProps}
    >
      {children}
    </div>
  );
};

The jsx import from @emotion/core replaces the React import that is needed on every React file. This also includes the functionality of the css prop. The comment on the top tells the compiler to use jsx instead of React.

[bladey]

Thanks for working this out @Rall3n and @ebonow, I’ve created a PR with the necessary changes.

Could you please have a look at PR https://github.com/JedWatson/react-select/pull/4112 and give me the go ahead to release it.

Thank you!