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.

[typescript] WithStyles<typeof styles> makes theme required

See original GitHub issue
  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

type Props = WithStyles<typeof styles> or WithStyles<typeof styles, undefined> should not have theme as required.

Current Behavior

type Props = WithStyles<typeof styles> has theme as required;

withstyles withstyles2

image

Steps to Reproduce

Link: https://github.com/geirsagberg/material-bug

Context

The problem appeared after upgrading to 3.1.0. Cannot seem to reproduce in Codesandbox, only locally. Clone the mentioned repo to reproduce.

Your Environment

Tech Version
Material-UI v3.1.0
React v16.5.1
Browser -
TypeScript 3.0.3
etc.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

2reactions
eps1loncommented, Sep 17, 2018

The problem here was that strictNullChecks: false worked perfectly fine in 3.0.3 and prior, and no longer worked in 3.1.0, without the release notes mentioning this at all.

It did not as my example pointed out. It only worked if you consider passing at compile time while throwing at runtime as “working”. I will file a PR that includes your fix and a bit of documentation but saying that it was working with strictNullChecks disabled is wrong. DefinitelyTyped is not documenting this as well which is an issue but documenting a requirement is (in my opinion) not a breaking change.

It’s very convenient that we can apply a fix that is compliant with both configurations but we never have supported strictNullChecks disabled and neither is DefinitelyTyped so I don’t see a reason that we should.

I can already see the issues were people complain that accessing theme at compile time is fine while it throws at runtime and that we should fix this which we can’t because some people were relying on a bug.

2reactions
eps1loncommented, Sep 17, 2018

@dotbear I’m very sorry that this caused so many issues for you. Aside from the issue with theme it should’ve been as simple as

- export const MyComponent = decorate<Props>(props => <Button />)
+ export const MyComponent = decorate((props: Props) => <Button />)

where Props extends WithStyles.

Type definitions and semver don’t really mix very well. The definitions over at DefinitelyTyped don’t follow semver at the moment and I believe that this is ok. Mixing the definitions into the package can cause problems across minor versions. The overall problem is that the old withStyles did not support defaultProps and could’ve been considered a bug that required a breaking change. From my experience with type definitions this happens very often and would require a frequent bump in major versions which might leave non-ts users behind.

In retrospect we could’ve simply added a withStylesLibraryManaged that supported defaultProps. This would’ve allowed users to get typed defaultProps with the new method while we could still support legacy code bases with the inferior withStyles.

I would suggest using @ts-ignore if this is possible. The code will emit just fine. It’s just much noise in the form of false positives.

Read more comments on GitHub >

github_iconTop Results From Across the Web

[typescript] WithStyles<typeof styles> makes theme required
The overall problem is that the old withStyles did not support defaultProps and could've been considered a bug that required a breaking change....
Read more >
ReactJS Material UI Typescript - withStyles warning
import { WithStyles, withStyles, withTheme } from '@material-ui/core'; interface Props ... You don't need to set default Props from styles
Read more >
TypeScript - Material-UI
Unfortunately due to a current limitation of TypeScript decorators, withStyles(styles) can't be used as a decorator in TypeScript. Customization of Theme. When ...
Read more >
Typing React with typescript - DEV Community ‍ ‍
WithStyles<typeof styles> takes a generic type argument of your style object so you don't have to worry about it keeping your types DRY....
Read more >
TypeScript React with Material-ui's makeStyles/withStyles ...
I'm coming to react from the angular world, and I'm having a bit of trouble making sense of how react uses material-ui's…
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