[system] Counter intuitive behavior when overriding media queries

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I’m unable to override certain styles on components. In this example, I’m trying to override the minHeight property on a Toolbar component.

https://github.com/mui/material-ui/blob/2a77a330230dfd534225a914b957cd591e7802c3/packages/mui-material/src/styles/createMixins.js#L4-L12

I was eventually able to override that property by adding !important to my style but according to the docs, that doesn’t seem like it should be necessary. I would expect any provided styles to be applied last and thus override the default styles.

Expected Behavior 🤔

Based on the documentation, I would expect to be able to…

• use sx to override this directly on the component (<Toolbar sx={{ minHeight: '0px' }}>...)
• OR create a variant in the theme to be able to enable that specific style override
• OR use styled to create a one-off component variant that has those styles applied to it

Steps to Reproduce 🕹

CodeSandbox Example using sx (preferred method), styled, and theme

Context 🔦

I was used to overriding styles via withStyles or the classes prop in v4 but it’s unclear to me how to override styles without using !important in my styles.

Your Environment 🌎

`npx @mui/envinfo`

   System:
    OS: macOS 11.6
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 7.24.2 - ~/.nvm/versions/node/v14.16.1/bin/npm
  Browsers:
    Chrome: 94.0.4606.71 (browser being used)
    Edge: 94.0.992.38
    Firefox: 92.0
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.50 
    @mui/icons-material: ^5.0.3 => 5.0.3 
    @mui/material: ^5.0.3 => 5.0.3 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/styles: ^5.0.1 => 5.0.1 
    @mui/system:  5.0.3 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react:  17.0.14 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 

[Andarist]

Ye, I know 😛 just showcasing how you can end up with this “unwanted” situation with vanilla CSS too (so it’s not specific to Emotion)

[Andarist]

I think the diagnosis here is correct - when you compose styles are “folded” into a single class name and the rest is just CSS behavior.

While this issue is slightly about a different problem I think it might actually shed some additional light on the issue here: https://github.com/emotion-js/emotion/issues/1860 .