[docs] Typo in CSS Media Query demo of Breakpoints

[HelpMe-Pls]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

In the CSS Media Query (https://mui.com/customization/breakpoints/#css-media-queries) demo's source code , you defined:

And the output renders it as down(sm): red, which was supposed to be down('md'): purple ?

I know that it seems trivial for a typo but on my first approach to MUI's breakpoints, it looks confusing.

Expected behavior 🤔

To have the demo's output reflecting what it is intended to.

Steps to reproduce 🕹

Visit https://mui.com/customization/breakpoints/#css-media-queries and try it out

Context 🔦

I'm trying to learn about MUI's breakpoints.

Your environment 🌎

I tried it out on the section's attached sandbox (https://codesandbox.io/s/i96ii?file=/demo.tsx)
My browser: Microsoft Edge
Version 96.0.1054.53 (Official build) (64-bit)

[michaldudak]

Good catch! We shouldn't have used colors from the theme here.

[HelpMe-Pls]

@michaldudak Thanks for your response. My initial question was the breakpoints.down('md') which was rendered as down('sm'). Very much appreciate your fix on the color, but the main point of my issue seems to be overlooked in your PR:

theme.breakpoints.down('md'):

Should be rendered as down(md): red instead of down(sm): red

[michaldudak]

Ahh, right, sorry!