传递对象到材质ui样式组件

Question

我有一个样式化的组件:

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

我想把movie对象传递给它这样我就可以使用backdrop_path属性了:

<MovieModalStyle movie={movie} />

在主题旁边引用电影道具会返回一个错误:

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

我试过使用https://mui.com/system/styled文档中的例子，但我似乎不能让它工作。

Answer 1

除了主题之外的所有道具都可以在样式包装器中找到。对于typescript的投诉，您可以使用相同的类型，包括movie类型。

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
})`,
}),
);

您还可以通过覆盖Mui自己的类型来改变样式泛型类型

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
})`,
}));

不要忘记投票给@NearHuscarl，并在评论中提出问题