2

Found lots of similar questions but nothing that quite answers this. How do you pass both theme and props to the Material UI makeStyles hook but access them from the outermost closure without TS exploding? Something like this:

type StyleProps = {
  post: Post;
}

const useStyles = makeStyles<Theme, StyleProps>((theme: Theme, props: StyleProps) => ({
    root: {
      maxWidth: '100%',
      backgroundImage: ({ post }) => post.mainImage
    },
    date: {
      margin: theme.spacing(1),
      marginLeft: theme.spacing(2)
    },
    heroimage: {
      maxWidth: '100%',
      height: 'auto',
      objectFit: 'cover'
    }
}))

TS Error:

Type '(theme: Theme, props: any) => { root: (props: any) => CSSProperties; expandable: (props: any) => CSSProperties; iconContainer: { position: string; top: number; right: number; display: string; }; expandMoreIcon: (props: any) => CSSProperties; bannerContent: (props: any) => CSSProperties; }' is not assignable to type 'StyleRulesCallback<Theme, StyleProps, string>'.

I can access props inline from a style block like you see in root but that's not what I'm looking for.

Jose
  • 4,880
  • 8
  • 27
  • 49
  • What `props` are you expecting to get? – Mosh Feu May 12 '21 at 08:31
  • The props you would get if you passed it to the function call: `const classes = useStyles({ post: { mainImage: '' } })` for example. – Jose May 12 '21 at 23:14
  • `that's not what I'm looking for` - are you looking for a way to get the props only once and then use it like `backgroundImage: `url(${post.mainImage})`? – Mosh Feu May 13 '21 at 08:09

0 Answers0