1

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.

amirhe
  • 2,186
  • 1
  • 13
  • 27
Peter Boomsma
  • 8,851
  • 16
  • 93
  • 185
  • could you create a codesandbox? – nima Oct 25 '21 at 14:11
  • Does this answer your question? [Material-UI v5 passing props to CSS theme](https://stackoverflow.com/questions/69308658/material-ui-v5-passing-props-to-css-theme) – NearHuscarl Oct 25 '21 at 14:15
  • @NearHuscarl not exactly. Seemed like I had some typescripting errors. – Peter Boomsma Oct 25 '21 at 14:53
  • 1
    The typescript error can be fixed in [this](https://stackoverflow.com/a/69677803/9449426) answer, you don't need to use `OverridableComponent`, it's unnecessary. – NearHuscarl Oct 25 '21 at 15:08

1 Answers1

2

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

amirhe
  • 2,186
  • 1
  • 13
  • 27
  • I thought as well, but `Type '{ children: Element[]; movie: any; }' is not assignable to type 'IntrinsicAttributes & SystemProps` says otherwise. – Peter Boomsma Oct 25 '21 at 14:26
  • okay, @PeterBoomsma, does the update fix your type issue? – amirhe Oct 25 '21 at 14:34
  • https://codesandbox.io/s/69308658-material-ui-v5-pass-props-to-css-theme-forked-nw4x7?file=/styles.tsx:210-230 got it working. Do you perhaps have a link to some documentation regarding `OverridableComponent` ? Can't find any on the mui site. – Peter Boomsma Oct 25 '21 at 14:49
  • 1
    No, I just enhance the own suggest type with the movie, I guess [source code](https://github.com/mui-org/material-ui/blob/4866c2cca36f6a478fbd1843947fe0ffd6ee4062/packages/mui-system/src/createStyled.js#L112) can help but not so much; If you found something let me know that we could post it here for posterity – amirhe Oct 25 '21 at 14:54
  • 2
    The typescript error can be fixed in [this](https://stackoverflow.com/a/69677803/9449426) answer using shorter code, you don't need `OverridableComponent` for custom props. – NearHuscarl Oct 25 '21 at 15:10