diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json index b08b8c533..7af8af072 100644 --- a/packages/react-jss/.size-snapshot.json +++ b/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, diff --git a/packages/react-jss/src/createUseStyles.js b/packages/react-jss/src/createUseStyles.js index 48ed29bcd..8ef3e177c 100644 --- a/packages/react-jss/src/createUseStyles.js +++ b/packages/react-jss/src/createUseStyles.js @@ -25,17 +25,20 @@ type CreateUseStyles = (Styles, HookOptions | void) => const createUseStyles: CreateUseStyles = (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( () => { diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js index 0c6a62220..bc7079bb0 100644 --- a/packages/react-jss/src/createUseStyles.test.js +++ b/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( + 'button'}> + + + ) + expect(registry.toString()).to.be(stripIndent` + .button { + color: blue; + } + `) + }) + }) })