EmotionJS based UI Library

[Mosquid]

Hey,

I have a UI Library based on EmotionJS and a react project that uses it. Is there a way to ensure that the project's styles will always override the library ones? Currently, the style tags are placed seemingly randomly in the head section.
Is there a solution to this? Can I be solved with multiple EmotionCache instances?

Thank you

[Andarist]

Could you give an example of clashing rules?

[Mosquid]

Hey Andarist,

Thank you for a quick response.

I'm talking about a case like this one:

// UI Library Button.tsx

 <button
      css={{
        color: "red",
        "&:hover": { color: 'green' },
      }}
    >
      {children}
    </button>

// React Project

import Button from 'my-library/button'
....
 <Button
      css={{
        "&:hover": { color: 'purple' },
      }}
    >
      {children}
    </Button>

In my case, the style tag that contains the original "Button" styling is rendered down below in the head section thus taking over

[Mosquid]

@Andarist any advice on that? Please let me know if you would like me to provide more details.

[Andarist]

Ideally, I would like to see a full runnable repro case. If you are using the same version of Emotion in your library and in your React project then those styles should be merged together. To merge them appropriately should implement Button.tsx like this:

<button
  css={{
    color: "red",
    "&:hover": { color: 'green' },
  }}
+ {...props}
>
  {children}
</button>

This should allow Emotion to recognize the received className and, as a result, it should allow those styles to be merged into one rule.