Pass object to material ui styled component

Issue

I have a styled component:

import {styled} from '@mui/material/styles';

export const MovieModalStyle = styled(Box)(({theme}) => ({
  // ...
  background: `url(${'https://image.tmdb.org/t/p/w780/' + movie.backdrop_path})`,
}));

And I want to pass the movie object to it so I can use the backdrop_path property:

<MovieModalStyle movie={movie} />

Referencing the movie prop beside theme returns an error:

styled(Box)(({theme, movie}) => ({
// Error: Property 'movie' does not exist on type 
// IntrinsicAttributes & SystemProps<Theme>

I've tried using the examples in the https://mui.com/system/styled docs but I can't seem to get it to work.

Solution

All props aside from the theme can be found in the style wrapper. For typescript complaints, you can use the same type including the movie type.

import { Box } from '@mui/material';
import { styled } from '@mui/material/styles';

interface Movie {
  backdrop_path: string;
}

export const MovieModalStyle = styled(Box)<{ movie: Movie }>(
  ({ theme, movie }) => ({
    background: `url(${
      'https://image.tmdb.org/t/p/w780/' + movie.backdrop_path
    })`,
  }),
);

You can also change the styled generic type from the first place by overriding the Mui own type

import { Box, BoxTypeMap } from '@mui/material';
import { OverridableComponent } from '@mui/material/OverridableComponent';
import { styled } from '@mui/material/styles';

export const MovieModalStyle = styled<
  OverridableComponent<BoxTypeMap<{ movie: Movie }, 'div'>>
>(Box)(({ theme, movie }) => ({
  background: `url(${
    'https://image.tmdb.org/t/p/w780/' + movie.backdrop_path
  })`,
}));

Don't forget to vote for @NearHuscarl and mentioned question in the comments

Answered By - amirhe