Using the main app's theme in my own custom library

[davidbarker]

I'm going to be reusing my custom theme and some custom components across multiple apps, so I created an NPM package that I can import into multiple apps. This package exports a theme and also some custom components. I ran npm link to use the library while I'm working on it locally.

I can import the theme from my library into my app, and all standard Chakra UI components are themed correctly within my app. However, all of the custom components I'm using within my app have no theming at all. If I attempt to access the theme within the custom components inside the library, the theme object is empty.

To illustrate it more concretely, here's a custom control example from my library that uses a standard Chakra UI component inside.

const MyCustomNumberInputControl = () => {
  return (
    <Box>
      <Text variant="label">A label</Text>
      <NumberInput variant="panel" />
    </Box>
  );
};

I then use it in my app.

import { MyCustomNumberInputControl, theme } from 'my-custom-library';

const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <Box
        paddingX="panel.paddingX"        <--- this works correctly ✅
        paddingY="panel.paddingY"        <--- this works correctly ✅
        variant="fun"                    <--- this works correctly ✅
      >
        <MyCustomNumberInputControl />   <--- this renders with no theme at all ❌
      </Box>
    </ChakraProvider>
  );
};

---

It seems the theme from my app's ChakraProvider isn't being passed down into my library components.

For example, if I use the useTheme hook, and console.log the resulting theme in my app, I get the correct theme.

{
  blur: {none: 0, sm: "4px", base: "8px", md: "12px", lg: "16px", …},
  borders: {none: 0, 1px: "1px solid", 2px: "2px solid", 4px: "4px solid", 8px: "8px solid", …},
  ...
}

However, if I use the useTheme hook within one of my custom components, the resulting theme is completely empty.

---

How do I ensure my library can access the ChakraProvider/theme from the parent app? Thanks!

[3runoDesign]

it works if you export your own Provider from your package.
However, if you try to put some chakra component into your design it won't get the custom theme from your package.

but you can try something like:

import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react';
import { DesignProvider, theme } from 'your-package';

<ChakraProvider resetCSS theme={theme}>
      <ColorModeProvider options={{ initialColorMode: theme.config.initialColorMode }}>
            <DesignProvider>
                  <App />
            </DesignProvider>
      </ColorModeProvider>
</ChakraProvider>

I don't know if that would be the best approach.

[veloware]

this is what I ended up with too, but I notice this means that you end up bundling Chakra twice into the final app build, which is far from ideal given Chakra's bundle size is large as it is as soon as you import and use the ChakraProvider

[alexkreidler]

I have the same issue.

I git cloned this Chakra datepicker library, made some changes locally and ran npm link, but now when I import it in my app, it looks unstyled (e.g. a Chakra <Input/> component from inside the library renders as the default browser input element).

[devtombiz]

Hi, any solution for this issue ? I am facing the same problem and I am looking for clues. Thanks !

[veloware]

@devtombiz did you ever find a solution to this? I ended up doing what @3runoDesign has above, just simply by trial and error and ended up with the same solution, but its not ideal as you end up bundling Chakra twice

[devtombiz]

@veloware Unfortunately I didn't find a solution for this. So in the end I created a monorepo using turborepo with apps and libraries separated. This works as turbo is building and packaging everything in the final app (Or so I think). But I was never able to make it work with a separate UI library package using chakra.

[veloware]

@davidbarker Did you ever find a solution for this?

[masives]

@veloware @davidbarker

I think I found solution for that. To sum up - the issue is that when importing your npm package components in the npm package are pointing at different contextProvider that the ones in your application. The reason for this is two copies o @chakra-ui/react so they don't share reference.

The solution is to mark @chakra-ui/react as peer dependency so it doesn't get packaged with your npm package. Ilustration below:

[veloware]

thanks @masives - I ended up with this too after spending some time on it. I think it's similar to what you have, but the main thing is that it's a peer dep.

I have in my external 'component library' a ThemeProvider component, that builds a theme object and passes it to a ChakraProvider and returns the ChakraProvider. Chakra in the component library is marked as a peer dependency.

export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
  const theme = buildTheme();
  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
};

In any of the apps that consume the component library, they install Chakra, and import the theme provider

import { ThemeProvider } from '@my/component-library';

and wrap with the app with that, therefore any component imported from chakra, or my component library is themed as per the theme in the component library.

[masives]

I feel like this is a little bit misleading because you're exporting ThemeProvider from your npm package, but it will actually use the node_module from your target application. I think exposing theme alone would be enough since you'd allow for easy extension of it.

[veloware]

when I tried just exporting the theme and passing it to a ChakraProvider in the consuming app, I ended up hitting this issue - #4831 whereby when I tried to use components from both @chakra-ui/react, say <Box> and a component from my library, say, <Text /> one of those components converted the theme keys to values properly, however the other component would not (I cant remember which one worked and which didnt). I tried different combinations of how to export the provider and/or theme, but the only combination that worked for me that it would theme both Chakra components and components from my lib, was that I mentioned above.

[yuzhakovvv]

Thanks @masives and @veloware. This worked for me 🎉

[beata]

I finally figure out how to apply project theme on imported monorepo packages.

If you are using webpack as bundler, change resolve.modules to make main project's node_modules directory as the first modules path:

    modules: [path.resolve(__dirname, './<to-main-project>/node_modules'), 'node_modules'],

https://webpack.js.org/configuration/resolve/#resolvemodules

[DimaTeniuta]

Just add in webpack.config.js in your npm library externals field: externals: { react: 'react', 'react-dom': 'react-dom', '@chakra-ui/react': '@chakra-ui/react', '@emotion/react': '@emotion/react', '@emotion/styled': '@emotion/styled', 'framer-motion': 'framer-motion' }, and also use peerDependencies in package.json file

[cedricjacobs]

we solved this by making the theme a function ==> some hooks in react make a snapshot of the functions dependencies (arguments) before everything has been resolved.
This makes that at the moment the function has its execution, it will not resolve the desired complete theme, but a outdated version of it (as it has not updated the every argument of the function). I think this has to do with copying by value and not by reference (not sure and cannot be bothered to look it up).

// FYI: mergedCustomTheme comes from the custom package
export const customTheme = () => extendTheme(mergedCustomTheme());

// by executing the customTheme as a function you actualise the references

<ChakraProvider theme={customTheme()}>
// your code goes here
</ChakraProvider>