[styles] Passing classes prop override to makeStyles ends up in typescript error
See original GitHub issue- 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 😯
When you try to pass classes for the hook made by makeStyles
it ends up in typescript error saying that classes prop does not exist.
export interface StyleProps {
imageUrl?: string;
}
const useStyles = makeStyles(() => ({
root: {
backgroundImage: ({ imageUrl }: StyleProps) => (imageUrl ? `url(${imageUrl})` : null)
}
}));
export type ImageCardProps = StyleProps & { classes?: Partial<ClassNameMap<"root">> };
export const ContainedButtons = ({ imageUrl, classes: outerClasses }: ImageCardProps) => {
const classes = useStyles({ imageUrl, classes: outerClasses });
// Argument of type '{ imageUrl: string; classes: Partial<Record<"root", string>>; }' is not assignable to parameter of type 'StyleProps'.
// Object literal may only specify known properties, and 'classes' does not exist in type 'StyleProps'
return <div className={classes.root} />;
};
Expected Behavior 🤔
Classes prop should be a correct value as it’s mentioned in https://material-ui.com/styles/advanced/#makestyles
Your Environment 🌎
https://codesandbox.io/s/material-demo-forked-l6u7v?file=/demo.tsx
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:6 (3 by maintainers)
Top Results From Across the Web
[styles] Passing classes prop override to makeStyles ends up ...
When you try to pass classes for the hook made by makeStyles it ends up in typescript error saying that classes prop does...
Read more >Using makeStyles in material ui with typescript - Stack Overflow
and use Your style same this: first time import this import { makeStyles, Theme, createStyles } from "@material-ui/core/styles";.
Read more >Advanced (LEGACY) - MUI System
You have to use the classes prop of a component to override the styles. The non-deterministic nature of the class names enables style...
Read more >TypeScript - Emotion
This is because @emotion/react resolves the value of the css prop to a class name and then passes this class name down to...
Read more >Global Styling with Material-UI Theme Overrides and Props
Learn how to use global CSS overrides and default props in a theme to customize all instances of a Material-UI component in a...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Probably should look like this https://codesandbox.io/s/material-demo-forked-6u310?file=/demo.tsx @ikibalnyi
Thank you!