重复问题

• 我搜索了现有的问题

最新版本

• 我测试了最新版本

当前行为 😯

请参考这个复现器 - codesandbox
我创建了两个主题 - theme1 (spacing - 4) 和 theme2 (spacing 2) 。我在每个主题下渲染了MUI滑块，并将其 Package 在 ScopedCssBaseline 下。在每个主题中，我都通过覆盖ScopedCssBaseline的样式来添加自定义滚动条样式。在自定义滚动条中，我传递了 minHeight css属性，这是动态的，并且取决于每个主题中的间距因子。
问题是，当我在每个主题下渲染两个滑块并使用ScopedCssBaseline时，我看到滑块轨道高度之间的差异。进一步调查后，我发现这是因为ScopedCssBaseline在每个滑块中应用样式的顺序发生了变化。

第一个滑块的样式顺序：

第二个滑块的样式顺序：

由于顺序的变化，box-sizing属性被覆盖，导致滑块轨道高度缩小。如果我们在customScrollbar中将 minHeight 作为静态值 50px 给出，问题就会消失。
如 #20461 所建议的那样，我也首先导入了 ScopedCssBaseline ,但仍然会改变顺序。

预期行为 🤔

理想情况下，两个滑块应该具有相同的轨道高度。

重现步骤 🕹

步骤：

1. 访问代码沙箱复现器 - https://codesandbox.io/s/continuousslider-demo-material-ui-forked-i7dbn3
2. 注意第二个滑块和轨道高度。它会比第一个小。理想情况下，它们应该是相同的。
3. 将 customScrollbar 样式中的 minHeight 更改为 50px ,问题将得到解决。
   所以看起来添加动态大小会改变样式注入顺序。

上下文 🔦

我试图在一个页面中展示所有自定义主题的组件外观和感觉，以便进行更好的比较。

你的环境 🌎

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