NX Monorepo and emotion theme in libs

Viewed 179

We want to use useTheme from @emotion/react inside libs and inside our apps

we are useing: -react-native-web -nx monorepo -react-native

This is our structure

 -apps
  --web (ReactJS)
  --mobile (React-native)
 -libs
  --shared-ui
    --components
    --theming

and when we want to use useTheme in app we have to declare Theme like that

import '@emotion/react';
import { ThemeType } from '@awesomeapp-frontend/ui';

declare module '@emotion/react' {
  export interface Theme extends ThemeType {}
}

and then put this into provider:

import { light } from '@awesomeapp-frontend/ui';

...
root.render(
  <StrictMode>
    <ThemeProvider theme={light}>

but this declaration works only for web app we can now use our definition of ThemeType

.... // type for theme
export type ThemeType = {
  colors: {
    primary: string;
    myOwnColor: string;
  };
};

.... // in component
const App = () => {
  const theme = useTheme();
  console.log('THEME IN COMPONENT: ', theme);

  return <div style={{ color: theme.colors.primary }}>Oi, I am web app</div>;
...

And questions is how can we use this type for ThemeProvider in lib folder When i log out useTheme data are there

{
colors: {
 primary: 'red'
 myOwnColor: 'blue'
}
}

but typescrypt dont know it and complaining... How can i set up global type for emotin to be available also in lib folder?

0 Answers
Related