-
-
Notifications
You must be signed in to change notification settings - Fork 401
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
support global typescript theme definition #1453
Conversation
Most users will be lazy and will not create the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm
hi @moshest, if users don't extend the this matches the old behaviour, so it won't be a breaking a change. |
merged, thanks! |
will be released with the next release, we aggregate a bit |
Released in v10.6.0 |
This PR fixes a number of things that make react-jss's
createUseStyles
less convenient for TypeScript users.The problems:
createUseStyles
is tedious because you need to pass the theme as a type argument every time, which has to be imported from somewhere (createUseStyles<MyTheme>(theme => { ... })
)This is because, if you supply a type argument, the union type (
"myHeader" | "myFooter"
in the screenshot) just becomesstring
.
To fix this, you have to duplicate every class name, and now the code looks horrendous:
createUseStyles<MyTheme>()
syntax is not possible in JS files.This PR fixes these 3 issues.
Anyone (TypeScript and JavaScript users) can create a file called
global.d.ts
anywhere in their project. It is not imported by anything; TypeScript and/or VSCode's TSServer finds it automatically. It could like this:Now, when call
createUseStyles()
you don't need to provide any type arguments to get type definitions for the theme, and the class names (see screenshot above) are automatically inferred by typescript without defining them separately.I have added tests to confirm that this works and that TypeScript produces errors if you make a typo in the
classes
object or thetheme
object.Todo