add passing theme from props in useStyles

Author: Sergey Volodin

packages/react-jss/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "react-jss.js": {
-    "bundled": 169770,
-    "minified": 59580,
-    "gzipped": 19568
+    "bundled": 169886,
+    "minified": 59592,
+    "gzipped": 19571
   },
   "react-jss.min.js": {
-    "bundled": 112410,
-    "minified": 42780,
-    "gzipped": 14522
+    "bundled": 112526,
+    "minified": 42792,
+    "gzipped": 14525
   },
   "react-jss.cjs.js": {
-    "bundled": 27701,
-    "minified": 12334,
-    "gzipped": 3862
+    "bundled": 27813,
+    "minified": 12346,
+    "gzipped": 3868
   },
   "react-jss.esm.js": {
-    "bundled": 25284,
-    "minified": 10437,
-    "gzipped": 3639,
+    "bundled": 25396,
+    "minified": 10449,
+    "gzipped": 3643,
     "treeshaked": {
       "rollup": {
         "code": 1815,

packages/react-jss/src/createUseStyles.js

@@ -25,17 +25,20 @@ type CreateUseStyles = <Theme: {}>(Styles<Theme>, HookOptions<Theme> | void) =>
 const createUseStyles: CreateUseStyles = <Theme: {}>(styles, options = {}) => {
   const {index = getSheetIndex(), theming, name, ...sheetOptions} = options
   const ThemeContext = (theming && theming.context) || DefaultThemeContext
+
+  /* eslint-disable no-unused-vars */
   const useTheme =
     typeof styles === 'function'
       ? // $FlowFixMe[incompatible-return]
-        (): Theme => React.useContext(ThemeContext) || noTheme
+        (propsTheme?: Theme): Theme => propsTheme || React.useContext(ThemeContext) || noTheme
       : // $FlowFixMe[incompatible-return]
-        (): Theme => noTheme
+        (_?: Theme): Theme => noTheme
+  /* eslint-enable no-unused-vars */
 
   return function useStyles(data: any) {
     const isFirstMount = React.useRef(true)
     const context = React.useContext(JssContext)
-    const theme = useTheme()
+    const theme = useTheme(data.theme)
 
     const [sheet, dynamicRules] = React.useMemo(
       () => {

packages/react-jss/src/createUseStyles.test.js

@@ -1,7 +1,11 @@
 /* eslint-disable react/prop-types */
 
-import {createUseStyles} from '.'
+import * as React from 'react'
+import {renderToString} from 'react-dom/server'
+import expect from 'expect.js'
+import {stripIndent} from 'common-tags'
 import createCommonBaseTests from '../test-utils/createCommonBaseTests'
+import {createUseStyles, JssProvider, SheetsRegistry} from '.'
 
 const createStyledComponent = (styles, options) => {
   const useStyles = createUseStyles(styles, options)
@@ -14,4 +18,27 @@ const createStyledComponent = (styles, options) => {
 
 describe('React-JSS: createUseStyles', () => {
   createCommonBaseTests({createStyledComponent})
+
+  describe('theme prop', () => {
+    it('should pass theme from props priority', () => {
+      const registry = new SheetsRegistry()
+
+      const styles = theme => ({
+        button: {color: theme.exampleColor || 'green'}
+      })
+
+      const MyComponent = createStyledComponent(styles)
+
+      renderToString(
+        <JssProvider registry={registry} generateId={() => 'button'}>
+          <MyComponent theme={{exampleColor: 'blue'}} />
+        </JssProvider>
+      )
+      expect(registry.toString()).to.be(stripIndent`
+      .button {
+        color: blue;
+      }
+    `)
+    })
+  })
 })