Custom StyleSheet

https://github.com/emotion-js/emotion/blob/ce9873faabef8baf4eeebf8fab0d7b1a46ff74c7/packages/react/src/global.js#L94

Hi! I found emotion in creating a new Sheet based on the old sheet. Is it possible to get rid of this behavior, or use the same constructor as the cache.sheet has?

I’m handling a very special environment and I must implement my own StyleSheet class to insert rules. It’s be like this:

    const emotionCache = createEmotionCache({ key: keyA })
    const styleSheet = new MySpecialStyleSheet(keyA, shadow)
    emotionCache.sheet = styleSheet

It works well besides the global styles. Global styles using the emotion’s original implementation therefore I cannot control the insertRule behavior.

If I can provide my own StyleSheet implementation, or at least emotion can write this to use my StyleSheet:

let sheet = new cache.sheet.constructor({
    ...
})

it will be great! thanks!

[Andarist]

Would you be open to preparing a PR for the cache.sheet.constructor change?

[Andarist]

Hi there,

nice to see you here - thank you for your great OSS work! I can’t wait for throw types to happen 😉

Using cache.sheet.constructor within Global seems like something that we could do. Considering it’s a simple change and that it wouldn’t break anything and doesn’t really introduce any new options/configuration etc this is a solution that I would prefer. Especially that you could only tweak your cache once and the rest of the thing would “just work”.

If you prepare a PR for such a change with tests then I would happily merge it.

I’m handling a very special environment and I must implement my own StyleSheet class to insert rules.

Out of my curiosity - could you describe this in more detail? I love learning about quirky use cases 😛