How to use responsive font-size with material-ui

Question

I have made a "theme provider" (working), but "typography" is not working.

Here my theme provider (already import in App file)

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

export const muiTheme = createTheme({
  palette: {
    primary: { 
      main: '#006E8C', 
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff', 
      contrastText: '#ffcc00',
    }, 
    custom: {
      light: '#ffa726',
      main: '#f57c00',
      dark: '#ef6c00',
      contrastText: 'rgba(0, 0, 0, 0.87)',
    },
    buttonYellow: {
      light: '#fffff',
      main: '#FAB818',
      contrastText: '#ffff',
    },

    buttonBlue: {
      light: '#fffff',
      main: '#006E8C',
      contrastText: '#ffff',
    },
    typography: {
      fontFamily: ['Quicksand'].join(','),
      subtitle: {
        fontSize: '12rem',
        '@media (max-width:600px)': {
          fontSize: '1.5rem',
        },
      },
    }, 
    contrastThreshold: 3, 
    tonalOffset: 0.2,
  },
});

Here an example of using "buttonYellow" from this theme provider (working):

 <Button
      color="buttonYellow"
      variant="contained"
     
    >
     Hello
    </Button>

I am know trying to use responsive font-size for my subtitle.

Here I have tried to add the responsive font size (not working)

 <Tab
     value={categorie?.filter} 
     variant="typography.subtitle.fontSize"
      label='Hello'/>

I have also tried to add this in my Tab and it is working but i don't know how to specify a specific size like "2em", "5em"... :

 sx={{ typography: { sm: 'body1', xs: 'body2' } }}

Answer 1

Globally Responsive Typography

Unless your'e defining your own custom breakpoints for the MUI theme, I'd personally stay away from adding the media queries the way you showed in your question† and instead use MUIs breakpoints . The issue with using theme.breakpoints in createTheme() is that when createTheme() is initially called, theme.breakpoints is not yet available. You can overcome this by generating the breakpoints ahead of time by using MUI's in-built createBreakpoints() function.

(† Note from above: You'll have to manage/maintain two separate, and possibly conflicting, sets of breakpoints.)

import { createBreakpoints } from "@mui/system";
const breakpoints = createBreakpoints({});

Then you can override your typography attributes at the variant level using the in-built breakpoints:

const muiTheme = createTheme({
  typography: {
    h1: {
      fontSize: 28,
      lineHeight: "40px",
      fontWeight: 600,
      [breakpoints.down("md")]: {
        color: "red",
        fontSize: 18
      },
      [breakpoints.up("md")]: {
        color: "blue",
        fontSize: 22
      },
      [breakpoints.up("lg")]: {
        fontSize: 28,
        color: "green"
      }
    }
    ...
  }
}

This will have the effect of globally adding responsive text sizes to your theme.

Per Component Implementation

The above changes are optional if you just want to go with MUI's default sizes and only want to change individual components' variants to be responsive.

In your case (for Tab ) you can just set the sx prop with a typography object with the variants that you want to use at each breakpoint. For example:

<Tab
  label="Overriden via sx"
  sx={{ typography: { sm: "h2", xs: "body2" } }}
/>

Here is an ugly, but working CodeSandbox [of both examples] to help illustrate them: https://codesandbox.io/s/mui-responsive-text-size-in-global-theme-5w6j23?file=/demo.js:2935-3067

xs :

md :