[DataGrid] createTheme typography not working on extended Theme

[fdebef]

The problem in depth 🔍

Quite simple situation:
I have simple DataGridPro table with default theme:

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  csCZ,
);

I want to extend this theme with simple typography font size:

  const theme = createTheme(defaultTheme, {
    typography: {
      fontSize: 8,
    },
  });

This does not affect the table inside ThemeProvider.
If I try modify the theme like this:

const theme = createTheme(defaultTheme, {
    typography: {
      fontSize: 8,
    },
    palette: {
      primary: { main: '#FF0000' },
    },
  });

then in the palette change works, the typography not. Here in live demo: https://codesandbox.io/embed/thirsty-mendel-rpmdk7

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 14.0
  Binaries:
    Node: 20.1.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 9.6.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 118.0.5993.70
    Edge: Not Found
    Safari: 17.0
  npmPackages:
    @emotion/react: ^11.10.5 => 11.11.1 
    @emotion/styled: ^11.10.5 => 11.11.0 
    @mui/base:  5.0.0-beta.19 
    @mui/core-downloads-tracker:  5.14.13 
    @mui/icons-material: ^5.11.16 => 5.14.13 
    @mui/material: ^5.11.7 => 5.14.13 
    @mui/private-theming:  5.14.13 
    @mui/styled-engine:  5.14.13 
    @mui/system:  5.14.13 
    @mui/types:  7.2.6 
    @mui/utils:  5.14.13 
    @mui/x-data-grid:  6.16.2 
    @mui/x-data-grid-pro: ^6.16.2 => 6.16.2 
    @mui/x-license-pro:  6.10.2 
    @types/react:  18.2.28 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 

Search keywords: createTheme typography fontSize
Order ID: 57288

[cherniavskii]

Hey @fdebef
I believe this is the expected behavior:

Source: https://mui.com/material-ui/customization/theming/#api

Here's a fixed demo: https://codesandbox.io/s/unruffled-ardinghelli-gms9hz

[fdebef]

Hey, thanks for answering, but you're talking about merging two themes, but I want to merge Theme (as a result of createTheme) and options as described in documentation as "Theme composition" (though I agree, that the mention about processing only first argument can be found in same chapter - I am a bit confused).

Theme composition: using theme options to define other options
When the value for a theme option is dependent on another theme option, you should compose the theme in steps.

import { createTheme } from '@mui/material/styles';

let theme = createTheme({
  palette: {
    primary: {
      main: '#0052cc',
    },
    secondary: {
      main: '#edf2ff',
    },
  },
});

theme = createTheme(theme, {
  palette: {
    info: {
      main: theme.palette.secondary.main,
    },
  },
});

Think of creating a theme as a two-step composition process: first, you define the basic design options; then, you'll use these design options to compose other options.

Yet one question is, why it works for palette and not for typography.