[core] Fix mixins not being assignable as JSS styles (#19491)

mui · Jan 31, 2020 · 4cda143 · 4cda143
1 parent bdebdfd
commit 4cda143
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/packages/material-ui/src/styles/createMixins.d.ts b/packages/material-ui/src/styles/createMixins.d.ts
@@ -1,10 +1,10 @@
 import { Breakpoints } from './createBreakpoints';
 import { Spacing } from './createSpacing';
-import * as React from 'react';
+import { CSSProperties } from './withStyles';
 
 export interface Mixins {
-  gutters: (styles?: React.CSSProperties) => React.CSSProperties;
-  toolbar: React.CSSProperties;
+  gutters: (styles?: CSSProperties) => CSSProperties;
+  toolbar: CSSProperties;
   // ... use interface declaration merging to add custom mixins
 }
 

diff --git a/packages/material-ui/src/styles/createMixins.spec.ts b/packages/material-ui/src/styles/createMixins.spec.ts
@@ -0,0 +1,29 @@
+import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
+
+{
+   const theme = createMuiTheme({
+        mixins: {
+            toolbar: {
+                background: '#fff',
+                minHeight: 36,
+                '@media (min-width:0px) and (orientation: landscape)': {
+                    minHeight: 24
+                },
+                '@media (min-width:600px)': {
+                    minHeight: 48
+                }
+            },
+        }
+    });
+
+    const useStyles = makeStyles(theme => ({
+        appBarSpacer: theme.mixins.toolbar,
+        toolbarIcon: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            padding: '0 8px',
+            ...theme.mixins.toolbar,
+        },
+    }));
+}