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

fix(makeStyles): make props mandatory when declared non-empty #3859

Open
wants to merge 1 commit into
base: next
Choose a base branch
from

Conversation

darkbasic
Copy link
Contributor

Motivation

Currently makeStyles always returns a function which optionally requires props.
I think this is a typings bug because props should be required if the props are needed to create the styles.
With my change if you specify a non empty type for the props the argument of the returned function would be required, otherwise optional.

export interface MyComponentStyleProps {}
export interface MyComponentProps extends MyComponentStyleProps {
  [...]
}

const MyComponent: FC<MyComponentProps> = ({[...]}) => {
  const styles = useStyles();

  return (
    <AnotherComponent />
  );
};

const useStyles = makeStyles((theme, props: MyComponentStyleProps) => ({
  [...]
}));

Since MyComponentStyleProps is an empty object props would not be required.

const MyComponent: FC<MyComponentProps> = ({[...]}) => {
  const styles = useStyles();

  return (
    <AnotherComponent />
  );
};

const useStyles = makeStyles((theme, props) => ({
  [...]
}));

If you don't specify a type props wouldn't be required either.

export interface MyComponentStyleProps {
  customStyle: any;
}
export interface MyComponentProps extends MyComponentStyleProps {
  [...]
}

const MyComponent: FC<MyComponentProps> = ({
  customStyle,
  [...]
}) => {
  const styles = useStyles({customStyle});

  return (
    <AnotherComponent />
  );
};

const useStyles = makeStyles((theme, props: MyComponentStyleProps) => ({
  [...]
}));

Now you will have to specify props otherwise useStyles will error out.

I would have rather preferred to let the user specify the generic (ex. makeStyles<MyComponentStyleProps>((theme, props)) but that would force you to specify all generics so you won't be able to infer the stylesheet type for the second generic.
Once microsoft/TypeScript#54047 gets merged it should be possible to do so.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • This change requires a documentation update

How Has This Been Tested?

  • Jest Unit Test
  • Checked with example app
  • Checked with production app

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation using yarn docs-build-api
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules

Additional context

@darkbasic
Copy link
Contributor Author

Please note that the build is currently broken in the next branch, see #3858

@arpitBhalla
Copy link
Member

Fixed by #3844. Let me know if it's working for the snippets you provided.

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.

None yet

2 participants