Skip to content

[system] Add getColorSchemeSelector util#32868

Merged
siriwatknp merged 2 commits intomui:masterfrom
siriwatknp:system/css-vars-fn
May 27, 2022
Merged

[system] Add getColorSchemeSelector util#32868
siriwatknp merged 2 commits intomui:masterfrom
siriwatknp:system/css-vars-fn

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented May 23, 2022 •
edited
Loading

From https://github.com/mui/material-ui/pull/32835/files#r877687572, this PR adds a simple util to prevent hard-coded style like this:

styled('div')(({ theme }) => ({
  [theme.getColorSchemeSelector('dark')]: {
     // becomes '[data-mui-color-scheme="dark"] &'
     ...styles for dark mode
  }
})

without this util, the bug appears when developers provide a custom attribute to CssVarsProvider:

<CssVarsProvider attribute="data-company-color-scheme">

// HTML
<html data-company-color-scheme="dark">

Unit and regression tests are added.

@siriwatknp siriwatknp requested a review from mnajdova May 23, 2022 04:04
@siriwatknp siriwatknp added the scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI label May 23, 2022
@mui-bot
Copy link

mui-bot commented May 23, 2022 •
edited
Loading

Details of bundle changes

Generated by 🚫 dangerJS against 4abe3c5

@siriwatknp siriwatknp mentioned this pull request May 24, 2022
Merged
1 task
@siriwatknp siriwatknp merged commit be24437 into mui:master May 27, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mnajdova mnajdova mnajdova approved these changes

Assignees

No one assigned

Labels

scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@siriwatknp @mui-bot @mnajdova