[material-ui] sx properties have inconsistencies when using class/object notation

[darkocejkov]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/elated-bhaskara-h7lfkm?file=%2Fsrc%2FDemo.tsx

No steps to replicate.

Current behavior

Certain MUI React components have differences in styling when using the object-class notation such as "MuiButton-root" to try and style certain root and sub-components of the whole component.

The live example shows that MUI Button's sx works only with the exact syntax "& .", and stops applying the styles when using the syntax "&."
However, the Slider does the exact opposite.

Expected behavior

I would expect that both patterns should be support in ALL component styling.

Context

Style components, and specifically their sub-components.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

System:
OS: macOS 14.3
Binaries:
Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Not Found
Safari: 17.3
Vivaldi: 6.6.3271.50
npmPackages:
@emotion/react: ^11.7.1 => 11.11.1
@emotion/styled: ^11.6.0 => 11.11.0
@mui/base: 5.0.0-beta.23
@mui/core-downloads-tracker: 5.14.17
@mui/icons-material: ^5.3.1 => 5.14.16
@mui/material: ^5.10.0 => 5.14.17
@mui/private-theming: 5.14.17
@mui/styled-engine: ^5.3.0 => 5.14.17
@mui/styles: ^5.3.0 => 5.14.17
@mui/system: 5.14.17
@mui/types: 7.2.8
@mui/utils: 5.14.17
@mui/x-data-grid: 6.18.7
@mui/x-data-grid-premium: ^6.16.2 => 6.18.7
@mui/x-data-grid-pro: 6.18.7
@mui/x-date-pickers: ^6.19.0 => 6.19.0
@mui/x-license-pro: 6.10.2
@types/react: 18.2.37
react: ^17.0.0 || ^18.0.0 => 18.2.0
react-dom: ^17.0.0 || ^18.0.0 => 18.2.0
styled-components: ^5.3.3 => 5.3.11
typescript: ^4.5.5 => 4.9.5

Search keywords: sx class "&." "& ."

[ZeeshanTamboli]

& . targets nested components within the element having that classname, while &. targets the element itself having that classname.

[github-actions]

👋 Thanks for using our open-source projects!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.