I am facing a situation where I have a component library built using Styled Components that has its own theme settings which are not meant to be overridden. Now, I need to incorporate this component library into another project that also uses Style Components and has its own theme. How can I import components from both the component library and the project while ensuring that each of them only receives theme values from their respective repositories? I want to maintain two separate themes - one for the component library and another for the project's components.
For example: Separate Project
const theme = {
colors: {
error: '#f23f3f',
}
}
import { SeparateProjectThemeProvider } from 'separate-proj';
class App extends React.Component {
render () {
return (
<SeparateProjectThemeProvider theme={theme}>
<h1>Hello</h1>
</SeparateProjectThemeProvider>
)
}
}
Component Library
const theme = {
colors: {
brand: '#3bbdca',
}
}
import { ThemeProvider } from "styled-components";
import defaultTheme from "./theme-settings";
const mergeThemes = (theme1, theme2) => {
const mergedTheme = { ...theme1, ...theme2 };
return mergedTheme;
};
const CustomThemeProvider = props => {
const customTheme = {
custom: Object.assign({}, defaultTheme)
};
return (
<ThemeProvider theme={mergeThemes(customTheme, props.theme)}>
{props.children}
</ThemeProvider>
);
};
export default CustomThemeProvider;