Using the property css breaks the default styling of some components

[julian-schneider]

Describe the bug
Passing something to the css property of some EUI elements causes them to forget about their default styles.
Example of an affected element: EuiSelect
Example of an unaffected element: EuiComboBox

This has started happening since we've updated our elastic UI version from 88 to 97. We're passing our css via @emotion/react string styles.

Impact and severity
Not critical, since we can instead use the className property and apply our styles to that class, which works out fine.

Environment and versions

• EUI version: 97.3.1
• React version: 17.0.2
• Browser: tested in Firefox and Chromium
• Operating System: Ubuntu 22.04

To Reproduce
Steps to reproduce the behavior:

1. import EuiSelect from @elastic/eui, and css from @emotion/react
2. create a Select and pass any emotion css to it
3. The Select renders with broken styles

(See this in 1st codesandbox below)

Expected behavior
I would expect that an EuiSelect that receives no css, and an EuiSelect that receives `` as css, both produce the same result.

Minimum reproducible sandbox
I've modified two codesandboxes from the docs to compare the behavior with two elements:
EuiSelect (broken): https://codesandbox.io/p/sandbox/euiselect-css-breaks-gp29rr?workspaceId=ws_CcMXSXXzzkQdRbauLwMYDt
EuiComboBox (healthy): https://codesandbox.io/p/sandbox/sleepy-ellis-fqj9k2?workspaceId=ws_CcMXSXXzzkQdRbauLwMYDt
In both examples the passed css is empty. The bug also occurs if something simple is passed, e.g. width:200px

Screenshots

Top Select: css property is unused.
Bottom Select: css property is given ``.

[mgadewoll]

Hei @julian-schneider The issue is likely due to a missing setup to support the css prop in your application, e.g. using the Babel preset as mentioned in the Emotion docs here.

When using the JSX pragma as quick check in your codesandbox it starts working as expected:

// demo.js
/** @jsxImportSource @emotion/react */

[julian-schneider]

Thanks for the quick reply @mgadewoll ! I did get the codesandbox to work with your suggestion, and I will be able to test this in our code base tomorrow, then I'll check back in.

[julian-schneider]

The suggestion is working well in our environment, consider this resolved and thanks again for the feedback!