Material UI migration to V5: MUI component received wrong theme color through SX

Question

I just migrated my material UI version from 4 to 5. Everything went well, but now I have this strange bug:

Everywhere else on the app the theme colors are displayed correctly, but this Tabs component displays default MUI theme colors. I have changed the color of this through the 'sx' property. Perhaps I did something wrong here?

Someone knows what could cause this issue?

The green color is the normal secondary color, and everywhere on the app it displays it correctly, but the Tab component uses purple instead (the MUI default theme secondary color)

Tabs logic I use: I pass 'secondary-light to sx prop

<TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
          <TabList onChange={handleChange} aria-label="lab API tabs example">
            {blocks.map((block) => (
              <Tab
                sx={{
                  boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.1)",
                  "&.MuiTab-root": {
                    color: 'secondary.light',
                  },
                }}
                label={block.label}
                value={block.key}
              />
            ))}
          </TabList>
        </Box>
        {blocks.map((block) => (
          <TabPanel value={block.key}>
            <TabsPanelContent displayedBlock={block} step={step} />
          </TabPanel>
        ))}
      </TabContext>

App.tsx

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { Route, Switch } from "react-router";

import AppProviders from "./AppProviders";
import AppInitializer from "./AppInitializer";
import AppLayout from "./AppLayout";
import ComplianceErrorBoundary from "components/errorBoundary/ComplianceErrorBoundary";
import { MuiThemeProvider as ThemeProvider } from "@material-ui/core";
import { myfaro } from "@myfaro/themes-mui";

import { ErrorBoundary } from "components";
import { InvestorProfileWizard } from "components/wizard/customWizards/investorProfileWizard/InvestorProfileWizard";
import { ComplianceWizard } from "components/wizard/customWizards/complianceWizard/ComplianceWizard";
import { StepProvider } from "components/wizard/providers/StepProvider";

import { Initiation } from "components/wizard/customWizards/complianceWizard/Initiation";
import { appsignal } from "helpers/appsignalInstance";
import AppsignalErrorBoundary from "components/errorBoundary/AppsignalErrorBoundary";
import { WizardRoutes } from "components/wizard/routes/WizardRoutes";

const baseName =
  window.location.href.indexOf("localhost") > -1 ? "/" : "/web-app";

function App() {
  return (
    <ThemeProvider theme={myfaro}>
      <ErrorBoundary>
        <AppProviders>
          <AppInitializer>
            <AppLayout>
              <Router basename={baseName}>
                <Switch>
                  <Route path="/mifid_files/:mifid_file_uid">
                    <StepProvider mainWizardName="investorProfile">
                      <InvestorProfileWizard />
                    </StepProvider>
                  </Route>
                  <Route exact path="/compliance/:case_file_uid/init">
                    <Initiation />
                  </Route>
                  <Route path="/compliance/:case_file_uid/:mifid_file_uid">
                    <AppsignalErrorBoundary
                      namespace='compliance'
                      instance={appsignal}
                      fallback={(error) => (
                        <ComplianceErrorBoundary error={error} />
                      )}
                    >
                      <StepProvider mainWizardName="compliance">
                        <ComplianceWizard />
                      </StepProvider>
                    </AppsignalErrorBoundary>
                  </Route>
                  {/* TODO: eventually, we should put the compliance wizards in here */}
                  <WizardRoutes />
                </Switch>
              </Router>
            </AppLayout>
          </AppInitializer>
        </AppProviders>
      </ErrorBoundary>
    </ThemeProvider>

  );
}

export default App;

My custom theme

import { createTheme, responsiveFontSizes } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';
import yellow from '@material-ui/core/colors/yellow';
import red from '@material-ui/core/colors/red';
import globalTheme from './general';
import overrides from './overrides';

const theme = createTheme(globalTheme, {
  palette: {
    primary: {
      ...purple,
      main: '#0d9ee3',
      light: '#48BDF5',
      dark: '#0A7BB1',
      100: '#E4EEFA',
    },
    secondary: {
      ...green,
      main: green[500],
      light: green[300],
      dark: green[700],
    },
    text: {
      primary: '#212529',
      secondary: 'rgba(33, 37, 41, 0.8)',
    },
    background: {
      paper: '#fff',
      default: '#fafafa',
    },
    results: {
      bad: {
        main: red[500],
        light: red[200],
        dark: red[800],
      },
      caution: {
        main: yellow[500],
        light: yellow[200],
        dark: yellow[800],
      },
      good: {
        main: green[500],
        light: green[200],
        dark: green[800],
      },
    },
  },
  typography: {
    button: {
      // fontStyle: "italic"
      fontWeight: 500,
      textTransform: 'none',
    },
  },
});

export default responsiveFontSizes(overrides(theme));

EDIT:react devtools inspect

EDIT 2: first parent with theme:

Answer 1

We didn't quite finish our discussion, but I'm just going to list the probable suspects for anybody who runs into the same issue.

Most of the time, conflicting themes like this are caused by multiple instances of <ThemeProvider /> or its styling engine, whether that's JSS, emotion or styled-components. Either you have incorrectly nested themes, or you have imported a component that ships its own Mui palette... such as components from material-ui/core used inside @mui/material components.

If you've fully removed the legacy version from your app and are totally sure you're not using any offending components, your best course of action is to start checking for the Theme props in React dev tools, starting from the mismatched component and working your way up the tree. The offender has to be there somewhere.