polish

mui · Feb 7, 2021 · 9929999 · 9929999
1 parent cd7c7b3
commit 9929999
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 45 deletions.
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -9,6 +9,7 @@ import {
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale';
 import { blue, pink } from '@material-ui/core/colors';
+import darkScrollbar from '@material-ui/core/darkScrollbar';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/core/utils';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
@@ -224,6 +225,15 @@ export function ThemeProvider(props) {
         spacing,
       },
       dense ? highDensity : null,
+      {
+        components: {
+          MuiCssBaseline: {
+            styleOverrides: {
+              body: paletteMode === 'dark' ? darkScrollbar() : null,
+            },
+          },
+        },
+      },
       languageMap[userLanguage],
     );
 

diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md
@@ -67,24 +67,25 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
 
 ### Scrollbars
 
-The colors of the scrollbars can be customized to provide a better contrast. Add this code to your theme (for dark mode).
+The colors of the scrollbars can be customized to improve the contrast. Add this code to your theme (for dark mode).
 
 ```jsx
-import { darkScrollbar } from '@material-ui/system';
+import darkScrollbar from '@material-ui/core/darkScrollbar';
 
-...
-
-createMuiTheme({
+const theme = createMuiTheme({
   components: {
     MuiCssBaseline: {
       styleOverrides: {
-        body: theme.palette.mode === 'dark' ? darkScrollbar() : {},
+        body: theme.palette.mode === 'dark' ? darkScrollbar() : null,
       },
     },
   },
-})
+});
 ```
 
+The documentation website you are on uses `darkScrollbar` when the dark mode is enabled.
+However, be aware that using this help (and customizing `-webkit-scrollbar`) forces macOS to always show the scrollbar.
+
 ### Typography
 
 - No base font-size is declared on the `<html>`, but 16px is assumed (the browser default).

diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts
@@ -329,5 +329,3 @@ export {
   extendSxProp as unstable_extendSxProp,
 } from './styleFunctionSx';
 export * from './styleFunctionSx';
-
-export function darkScrollbar(): object;
diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js
@@ -25,4 +25,3 @@ export {
   extendSxProp as unstable_extendSxProp,
 } from './styleFunctionSx';
 export { default as unstable_getThemeValue } from './getThemeValue';
-export { default as darkScrollbar } from './scrollbar';
diff --git a/packages/material-ui-system/src/scrollbar.js b/packages/material-ui-system/src/scrollbar.js
diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts
@@ -176,6 +176,9 @@ export * from './Container';
 export { default as CssBaseline } from './CssBaseline';
 export * from './CssBaseline';
 
+export { default as darkScrollbar } from './darkScrollbar';
+export * from './darkScrollbar';
+
 export { default as Dialog } from './Dialog';
 export * from './Dialog';
 

diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js
@@ -104,6 +104,9 @@ export * from './Container';
 export { default as CssBaseline } from './CssBaseline';
 export * from './CssBaseline';
 
+export { default as darkScrollbar } from './darkScrollbar';
+export * from './darkScrollbar';
+
 export { default as Dialog } from './Dialog';
 export * from './Dialog';