Javascript 如何扩展或合并样式化组件主题

我有一个基于组件的样式化组件库，它有自己的一组主题设置，在大多数情况下都不需要重写。我正在将这个组件库拉入另一个项目，该项目也使用样式组件，并且有自己的主题。如何从组件库和此项目导入组件，并确保每个组件都只提供了来自其相应repo的主题值？我不想覆盖我的组件库主题，我想管理两个单独的主题，这样我的组件库就可以访问一个默认主题，而这个其他项目可以为它自己的组件定义一个单独的主题对象

例如： 独立项目

const theme = {
  colors: {
    error: '#f23f3f',
  }
}

import { SeparateProjectThemeProvider } from 'separate-proj';

class App extends React.Component {
 render () {
  return (
   <SeparateProjectThemeProvider theme={theme}>
     <h1>Hello</h1>
   </SeparateProjectThemeProvider>
  )
 }
}

const主题={
颜色：{
错误：'#f23f3f'，
}
}
从“单独项目”导入{SeparateProjectThemeProvider}；
类应用程序扩展了React.Component{
渲染（）{
返回(
你好
)
}
}

组件库

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;

const主题={
颜色：{
品牌：“#3bbdca”，
}
}
从“样式化组件”导入{ThemeProvider}；
从“/theme settings”导入默认主题；
常量合并主题=（主题1，主题2）=>{
const mergedTheme={…theme1，…theme2}；
返回合并主题；
};
const CustomThemeProvider=props=>{
常量自定义主题={
自定义：Object.assign（{}，defaultTheme）
};
返回(
{props.children}
);
};
导出默认CustomThemeProvider；

下面的代码将演示几个选项——使用适当的主题提供程序（WrappedTitle）预包装每个组件库组件，或者在使用它们时包装（“Hello component World！”部分）

//示例组件库/index.js
从“React”导入React；
从“样式化组件”导入样式化；
从“样式化组件”导入{ThemeProvider}；
常量主题={
标题颜色：“绿色”
};
导出常量CompLibThemeProvider=props=>{
const customTheme=Object.assign（{}，theme，props.theme）；
返回(
{props.children}
);
};
export const Title=styled.h1`
字号：1.5em；
文本对齐：居中；
颜色：${props=>props.theme.titleColor}；
`;
导出常量WrappedTitle=（道具）=>{
返回（）；
};

下面是一些示例项目代码：

// App.js
import React from 'react';
import styled from 'styled-components';
import {Title, CompLibThemeProvider, WrappedTitle} from 'component-lib';
import {ThemeProvider} from "styled-components";

const theme = {
  titleColor: "red"
};

export const BigTitle = styled.h1`
  font-size: 5em;
  text-align: center;
  color: ${props => props.theme.titleColor};
`;

const ProjectThemeProvider = props => {

  return (
    <ThemeProvider theme={Object.assign({}, theme, props.theme)}>
        {props.children}
    </ThemeProvider>
  );
};
const App = () => {
  return (
    <>
    <ProjectThemeProvider>
      <>
        <BigTitle>Hello Big World!</BigTitle>
        <WrappedTitle>Hello Pre-wrapped World!</WrappedTitle>
      </>
    </ProjectThemeProvider>
    <CompLibThemeProvider><Title>Hello Component World!</Title></CompLibThemeProvider>
    </>
  );
}

export default App;

//App.js
从“React”导入React；
从“样式化组件”导入样式化；
从“组件库”导入{Title，CompLibThemeProvider，WrappedTitle}；
从“样式化组件”导入{ThemeProvider}；
常量主题={
标题颜色：“红色”
};
export const bigtTitle=styled.h1`
字号：5em；
文本对齐：居中；
颜色：${props=>props.theme.titleColor}；
`;
const ProjectThemeProvider=props=>{
返回(
{props.children}
);
};
常量应用=（）=>{
返回(
你好，大世界！
你好，预包装世界！
组件世界你好！
);
}
导出默认应用程序；

您的组件库中大约有多少个组件？如果两个主题定义了相同的属性（例如，一个主题将错误颜色定义为红色，另一个主题将错误颜色定义为栗色），您希望它们使用各自的值还是希望一个主题胜过另一个主题？我大约有20个组件。理想情况下，我希望他们保留各自的值您的组件库中的任何组件都可以嵌套项目中的组件吗？您是否经常会遇到以下情况：这种嵌套的一种可能情况是，您的组件库中有一个“选项卡”或“面板”组件，然后您将主项目中的子组件放在其中。我不认为会发生这种情况，但这是可能的。到目前为止，组件库是一个小而简单的库，在大多数情况下，它用于在我们公司的产品中构建更大的组件。一旦我解决了一些其他问题，Hanks将立即实施它。

// App.js
import React from 'react';
import styled from 'styled-components';
import {Title, CompLibThemeProvider, WrappedTitle} from 'component-lib';
import {ThemeProvider} from "styled-components";

const theme = {
  titleColor: "red"
};

export const BigTitle = styled.h1`
  font-size: 5em;
  text-align: center;
  color: ${props => props.theme.titleColor};
`;

const ProjectThemeProvider = props => {

  return (
    <ThemeProvider theme={Object.assign({}, theme, props.theme)}>
        {props.children}
    </ThemeProvider>
  );
};
const App = () => {
  return (
    <>
    <ProjectThemeProvider>
      <>
        <BigTitle>Hello Big World!</BigTitle>
        <WrappedTitle>Hello Pre-wrapped World!</WrappedTitle>
      </>
    </ProjectThemeProvider>
    <CompLibThemeProvider><Title>Hello Component World!</Title></CompLibThemeProvider>
    </>
  );
}

export default App;