[ScopedCssBaseline] Style injection order changing when passing dynamic sizing.

[utkarsh22garg]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

For reference please see this reproducer - codesandbox

I have created two themes - theme1 (spacing - 4) and theme2 (spacing 2). I have rendered MUI Sliders in each of the themes wrapped under ScopedCssBaseline. In each theme, I have added custom scrollbar style by overriding the styles of ScopedCssBaseline. In custom scrollbar, I am passing minHeight css property which is dynamic in nature and dependent on the spacing factor in each theme.

The issue is that when I am rendering two Sliders one wrapped under in each theme and ScopedCssBaseline, I am seeing differences in slider track heights. On looking further into the issue, I found that it is happening because of the change in order of style applied by ScopedCssBaseline in each one of the slider.

Styling order in first slider:

Styling order in second slider:

Due to the change in order, box-sizing property is getting overridden causing Slider track height to shrink. If we will give minHeight in customScollbar as static value as 50px the issue goes away.

As suggested in #20461, I am also importing ScopedCssBaseline at first, but still the order is changing.

Expected behavior 🤔

Ideally both sliders should have same track height.

Steps to reproduce 🕹

Steps:

1. Visit codesandbox reproducer - https://codesandbox.io/s/continuousslider-demo-material-ui-forked-i7dbn3
2. See second slider and notice the track height. It will be less than the first one. Ideally both should be same.
3. Change minHeight in customScrollbar style to 50px and the issue will be resolved.

So it looks adding dynamic sizing changes the style injection order.

Context 🔦

I am trying to showcase component's look and feel for all custom themes in a single page for better comparison.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 3.10 Red Hat Enterprise Linux Server 7.9 (Maipo)
  Binaries:
    Node: 16.13.0 
    Yarn: 1.22.11 
    npm: 7.23.0 
  Browser:
    Chrome: 103.0.5060.114 (Official Build) (64-bit)
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: 5.0.0-alpha.87 => 5.0.0-alpha.87 
    @mui/material: ^5.8.5 => 5.8.6 
    @mui/types:  7.1.3 
    @types/react: ^17.0.6 => 17.0.45 
    react: ^17.0.0 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.7.4

[mnajdova]

I would recommend using GlobalStyles and adding the styles under different root elements. Is something like this going to work for you: https://codesandbox.io/s/beautiful-water-71b8pz?file=/src/App.tsx?

As suggested in #20461, I am also importing ScopedCssBaseline at first, but still the order is changing.

Yeah, this works only for styled components, not emotion.

[utkarsh22garg]

I would recommend using GlobalStyles and adding the styles under different root elements. Is something like this going to work for you: https://codesandbox.io/s/beautiful-water-71b8pz?file=/src/App.tsx?

I think I can live with the solution you suggested and passing static height in customScrollbar as well. But my main concern was to understand the reason, why passing dynamic sizing in ScopedCssBaseline is causing style injection order to change in second slider whereas it works in first slider.

Do you also recommend that we should prefer GlobalStyles in place of ScopedCssBaseline component ?

[finnhvman]

I'm having a similar issue, where the order of the styles applied are different between two instances of the same component. However, I'm not using ScopedCssBaseline, it's just a one-off customization overriding a nested component style. The component includes an Autocomplete that renders a TextField with the below sx customization:

sx={{
  "& .MuiFilledInput-root.MuiInputBase-sizeSmall": {
    paddingBottom: '4px'
  }
}}

Two instances are rendered next to each other and the padding bottom of the second one is overridden by some default styling of the component.

Versions:
@mui/material: 5.8.1
@mui/styles: 5.8.0

[utkarsh22garg]

Hi team, checking in for any updates here ?

[utkarsh22garg]

Any updates here ?

[smeng9]

Experienced the same issue after marmelab/react-admin#8216

The more general MuiScopedCssBaseline-root * should have a lower priority than the specific MuiSlider-root rule

The CSS order changes causes weird UI glitches, any updates?

[ErikParso]

Exactly same issue with sliders on my side. Any solution or workaround for this ? I added !important to content-box but I am not very satisfied with this solution