Mui theme breakpoints not working as expected

Question

I have set breakpoints for my mui react based app as follows

export const lighttheme = createTheme({
  palette: palette,
  typography: typography,
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
      xxl: 2160,
    },
  },
  components: {
    MuiTooltip: LightMuiTooltip,
    MuiDrawer: {
      styleOverrides: {
        root: {
          display: "flex",
          minHeight: "100vh",
          zIndex: 1,

          overflow: "hidden",
        },
      },
    },
  },
});

In my component I am saying

 const InnerNavBox = styled(Box)(() => ({
    justifyContent: "space-between",
    alignItems: "center",
    display: "flex",
    flexDirection: "column",
    gap: theme.breakpoints.between("lg", "xxl") ? "4rem" : "2rem", //"2rem",
  }));

I am checking on screen sizes screen 1 - 1194x834 and screen 2 - 1728x1117. I am expecting the gap to be 2rem for screen 1 and 4rem for screen 2. However, both screens have become 4rem now. I am not sure what I am doing wrong. Can anyone help please.

Answer 1

theme.breakpoints.between(start, end) returns a media query string, not a boolean. The way you're using it in your example will always evaluate to true (because the return value of between() is a non-empty string) -- so your ternary will always return '4rem'.

The correct usage for the way you're trying to use it would be:

const InnerNavBox = styled(Box)(({ theme }) => ({
  justifyContent: "space-between",
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  gap: "2rem", // define a default behavior
  [theme.breakpoints.between("lg", "xxl")]: { // override the default behavior if within these breakpoints (inclusive)
    gap: "4rem",
  }
}));

But I imagine, for this particular case (assuming you won't have any larger breakpoint than xxl), what you really want is theme.breakpoints.up(key):

const InnerNavBox = styled(Box)(({ theme }) => ({
  justifyContent: "space-between",
  alignItems: "center",
  display: "flex",
  flexDirection: "column",
  gap: "2rem", // define a default behavior
  [theme.breakpoints.up("lg")]: { // Notice `up()`, not `between()` -- override the default behavior if within the defined breakpoint or higher
    gap: "4rem"
  }
}));

Working CodeSandbox: https://codesandbox.io/s/theme-breakpoints-pvyhjd?file=/demo.tsx