Skip to content

Use ThemeProvider theme instead of defaultProps theme - #345

Merged
mxstbr merged 6 commits into
styled-components:masterfrom
diegohaz:fix/theme-default-props
Jan 3, 2017
Merged

Use ThemeProvider theme instead of defaultProps theme#345
mxstbr merged 6 commits into
styled-components:masterfrom
diegohaz:fix/theme-default-props

Conversation

@diegohaz

@diegohaz diegohaz commented Jan 2, 2017

Copy link
Copy Markdown
Member

Fix #344

@mxstbr-bot

mxstbr-bot commented Jan 2, 2017

Copy link
Copy Markdown
Warnings
⚠️ There are library changes, but not tests. That's OK as long as you're refactoring existing code

Generated by 🚫 dangerJS

@diegohaz
diegohaz requested a review from k15a January 2, 2017 06:41
Comment thread src/models/StyledComponent.js Outdated
const theme = this.props.theme || nextTheme
const { defaultProps } = this.constructor
const defaultTheme = defaultProps && defaultProps.theme
const isDefaultTheme = defaultTheme && this.props.theme === defaultTheme

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't this be also const isDefaultTheme = this.props.theme === defaultTheme?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right. I'm doing some small changes right now.

@k15a k15a left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably also add a test case to check that #294 isn't happening again with this change.

@diegohaz

diegohaz commented Jan 3, 2017

Copy link
Copy Markdown
Member Author

@k15a There's the test you wrote on #295 and I added a test in ebd4607 to ensure that props will take precedence over ThemeProvider even if its value is equal to defaultProps. Do you know another use case?

@diegohaz

diegohaz commented Jan 3, 2017

Copy link
Copy Markdown
Member Author

I made small changes on the code for better readability. Also added some comments (I'm not a big fan of it, but this props > ThemeProvider > defaultProps may be confusing).

@mxstbr mxstbr left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing, thanks so much! Will ship this asap

@mxstbr
mxstbr merged commit 1e179b4 into styled-components:master Jan 3, 2017
@diegohaz
diegohaz deleted the fix/theme-default-props branch January 6, 2017 11:14
@ghalex

ghalex commented Aug 27, 2018

Copy link
Copy Markdown

This still dosen't work as it should be, check this example:
https://codesandbox.io/s/6w6nq15n2k

@diegohaz

Copy link
Copy Markdown
Member Author

@ghalex Once you pass the prop from a normal component to a styled component ({...this.props}), there's no way for the latter to know whether it came from props or default props.

But you can enhance component with withTheme: https://codesandbox.io/s/m3nrmxvjw9

@ghalex

ghalex commented Aug 29, 2018

Copy link
Copy Markdown

Thanks @diegohaz I understand now why it only works if you pass defaultProps only directly to styled component.

@ghalex

ghalex commented Aug 29, 2018

Copy link
Copy Markdown

Another thing @diegohaz your example crashes in production when you have no ThemeProvider. Check this https://codesandbox.io/s/vr3q97or5 I have deployed it here: https://csb-vr3q97or5-ylvgjfxbld.now.sh/ and it crash. I think is related to this #1709

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants