[英]After styling mui component with styled component it is not taking props
import { Link } from "react-router-dom";
import { MoviesType } from "../types";
import { FeturedCardContainer, MainCard, StyledCardMedia } from "./style";
type FeaturedMovieProps = {
movie: MoviesType;
};
const FeaturedMovie = ({ movie }: FeaturedMovieProps) => {
if (!movie) return null;
return (
// Styled Box
<FeturedCardContainer component={Link} to={`/movie/${movie.id}`}>
{/* Styled Card */}
<MainCard>
<StyledCardMedia
component="img"
alt={movie.title}
title={movie.title}
image={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
/>
</MainCard>
</FeturedCardContainer>
);
};
export default FeaturedMovie;
import { Box, Card, CardMedia } from "@mui/material";
import { styled } from "@mui/styles";
export const FeturedCardContainer = styled(Box)(() => ({
marginBottom: "20px",
display: "flex",
justifyContent: "center",
height: "490px",
textDecoration: "none",
}));
export const MainCard = styled(Card)(() => ({
width: "100%",
display: "flex",
justifyContent: "flex-end",
flexDirection: "column",
position: "relative",
}));
export const StyledCardMedia = styled(CardMedia)(() => ({
position: "absolute",
top: "0",
right: "0",
height: "100%",
width: "100%",
backgroundColor: "rgba(0,0,0,0.575)",
backgroundBlendMode: "darken",
}));
After I styled the component it showing the error.在我为组件设置样式后,它显示了错误。
ERROR 1错误 1
Type '{ children: Element; component: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>; to: string; }' is not assignable to type 'IntrinsicAttributes & Omit<SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
Property 'to' does not exist on type 'IntrinsicAttributes & Omit<SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
11 | return (
12 | // Styled Box
> 13 | <FeturedCardContainer component={Link} to={`/movie/${movie.id}`}>
| ^^
14 | {/* Styled Card */}
15 | <MainCard>
16 | <StyledCardMedia
ERROR 2错误 2
Type '{ component: string; alt: string; title: string; image: string; }' is not assignable to type 'IntrinsicAttributes & Omit<{ children?: ReactNode; classes?: Partial<CardMediaClasses> | undefined; image?: string | undefined; src?: string | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
Property 'component' does not exist on type 'IntrinsicAttributes & Omit<{ children?: ReactNode; classes?: Partial<CardMediaClasses> | undefined; image?: string | undefined; src?: string | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
15 | <MainCard>
16 | <StyledCardMedia
> 17 | component="img"
| ^^^^^^^^^
18 | alt={movie.title}
19 | title={movie.title}
20 | image=
I am using Mui + React.我正在使用 Mui + React。 Trying to style mui component with styled component but after styling the component I am unable to pass some of the props If I go with default Component it is taking the props but after styling it is not taking尝试使用样式化组件设置 mui 组件的样式,但在设置组件样式后,我无法传递一些道具
You should use Link tag inside FeturedCardContainer tag.您应该在 FeturedCardContainer 标签内使用 Link 标签。
<FeturedCardContainer>
<Link to={`/movie/${movie.id}`}>
<MainCard>
<StyledCardMedia
alt={movie.title}
title={movie.title}
image={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
/>
</MainCard>
</Link
</FeturedCardContainer>
and no need to use component={img} on StyledCardMedia并且无需在 StyledCardMedia 上使用 component={img}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.