[system] Allow theme inheritance in createStyled

[jansepke]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

While working on solutions for #38994 I came up with the idea that it would be very helpful that nested createStyled() should have an option to pass the defaultTheme. What I like to accomplish is to overwrite the theme that was used in the first createStyled() by the second createStyled().

Examples 🌈

import { createTheme } from "@mui/material";
import { blue, yellow } from "@mui/material/colors";
import { createStyled } from "@mui/system";

const theme1 = createTheme({
  palette: { primary: yellow },
});
const theme2 = createTheme({
  palette: { primary: blue },
});

const styled1 = createStyled({ defaultTheme: theme1 });
const styled2 = createStyled({ defaultTheme: theme2 });

const MyButton1 = styled1("button")(({ theme }) => ({
  color: theme.palette.primary.main,
}));
const MyButton2 = styled2(MyButton1)();

export const App = () => (
  <>
    <MyButton1>Button text is yellow</MyButton1>
    <MyButton2>Button text is yellow but should be blue</MyButton2>
  </>
);

styled2(MyButton1) should pass the theme of styled2 to the callback of styled1 so it would be possible to apply a different theme to the button from the outside and without using a ThemeProvider.

Currently styled will only use the directly passed theme or the theme passed by a ThemeProvier. An alternative solution would be to allow passing the theme directly as a prop to every MUI component (that seems to be already possible but not document and not allowed in the Typescript Props interface)

Motivation 🔦

I want to create an internal component library that is wrapping and styling MUI components. I want to use a theme for that and the theme should be applied without forcing the users of my library to add a ThemeProvider to their applications.

[brijeshb42]

Same comment as this.

[jansepke]

Closed in the other issue.