question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
povilasscommented, Jan 8, 2021
0reactions
ikibalnyicommented, Jan 8, 2021

Thank you!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found