Make WithStylesOptions extend the options argument of createStyleSheet (

mui#11325) * Make WithStylesOptions extend the options argument of createStyleSheet (fixes mui#25692) * Use CreateStyleSheetOptions from JSS * Provide a type param default for backwards compatibility * Fix issue link in comment * Fix lockfile * Resolve all @types/jss to 9.5.3
oliviertassinari · May 12, 2018 · 51ecd64 · 51ecd64
1 parent 303199d
commit 51ecd64
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0-beta.42",
-    "@types/jss": "^9.3.0",
+    "@types/jss": "^9.5.3",
     "@types/react-transition-group": "^2.0.8",
     "brcast": "^3.0.1",
     "classnames": "^2.2.5",

diff --git a/packages/material-ui/src/styles/withStyles.d.ts b/packages/material-ui/src/styles/withStyles.d.ts
@@ -3,6 +3,7 @@ import { WithTheme } from '../styles/withTheme';
 import { ConsistentWith, Overwrite } from '..';
 import { Theme } from './createMuiTheme';
 import * as CSS from 'csstype';
+import * as JSS from 'jss'
 
 export interface CSSProperties extends CSS.Properties<number | string> {
   // Allow pseudo selectors and media queries
@@ -28,7 +29,7 @@ export interface StylesCreator {
   themingEnabled: boolean;
 }
 
-export interface WithStylesOptions {
+export interface WithStylesOptions<ClassKey extends string = string> extends JSS.CreateStyleSheetOptions<ClassKey> {
   flip?: boolean;
   withTheme?: boolean;
   name?: string;
@@ -47,7 +48,7 @@ export interface StyledComponentProps<ClassKey extends string = string> {
 
 export default function withStyles<ClassKey extends string>(
   style: StyleRules<ClassKey> | StyleRulesCallback<ClassKey>,
-  options?: WithStylesOptions,
+  options?: WithStylesOptions<ClassKey>,
 ): {
   <P extends ConsistentWith<P, StyledComponentProps<ClassKey>>>(
     component: React.ComponentType<P & WithStyles<ClassKey>>,

diff --git a/packages/material-ui/test/typescript/styles.spec.tsx b/packages/material-ui/test/typescript/styles.spec.tsx
@@ -317,3 +317,7 @@ withStyles<'listItem' | 'guttered'>(theme => ({
 
   <DecoratedSomeComponent someProp="hello world" />;
 }
+
+{ // https://github.com/mui-org/material-ui/issues/11312
+  withStyles(styles, { name: "MyComponent", index: 0 })(() => <div/>);
+}
diff --git a/yarn.lock b/yarn.lock
@@ -949,9 +949,9 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/jss@^9.3.0":
-  version "9.5.2"
-  resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.2.tgz#85076b2c16606a6f996aa7e20c1ec7ed6a08075f"
+"@types/jss@^9.3.0", "@types/jss@^9.5.3":
+  version "9.5.3"
+  resolved "https://registry.yarnpkg.com/@types/jss/-/jss-9.5.3.tgz#0c106de3fe0b324cd4173fac7dab26c12cda624e"
   dependencies:
     csstype "^2.0.0"
     indefinite-observable "^1.0.1"