React-select: Code example for CX and Custom Components documentation isn't functional

Created on 21 Jun 2020 · 5Comments · Source: JedWatson/react-select

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].

awaiting-author-response categordocumentation issuhas-pr issureviewed

Source

ebonow

Most helpful comment

@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.

Rall3n on 22 Jun 2020

🚀1 👍1

All 5 comments

The example was not updated to use emotion 10´s css prop. Because of that, the styles can not be applied.

Rall3n on 22 Jun 2020

👍1

Thank you. That makes sense. Could someone perhaps show me the provided example updated using Emotion 10? I was specifically looking at the ability to add classNames to a custom component which is a great use-case for those who want to leverage an existing UI framework like Atomic, Bootstrap, Tailwind, etc...

I tried to spend some time learning Emotion but got stuck wrestling with why the UI styling did not match what was being rendered.*

NOTE: *For anyone else trying to learn Emotion's UI styling library without their intentional aesthetic sabotage, you can apply the following style to their documentation page.
main { filter: none !important }

ebonow on 22 Jun 2020

@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>
  );
};