[Emotion] Export component styles

[p-young]

It would be nice to have access to the css styles used in the components so that if we want to use some other component, we can apply the styles.

The example I have is using react-textarea-autosize and wanting to style it like elastic ui.

I've been using an older version of elastic ui and still including the .css files, and can use the css classnames to get the same styling.

However, now that everything has migrated to emotion, I'm not sure there is a consistent way to do that.

Exporting the styles of each component from the elastic ui package would allow re-using the styles and be useful even just for any custom component that may need to be created.

Example to export from the package:

https://github.com/elastic/eui/blob/v98.0.0/packages/eui/src/components/form/text_area/text_area.styles.ts

Thanks

[weronikaolejniczak]

Because we generate ESM output and flag sideEffects in the package.json, we should be fine exporting additional things like styles from the component. We can do it at least for your use cases first. Could you share which styles you might need in particular so we can plan accordingly?

[p-young]

Because we generate ESM output and flag sideEffects in the package.json, we should be fine exporting additional things like styles from the component. We can do it at least for your use cases first. Could you share which styles you might need in particular so we can plan accordingly?

That would be awesome.

I think this is the only one for my use case, I was previously using a few of the others (form rows, buttons, icons) but I have moved off of them now though providing those might be nice in the future.

Exporting the textarea styles in the next release would be super helpful!

Let me know if you need more info from me, thanks.

[weronikaolejniczak]

@p-young Thanks for raising this! After internal discussions, we believe that for your current use case, the best approach might be to copy-paste the relevant source styles or use the form-specific EUI tokens directly.

If you find that any components don’t fully meet your needs, we encourage you to create feature requests for those specific cases. Our primary goal is to ensure correct semantics, consistent styling, and accessibility across all components, and to provide a robust library that minimizes the need to create custom components or override styles.

We understand that transitioning from CSS to Emotion can feel like a significant shift and may not fit every use case perfectly. However, this is the approach we’ve committed to for maintainability and consistency, and we don’t plan to change it in the near future.

Thanks for your understanding, and please feel free to reach out if you have further questions or requests!

[p-young]

I was wondering if you had better ideas on how best to work around it (can't copy the emotion styles without copying all of the source code to build it), could possibly copy the styles from old .css files but that's not ideal either because they might change, and I don't think they exist for the new borealis theme?