question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Types: `props.theme` should not be optional in Emotion 11

See original GitHub issue

Current behavior:

The props.theme is Theme | undefined instead of Theme, so it’s very hard to migrate to emotion 11 since we need to make sure that the theme is there on every usage.

This was previously discussed and fixed here -> https://github.com/emotion-js/emotion/pull/1501#issuecomment-553489241

I also follow the project to migrate to the new way, as describe here -> https://github.com/emotion-js/emotion/blob/next/docs/typescript.mdx

Note: Since the theme is a runtime variable inject by the ThemeProvider, I totally get that Theme is actually in reality optional and the current implementation is more typesafe, but in another hand, this will be very painful to use if we need to check everytime if the theme is there before consuming it…

To reproduce:

https://codesandbox.io/s/brave-tereshkova-lx8sn

image

=> props.theme is Theme | undefined instead of Theme

Expected behavior:

I was expecting props.theme to be Theme, so the migration to emotion 11 is way less painful 😬

Environment information:

  • react version: 16.8.4
  • emotion version: 11.0.0-next.10

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
Andaristcommented, Jan 8, 2020

Ok, so I’ve actually misunderstood your original report here. I’ve focused myself on that error reported in french - and for that my advice still holds, you should augment builtin interface. But you have also found an issue with our typings 👍 probably a result of different PRs being merged in a roughly the same time and caused a mergeable conflict.

0reactions
Andaristcommented, Jan 9, 2020

Has been fixed by https://github.com/emotion-js/emotion/pull/1708 . Still need to resolve @emotion/serialize problem in https://github.com/emotion-js/emotion/pull/1710 , but expect a new release soon-ish.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript - Emotion
By default, props.theme is an empty object because it's the only thing that is type-safe as a default. You can define a theme...
Read more >
Omit specific prop from an emotion styled component?
That is my question though. How can a create a custom component that has the same type/props as BoxWithAs , except without the...
Read more >
Styling and Theming with React and Emotion CSS Prop
React has made building complex UI components painless and fun. However, styling hundreds of reusable components with CSS stylesheet can ...
Read more >
Building A Component Library With React And Emotion
“Emotion is a library designed for writing CSS styles with JavaScript. ... our theme, which we will apply in defaultOutlineVariantProps and ...
Read more >
Styling and Theming with React and Emotion CSS Prop - Metigy
Emotion is one of the most popular CSS-in-JS libraries offering flexible ways to style components in JS either can be written with string...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found