diff --git a/packages/react-emotion/src/index.js b/packages/react-emotion/src/index.js index b83ffbf2d..deddde368 100644 --- a/packages/react-emotion/src/index.js +++ b/packages/react-emotion/src/index.js @@ -78,12 +78,9 @@ const createStyled = (tag, options: { e: string }) => { class Styled extends Component { render() { const { props, state } = this - this.mergedProps = props - if (state !== null && state.theme) { - this.mergedProps = omitAssign(testAlwaysTrue, {}, props, { - theme: state.theme || {} - }) - } + this.mergedProps = omitAssign(testAlwaysTrue, {}, props, { + theme: (state !== null && state.theme) || props.theme || {} + }) let className = '' let classInterpolations = [] diff --git a/packages/react-emotion/test/__snapshots__/index.test.js.snap b/packages/react-emotion/test/__snapshots__/index.test.js.snap index 47358b028..2a4957bcd 100644 --- a/packages/react-emotion/test/__snapshots__/index.test.js.snap +++ b/packages/react-emotion/test/__snapshots__/index.test.js.snap @@ -647,6 +647,28 @@ exports[`styled random object expression 1`] = ` `; +exports[`styled theme prop exists without ThemeProvider 1`] = ` +.glamor-0 { + color: green; + background-color: yellow; +} + +
+`; + +exports[`styled theme prop exists without ThemeProvider with a theme prop on the component 1`] = ` +.glamor-0 { + color: hotpink; + background-color: yellow; +} + + +`; + exports[`styled themes 1`] = ` .glamor-0 { background-color: #ffd43b; diff --git a/packages/react-emotion/test/index.test.js b/packages/react-emotion/test/index.test.js index 5a3a916ff..7c3c4ea51 100644 --- a/packages/react-emotion/test/index.test.js +++ b/packages/react-emotion/test/index.test.js @@ -682,4 +682,22 @@ describe('styled', () => { const tree = renderer.create(