[Typography] Defining typography values does not update CSS variables

[zacol]

Steps to reproduce

I created the theme by following the example described here https://mui.com/material-ui/customization/typography/#responsive-font-sizes. The only difference is that I want CSS variables to be generated so I added the appropriate options for cssVariables.

const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: 'class',
  },
});

theme.typography.h3 = {
  fontSize: '1.2rem',
  '@media (min-width:600px)': {
    fontSize: '1.5rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '2.4rem',
  },
};

Current behavior

The CSS variable --mui-font-h3 has a default value all the time, instead of the value defined from theme.

--mui-font-h3: 400 3rem / 1.167 "Roboto", "Helvetica", "Arial", sans-serif;

https://stackblitz.com/edit/github-emurbz-94uwqfdk?file=src%2Fcomponents%2FProTip.tsx

Expected behavior

The CSS variable should reflect the values set in the theme.

--mui-font-h3: 400 1.2rem / 1.167 "Roboto", "Helvetica", "Arial", sans-serif;

Context

No response

Your environment

npx @mui/envinfo

System:
    OS: macOS 15.3.2
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 138.0.7204.51
    Edge: Not Found
    Safari: 18.3.1
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.1 => 11.14.1 
    @mui/core-downloads-tracker:  7.2.0 
    @mui/icons-material: ^7.2.0 => 7.2.0 
    @mui/material: ^7.2.0 => 7.2.0 
    @mui/material-nextjs: ^7.2.0 => 7.2.0 
    @mui/private-theming:  7.2.0 
    @mui/styled-engine:  7.2.0 
    @mui/system:  7.2.0 
    @mui/types:  7.4.4 
    @mui/utils:  7.2.0 
    @types/react: ^19 => 19.1.8 
    react: ^19.0.0 => 19.1.0 
    react-dom: ^19.0.0 => 19.1.0 
    typescript: ^5 => 5.8.3

Search keywords: css variables, create theme

[siriwatknp]

For CSS variables to work, the typography must be defined within the same call because the theme.vars is calculated once:

const baseTheme = createTheme();

const theme = createTheme({
  cssVariables: {
    colorSchemeSelector: 'class',
  },
  typography: {
    h3: {
       fontSize: '1.2rem',
      '@media (min-width:600px)': {
        fontSize: '1.5rem',
      },
      [baseTheme.breakpoints.up('md')]: {
        fontSize: '2.4rem',
      },
    }
  }
});

I think we could improve the docs on this to be:

const baseTheme = createTheme();

const theme = createTheme({
  typography: {
    h3: {
       fontSize: '1.2rem',
      '@media (min-width:600px)': {
        fontSize: '1.5rem',
      },
      [baseTheme.breakpoints.up('md')]: {
        fontSize: '2.4rem',
      },
    }
  }
});

[aditi291soni]

@siriwatknp Hi, I want to work on this? Could I take this up?

[siriwatknp]

@siriwatknp Hi, I want to work on this? Could I take this up?

Thank you, feel free to tag me when you have the PR ready.

[aditi291soni]

Hi @siriwatknp @ZeeshanTamboli , I was wondering if we should also update the existing description:
“The theme.typography.* variant properties map directly to the generated CSS. You can use media queries inside them.”
to better align with the changes made in the demo.

I’d be happy to make that update if needed — just let me know what you think!

I’ve also connected a PR for this — whenever you get a chance, could you please take a look and review it?

[NandanaAnukumar]

Hi, I’d like to work on this,please assign it to me.

[ZeeshanTamboli]

@NandanaAnukumar There's a already a PR up for it: #46558