Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui] Remove use client from the index styles #41131

Closed
wants to merge 8 commits into from
Closed

[material-ui] Remove use client from the index styles #41131

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
eaa0322
remove use-client
siriwatknp Feb 16, 2024
42cc95b
remove use-client
siriwatknp Feb 16, 2024
ef34c3c
revert
siriwatknp Feb 19, 2024
4fd57a1
fix getInitColorSchemeScript
siriwatknp Feb 19, 2024
5bfb29d
revert
siriwatknp Feb 19, 2024
704b50d
run prettier
siriwatknp Feb 19, 2024
b307f0b
Merge branch 'master' of https://github.com/mui/material-ui into fix/…
siriwatknp Feb 19, 2024
914f8d6
add react import
siriwatknp Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions packages/mui-material/src/styles/CssVarsProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
'use client';
// do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
/* eslint-disable @typescript-eslint/no-unused-vars */
// @ts-ignore
import * as React from 'react';
import { unstable_createCssVarsProvider as createCssVarsProvider, SxProps } from '@mui/system';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dead logic?

Suggested change
import * as React from 'react';

Copy link
Member Author

@siriwatknp siriwatknp Feb 19, 2024 •
edited by oliviertassinari
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Required, see https://ci.codesandbox.io/status/mui/material-ui/pr/41131/builds/473769.

stdout: "../mui-material/src/styles/CssVarsProvider.tsx(15,9): error TS2742: The inferred type of 'CssVarsProvider' cannot be named without a reference to 'packages/mui-types/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.\n" +
"../mui-material/src/styles/getInitColorSchemeScript.ts(13,25): error TS2742: The inferred type of 'getInitColorSchemeScript' cannot be named without a reference to 'packages/mui-types/node_modules/@types/react'. This is likely not portable. A type annotation is necessary.\n",
stderr: '

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah right, @Janpot left a comment about this above. The .d.ts file generated https://unpkg.com/browse/@mui/[email protected]/styles/CssVarsProvider.d.ts needs this import.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would the following work as well without the @ts-ignore?

/// <reference types="react" />

import { SxProps } from '@mui/system';
import createCssVarsProvider, { getInitColorSchemeScript as systemGetInitColorSchemeScript } from '@mui/system/cssVars';
import styleFunctionSx from '@mui/system/styleFunctionSx';
import experimental_extendTheme, {
SupportedColorScheme,
Expand All @@ -15,15 +15,19 @@ import THEME_ID from './identifier';

const defaultTheme = experimental_extendTheme();

const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
const ATTRIBUTE = 'data-mui-color-scheme';
const MODE_KEY = 'mui-mode';
const COLOR_SCHEME_KEY = 'mui-color-scheme';

const { CssVarsProvider, useColorScheme } = createCssVarsProvider<
SupportedColorScheme,
typeof THEME_ID
>({
themeId: THEME_ID,
theme: defaultTheme,
attribute: 'data-mui-color-scheme',
modeStorageKey: 'mui-mode',
colorSchemeStorageKey: 'mui-color-scheme',
attribute: ATTRIBUTE,
modeStorageKey: MODE_KEY,
colorSchemeStorageKey: COLOR_SCHEME_KEY,
defaultColorScheme: {
light: 'light',
dark: 'dark',
Expand All @@ -46,6 +50,18 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
excludeVariablesFromRoot,
});

function getInitColorSchemeScript(...params: Parameters<typeof systemGetInitColorSchemeScript>) {
return systemGetInitColorSchemeScript({
attribute:ATTRIBUTE,
colorSchemeStorageKey: COLOR_SCHEME_KEY,
defaultMode: 'light',
defaultLightColorScheme: 'light',
defaultDarkColorScheme: 'dark',
modeStorageKey: MODE_KEY,
...params,
})
}

export {
useColorScheme,
getInitColorSchemeScript,
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/styles/adaptV4Theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createBreakpoints, createSpacing } from '@mui/system';
import { createBreakpoints, createSpacing } from '@mui/system/createTheme';

export default function adaptV4Theme(inputTheme) {
if (process.env.NODE_ENV !== 'production') {
Expand Down
1 change: 0 additions & 1 deletion packages/mui-material/src/styles/defaultTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
'use client';
import createTheme from './createTheme';

const defaultTheme = createTheme();
Expand Down
1 change: 0 additions & 1 deletion packages/mui-material/src/styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
'use client';
import MuiError from '@mui-internal/babel-macros/MuiError.macro';

export { default as THEME_ID } from './identifier';
Expand Down
Loading