Expected behavior:
In version 10.0.0 and above, the TS definition clearly states that, if user wants to use theme in the function, Theme type must be supplied to the generic createUseStyles
type as follows:
declare function createUseStyles<T, C extends string>(
styles: (theme: T) => Record<C, Style | string>,
options?: {
index?: number
name?: string
theming?: Theming<T>
} & StyleSheetFactoryOptions
): (data?: any) => Record<C, string>
Thus user could use types styles with provided theme as follows:
const useStyles = createUseStyles<Theme, "checkboxWrapper" | "input">((theme: Theme) => ({
checkboxWrapper: {
display: "inline-flex",
alignItems: "center",
fontSize: theme.utils.pxToRem(14),
},
input: {
marginRight: theme.utils.pxToRem(6),
}
}));
And the useStyles
hook would return proper classNames.
Describe the bug:
In [email protected] a new typescript definitions were introduced which are breaking against previous behavior. The Theme argument no longer needs to be supplied to the generic which means that every usage of createUseStyles
is now broken.
declare function createUseStyles<C extends string = string>(
styles: ((theme: any) => Styles<C>),
options?: CreateUseStylesOptions
): (data?: unknown) => Classes<C>
Recommended fix
Revert this behavior under 10.0.4 version and release a new major version with this breaking change, according to the semver.
Codesandbox link:
Please create a codesandbox.io with the issue. Make it as minimal as possible as this will help us find the bug quicker.
Versions (please complete the following information):
- react-jss: 10.0.3
- Browser [e.g. chrome, safari]: yes
- OS [e.g. Windows, macOS]: yes
Feel free to add any additional versions which you may think are relevant to the bug.
typescript