getColorSchemeSelector returns the wrong selector when multiple are present

[joebochill]

Steps to reproduce

Link to live example: https://codesandbox.io/s/brave-euler-y5ghwt?file=/src/Demo.tsx

Steps:

1. Use the new CssVarsProvider
2. Create two wrapper elements to force the theme mode (with data-mui-color-scheme)
3. Style a component using the theme selector

<div data-mui-color-scheme={"dark"}>
  <div data-mui-color-scheme={"light"}>
    <Box
      sx={(theme) => ({
        height: 100,
        width: 100,
        backgroundColor: "primary.main",
        [theme.getColorSchemeSelector("dark")]: {
          backgroundColor: "error.main"
        }
      })}
    />
  </div>
</div>

Current behavior

The dark mode styles are being applied (because there is a dark mode ancestor in the tree) even though the nearest parent element is setting light mode.

Expected behavior

The component should be styled using the light theme rules/values since the nearest parent element specifies light theme.

Context

I'm noticing this in a storybook project where I am trying to show the dark mode styles and light mode styles for a component side by side.

Your environment

npx @mui/envinfo

Using Chrome

  System:
    OS: macOS 14.5
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 9.0.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.183
    Edge: Not Found
    Safari: 17.5

Search keywords: CssVars Theme getColorSchemeSelector