Theme customization not work from my own library wrapper of theme-ui

[jambsik]

Hi, this is the first time I am using theme-ui and I have done a proof of concept which consists of:

• Create a library based on "theme-ui" that will expose different combinations of "theme-ui" package components. This is bundled with rollupjs and uploaded to npm packages.
• Add the library into an application with next js.

I install the library I uploaded to npm packages into the nextjs app project. If I try to customize the "theme-ui" components from the next js app they are not applied and are greyed out.

I can only customize the components in the next js app if I use theme-ui components directly and not my own, even though they are wrappers of theme-ui components.

Can you think what could be happening?

Works:

    import { ThemeProvider , Button} from "theme-ui";

   <ThemeProvider theme={myCustomTheme}><Button>button</Button> </ThemeProvider>

Not Works:

    import { ThemeProvider} from "theme-ui";
     import { MyButton } from "@mylibrary";

   <ThemeProvider theme={myCustomTheme}><MyButton>button</MyButton> </ThemeProvider>
   
 

my bundelize component in node_modules package:

   /** @jsxImportSource theme-ui */
import { ButtonProps } from '@theme-ui/components';
export declare const Button: (props: ButtonProps) => import("theme-ui/jsx-runtime").JSX.Element;

thanks

[hasparus]

I'd guess you have multiple versions of Emotion installed and there's a context mismatch. Could you upload your lockfile here?

[jambsik]

Thanks!

[hasparus]

Okay, it doesn't look like the thing I expected. Could you provide a reproduction repo? (Is your components library open source?)

[jambsik]

the repo link: https://github.com/jambsik-labs/ui-components . Is aPOC

[hasparus]

Take a look in your bundle. It includes a big piece of Emotion and @theme-ui/css. If I were you, I'd look into the rollup externals config, because I'm fairly sure you didn't intend to bundle your transitive dependencies.

[hasparus]

As a quick explanation to why it's happening -- Your ThemeProvider in Next.js app uses a different copy of the same Emotion context (because you UI library has one in the bundle).

[jambsik]

Thank you very much! it's already fixed :D @hasparus

have a nice week and see you soon!

[ghost]

I know that this is old, but what did you do to fix this? Was there a specific config option that you added?

[jambsik]

@sgreco-dev Basically I solved the problem by making sure that my component library did not include theme-ui in the bundle. Allowing only one real place for it, i.e. the one who provides it is the application. The library bundle is managed with rollup. So I added the following plugin : https://www.npmjs.com/package/rollup-plugin-peer-deps-external and in the package json:

 "peerDependencies": {
        "@theme-ui/presets": "^0.11.3",
        "@types/theme-ui": "^0.6.0",
        "theme-ui": "^0.11.3"
    },

[hasparus]

Hey @jambsik, a little offtop, but you don't need "@types/theme-ui". v0.11.3 you're using exports its own types from theme-ui package.