[question] How to combine the two different Joy-UI themes.

The problem in depth

const oneTheme: CssVarsThemeOptions = {
  colorSchemes: {
    light: {
      palette: {
        primary: {
          500: '#1976d2',
        },
      },
    },
  },
  components: {
    JoyButton: {
      styleOverrides: {
        root: {
          borderRadius: '8px',
        },
      },
    },
  },
};

// Second theme
const twoTheme: CssVarsThemeOptions = {
  colorSchemes: {
    light: {
      palette: {
        secondary: {
          500: '#dc004e',
        },
      },
    },
  },
  components: {
    JoyInput: {
      styleOverrides: {
        root: {
          backgroundColor: '#f0f0f0',
        },
      },
    },
  },
};

const combinedThemes = extendTheme({
    ...oneTheme,
    ...twoTheme,
    components: {
        ...oneTheme.components,
        ...twoTheme.components,
    },
} as Theme)

but I found that xxx.components cannot be recognized, Can you please help me solve it? I need to combine this two different theme together and also let the JoyButton and JoyInput working together as well

Your environment

next.js v14, typescript, Joy-Ui

Search keywords: Joy-UI extendTheme
Order ID: 97037

Search keywords: