Skip to content
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

Can't type props of createStyles/makeStyles while still inferring class names #20094

Closed
levrik opened this issue Mar 13, 2020 · 5 comments
Closed

Comments

@levrik
Copy link

@levrik levrik commented Mar 13, 2020

It's not possible to type props of createStyles or makeStyles while still inferring the class names.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using makeStyles<Theme, SomeProps> will result in Record<string, string> as it's return-value.
I don't have to even try createStyles since the class names come as the first generic type and are not optional.

Expected Behavior 🤔

To be able to type props of makeStyles or createStyles without loosing inference of the class names.

Steps to Reproduce 🕹

https://codesandbox.io/s/elated-river-kzgm5

Your Environment 🌎

Tech Version
Material-UI v4.9.5
TypeScript 3.7.5
@eps1lon

This comment has been minimized.

Copy link
Member

@eps1lon eps1lon commented Mar 13, 2020

makeStyles with two generic params expects the ClassKey as the second param:
export default function makeStyles<Theme = DefaultTheme, ClassKey extends string = string>

If you specify the Theme you also have to specify ClassKey. Otherwise TypeScript will fallback to the default which is string.

- const useStyles2 = makeStyles<Theme, {}>(() =>
+const useStyles2 = makeStyles((theme: Theme) =>

Generally you don't need to use the generic arguments. By specifying them explicitly you errors closer to the origin and full inference.

@levrik

This comment has been minimized.

Copy link
Author

@levrik levrik commented Mar 13, 2020

@eps1lon I think you misunderstood. I want to pass props to useStyles that are used inside the stylesheet. I want to type these. But it doesn't seem to be possible to type these without having to define them manually.

@eps1lon

This comment has been minimized.

Copy link
Member

@eps1lon eps1lon commented Mar 13, 2020

But it doesn't seem to be possible to type these without having to define them manually.

makeStyles<Theme, ClassKey, Props> if you prefer this syntax. You have to decide though in TypeScript. Either use inference or type each generic argument. There is no middleground in TypeScript. If you're interested in this feature please subscribe to microsoft/TypeScript#26242

@levrik

This comment has been minimized.

Copy link
Author

@levrik levrik commented Mar 13, 2020

@eps1lon But I don't see a way of getting the props typed by inference or am I missing something here?

@eps1lon

This comment has been minimized.

Copy link
Member

@eps1lon eps1lon commented Mar 13, 2020

I think you get better help on StackOverflow. Maybe

{
// https://github.com/mui-org/material-ui/pull/15546
// Update type definition to let CSS properties be functions
interface testProps {
foo: boolean;
}
const useStyles = makeStyles((theme: Theme) => ({
root: {
width: (prop: testProps) => (prop.foo ? 100 : 0),
},
root2: (prop2: testProps) => ({
width: (prop: testProps) => (prop.foo && prop2.foo ? 100 : 0),
height: 100,
}),
}));
const styles = useStyles({ foo: true });
// $ExpectType string
const root = styles.root;
// $ExpectType string
const root2 = styles.root2;
}
already helps?

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

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.