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?