Need help with CacheProvider, it's is not setting classname prefix

[andy-root]

Current behavior:

I'm trying to use a custom cache for emotion 10 so that I can set a classname prefix. I have a federated UI where multiple instances of emotion 10 are used. I created a cache and set the CacheProvider value prop to it. The html produced is not showing that the produced classnames are using the key value defined when creating the cache object.

To reproduce:

I reproduced the issue on playcode.io. Its the only one that has version 10
https://playcode.io/1789873

1. Open https://playcode.io/1789873
2. inspect the produced html
3. see class="css-1443u2l"

import React from 'react';
import createCache from '@emotion/cache';
import {CacheProvider} from '@emotion/core';
import {css} from 'emotion';

const myCache = createCache({
  key: 'andy',
});

const useStyles = () => ({
  container: css({
    background: 'red',
  }),
});

export function App(props) {
const classes = useStyles();
  return (
    <CacheProvider value={myCache}>
    <div className={classes.container}>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
    </CacheProvider>
  );
}

<div class="css-1443u2l">
    <h1>Hello React.</h1>
   <h2>Start editing to see some magic happen!</h2>
</div>

Expected behavior:

When I inspect the html the css classnames use the default 'css' prefix. I was expecting classnames to be prefixed with the key prop defined in the cache, andy.

<div class="andy-1443u2l">
    <h1>Hello React.</h1>
   <h2>Start editing to see some magic happen!</h2>
</div>

Environment information:

• react version: 18.0.0
• @emotion/cache version: 10.0.29
• @emotion/core version: 10.3.1
• emotion 10.0.27

[Andarist]

You are mixing emotion@10 and @emotion/core@10 APIs here. CacheProvider doesn't impact css coming from emotion - emotion is like a vanilla package, not integrated with React or anything else, you can use it without any framework.

This would be the proper way of doing this: https://stackblitz.com/edit/vitejs-vite-sindvv?file=src%2FApp.tsx&terminal=dev

[andy-root]

Thanks for the quick reply, I have a component library dependency that has a peer dependency on emotion 10, their components use import { css } from "emotion" to create classnames. My site is a federated UI so emotion will be used by multiple MFEs, each their own instance, this is why I'm trying to namespace the classnames. If CacheProvider is not compatible with css() from emotion 10 is their another way to set a custom cache for this case? createEmotion is not an option since the classnames are being written by the dependent component library so I have no way change the instance of css().

This is the only way that I have been able to override the classname prefix.

import * as Emotion from 'emotion';
Emotion.cache.key = Emotion.sheet.key = 'andy';

[andy-root]

I played around with your example and I created a fork so that I can verify css() from @emotion/react works but I get errors that the generated classname is not a string

import { css } from '@emotion/react';

const useStyles = () => ({
  container: css({
    background: 'red',
  }),
});

export function App(props) {
  const classes = useStyles();
  return (
    <div className={classes.container}>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Type 'SerializedStyles' is not assignable to type 'string'.(2322)
index.d.ts(2838, 9): The expected type comes from property 'className' which is declared here on type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { css?: Interpolation<Theme>; }'
(property) React.HTMLAttributes<T>.className?: string | undefined

https://stackblitz.com/edit/vitejs-vite-dfxqjx?file=src%2Fmain.tsx,src%2FApp.tsx%3AL12&terminal=dev

Is there no way to use the CacheProvider with Object Styles using css()?

[Andarist]

When using @emotion/react you are supposed to pass return value of its css to a css prop - not to className.