主题的变化，React样式的组件-

Question

我有多个主题，例如-地球，水等等。在侧面主题中有多种变化，例如Earth（浅色），Water（浅色）。每个变体都有其样式集-bg-color，font-color，border-color等。

我正在使用样式化组件来实现所需的主题行为。我将主题保存在“主题文件夹”中。我的每个主题文件都是这样的

$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    console.log( $( this ).serialize() );
});

所有主题文件都导入到一个js文件中

 const theme = {
    brandPrimaryColor: colors.BRAND_PRIMARY,
    textColorPrimary: colors.TEXT_PRIMARY,
    backgroundColorPrimary: colors.BG_PRIMARY,
    backgroundColorSecondary: colors.BG_SECONDARY,
   borderColorBoldest: colors.ERROR,
 }
export default theme;

使用 import earth from './Earthy' import water from './Water' export const Earthy = { earth } export const Water = { water } 主题被注入到子组件中。

ThemeProvider

到现在为止一切正常。现在，我必须在每个主题中实现变体部分。我不确定实现此目标的最佳方法。我探索的一种方式是 const themeUsed = { main: Earthy.earthyTheme }; <ThemeProvider theme={themeUsed}> .... </ThemeProvider> 。但是在实施过程中卡住了。还有其他方法吗？ 请帮忙。